码迷,mamicode.com
首页 > Web开发 > 详细

JS——DOM

时间:2020-06-01 16:54:27      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:bsp   掌握   append   previous   工具   child   clone   children   包括   

自定义属性操作

    标签自带属性:id\class\onclick等固有属性

    支持添加属性:获取固有属性,undefined

    获取属性(自定义、固有均支持):  -getAttribute(‘自定义id名‘)

    设置属性                        -setAttribute(‘id名‘,"vale")

    移除属性:          removeAttribut(‘属性名‘)    或者:box.class=‘‘;[将值设为空]

    元素.属性   一般只对固有属性进行操作。

    h5设置: data-自定义属性名  data=idx -->  但是获取自定义属性: box.dataset.idx [ie11开始支持]

                                                                box.dataset[idx]

    //孩子节点 a instanceof Array:并不是数组,只是类数组对象

    ul.childNodes   //注意:包含所有儿子:文本、li、注释、回车换行{

        即: 其长度问题注意!

        ele.nodeType : {

            1:li,元素节点

            3:文本节点,回车换行

            8:注释节点

        }

    }

//box.nextSibling:下一个兄弟节点,包括:元素,文本节点等

//box.nextElementSibling:下一个兄弟元素

//同理:previous

// chrome ,fireFox火狐开发插件

    element.parentNode      父亲节点

    //获取html元素——父亲为 #document  [document无上一级,返回null]

    var oHtml = document.documentElement

                document.html

    //不同浏览器兼容性问题:考虑版本问题【完全跟金融领域,又是另一种思维】或者期本质一样,不同金融工具

    //孩子节点 a instanceof Array:并不是数组,只是类数组对象

    ul.childNodes   //注意:包含所有儿子:文本、li、注释、回车换行{

        即: 其长度问题注意!

        ele.nodeType : {

            1:li,元素节点

            3:文本节点,回车换行

            8:注释节点

        }

    }

    // children属性:得到元素的所有子元素-->具体定位某个节点     重点掌握:得到元素的所有元素子节点

    ul.children.length

    // firstChild : 所有孩子的第一个节点【所有儿子包括文本节点中选择第一个】 --- lastChild

    // firstElementChild : ie9+以后支持

//表格删除行列

tbody.removeChild(this.parentNode.parentNode);        //tbody.removeChild(tr)

对象禁用

btn.onclick = function() {

if (ul.children.length > 0) {

let eleRe = ul.removeChild(ul.children[0]);

console.log(eleRe);

            } else {

btn.disabled = true;

            }

        }


行内样式为: 建议双引号,“”

元素查找——>元素操作

    获取元素地内容

    innnerHTML  支持标签

    innerText   不支持


ondbclick:双击事件

// appendChild:在末尾添加儿子

oUl.appendChild(oLi);

// 第二个参数:参照物,// // 在一个儿子前添加,如果不存在null,在末尾添加

oUl.insertBefore(oLi, null);

//在第几个元素前添加元素

oUl.insertBefore(oLi, oUl.children[0]);


//复制第一个li到末尾ul

var ul = document.getElementsByTagName(‘ul‘)[0];

var first = ul.children[0];

ul.appendChild(first); //剪切粘贴

//克隆一份

var clone1 = ul.children[0].cloneNode(true); //cloneNode():默认参数为false,浅复制;true为深复制

ul.appendChild(clone1);


父亲做代理,来处里儿子点击事件

// true:表示在捕获阶段监听; false:表示在冒泡阶段监听

<div class="fa">

<div class="son"></div>

</div>

<script>

var fa = document.querySelector(‘.fa‘);

var son = document.querySelector(‘.son‘);

// onclick  attachEvent

son.addEventListener(‘click‘, function() {

console.log(‘冒泡 son‘);

        }, false);

fa.addEventListener(‘click‘, function() {

console.log(‘冒泡 fa‘);

        }, false);

document.addEventListener(‘click‘, function() {

console.log(‘冒泡 documnet‘);

        }, false);


son.addEventListener(‘click‘, function() {

console.log(‘true son‘);

        }, true);

fa.addEventListener(‘click‘, function() {

console.log(‘true fa‘);

        }, true);

document.addEventListener(‘click‘, function() {

console.log(‘true documnet‘);

        }, true);

</script>


function addEventListener(ele, eventName, fn) {

if (ele.addEventListener) {

ele.addEventListene(eventName, fn);

            } else if (ele.attachEvent) {

ele.attachEvent(‘on‘ + eventName, fn);

            } else {

ele[‘on‘ + eventName] = fn;

            }

        }

addEventListener(btn, ‘mouseover‘, function() {

console.log(‘ok‘);

        });

JS——DOM

标签:bsp   掌握   append   previous   工具   child   clone   children   包括   

原文地址:https://www.cnblogs.com/macro-renzhansheng/p/13025975.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!