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

xiongmao
2022-02-22 / 0 评论 / 565 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2022年02月22日,已超过756天没有更新,若内容或图片失效,请留言反馈。

导读:

排他思想

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

  1. 所有元素清除样式(干掉其他人)
  2. 给当前元素设置样式(留下我自己)
  3. 注意顺序不能颠倒,干掉其他人,在设置自己
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. 获取元素的属性值(自定义属性)


区别:

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

移除属性removeAttribute

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)


DOM提供的(API)获取

  1. var ul = document.querySelector('ul');
  2. var lis = document.querySelectorAll('li');

    子节点children

    firstChild

    firstChild 第一个子节点,不管是文本节点还是元素节点

  3. var ol = document.querySelector('ol');
  4. console.log(ol.firstChild);
  5. 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伪元素

  1. 创建节点元素节点
  2. 添加节点 mode.appendChild(child) node 父级 child 字级 后面追加元素
    类似于数组的push
  3. var ul =document.queryselect('ul');
  4. 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);
        }
区别

区别:

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

海报

正在生成.....

评论

博主关闭了所有页面的评论