DOM(节点操作children-自定义属性-)

Posted 2022-02-22 by xiongmao; tagged with children , 节点操作children , 自定义属性 , 创建元素 , 删除元素 , 复制元素

导读：

排他思想

如果有同一组元素，我们想要某一个元素实现某种功能，需要用到循环的排他思想算法

所有元素清除样式（干掉其他人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒，干掉其他人，在设置自己

v<body>
    <!-- 排他思想 
    如果有同一组元素，我们想要某一个元素实现某种功能，
    需要用到循环的排他思想算法
    1.所有元素清除样式（干掉其他人）
    2.给当前元素设置样式，（留下我自己）
    3.注意顺序不能颠倒，干掉其他人，再设置自己
    -->
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>

    <script>
        var btns = document.getElementsByTagName('button');
        //获取的是伪数组
        for(var i = 0; i < btns.length; i++) {
            btns[i].onclick = function(){
                for(var i = 0; i<btns.length; i++){
                    btns[i].style.backgroundColor = '';
                }
                this.style.backgroundColor = 'pink';
            }

        }
    </script>

自定义属性

1. 获取元素的属性值（自定义属性）

{tabs}
{tabs-pane label="element.属性"}
console.log(div.id);
{/tabs-pane}
{tabs-pane label="element.getAttribute('属性')"}
element.getAttribute('属性')：
1.get 得到获取
2.attribute 属性意思就是：我们自己添加的属性称为自定义属性
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
{/tabs-pane}
{/tabs}
区别：

element.属性获取内置属性值（元素本身自带的属性）
element.getAttribute('属性')；主要获取自定义属性（标准）我们自己为元素定义的属性

设置元素属性值

{tabs}
{tabs-pane label="element.属性 = '值' "}
div.id = 'text';
div.className = 'navs';
{/tabs-pane}
{tabs-pane label="element.stAttribute('属性','值') "}
主要针对于自定义属性
div.setAttribute('index',2);
div.setAttribute('class','footer') class特殊这里写的就是class
{/tabs-pane}
{/tabs}

移除属性removeAttribute

{callout color="#f0ad4e"}
div.removeAttribute('index');
{/callout}

H5新增的自定义属性

<div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector("div");
        console.log(div.getAttribute('getTime'));
        div.setAttribute('data-time', 20);
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));
        //h5 新增的获取自定义属性的方法 他只能后去data-开头的
        //dataset 是一个集合里面存放了所有以data开头的自定义属性
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        //如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>

节点操作（children）

{callout color="#f0ad4e"}
父节点： parentNNode
得到的是离元素最近的父节点
{/callout}
DOM提供的（API）获取

var ul = document.querySelector('ul');
var lis = document.querySelectorAll('li');
子节点children
{tabs}
{tabs-pane label="children(重点)"}
console.log(ul.children);
获取所有的子元素节点也是实际开发最常用的，获取的是伪数组，所以有长度
{/tabs-pane}
{tabs-pane label="childNodes"}
所有的子节点包含元素节点文本节点等等
console.log(ul.childNodes);
console.log(ul.childnodes[0].noodeType);
{/tabs-pane}
{/tabs}
firstChild
firstChild 第一个子节点，不管是文本节点还是元素节点
var ol = document.querySelector('ol');
console.log(ol.firstChild);
console.loog(ol.lastChild);
实际开发的写法，既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
节点操作之创建节点和添加元素
创建节点
documennt.creatElement('tagName');
document.createElement() 方法创建由 tagName 指定HTML元素是根据我们的需求动态生成的，所以我们也称为动态创建元素节点
添加节点
node.appendChild(child)

node.appendChild()方法将一个节点添加到父节点的子节点列表末尾。类似于css里面的after伪元素

创建节点元素节点
{callout color="#ef4d4d"}
var li = documen.createElement('li');
{/callout}
添加节点 mode.appendChild(child) node 父级 child 字级后面追加元素
类似于数组的push
var ul =document.queryselect('ul');
ul.appendChild(li);
添加节点 node.insertBefore(child,指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili,ul.children[0]);

节点操作之删除节点

node.removeChild(child)
ul.removeChild(ul.children[0])

    <script>
        // 1.获取元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        //删除元素 node.removeChild(child)
        //ul.removeChild(ul.children[0]);
        //3.点击按钮依次删除里面的孩子
        btn.onclick = function(){
            if(ul.children.length == 0){
                this.disabled = true;
            }else{
                ul.removeChild(ul.children[0]);
            }
        }
    </script>

节点操作-复制节点

node.cloneNode(); 括号为空那个或者里面为false 浅拷贝只复制标签不复制标签里面的内容
node.cloneNode(true);括号为true 深拷贝复制标签复制里面的内容
var ul = document.querySelector('ul');
var lili = ul.children[0].cloneNode[true];
ul.appendChild(lili);

三种创建元素方式区别

1.documen.write() 了解

创建元素如果页面文档流加载完毕吗，在调用这句话会导致页面重绘（也就是页面覆盖）

2.innerHTML创建元素

  var inner = document.querySelector('.inner');
       /*  for(var i = 0; i <= 100; i++){
            inner.innerHTML += '<a href="#">百度</a>';
        } */.
        var arr =  [];
        for(var i = 0; i <= 100; i++){
            arr.push('<a href="#">百度</a>');
        }

3.documen.createElement() 创建元素

        var create = document.querySelector('.create');
        for(var i = 0; i <=100; i++){
            var a = document.createElement('a');
            create.appendChild(a);
        }

区别

区别:

document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
innerHTML 是将内容写入某个DOM节点，不会导致页面全部重绘
innerHTML 创建对个元素效率更高（不要拼接字符串，采用数组式拼接），结构稍微复杂
createElement() 创建多个元素效率稍微低一点点，但是结构更清晰
总结:不同浏览器下 innerHTML效率要比 creatElement高，但是innerHTML必须使用数组形式