JS——DOM

Posted 2020-12-05 小海_macro

自定义属性操作

    标签自带属性：idclassonclick等固有属性

    支持添加属性：获取固有属性，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‘);

        });