dom元素的操作方式

好久不见呀，CSDN。最近一直才忙，今天先从一个基础知识点，dom元素的操作来说起吧。关于dom元素的操作，之前也有接触过一点点，但需要注意的是，dom元素过多的创建会影响浏览器的性能。所以呢，求人不如求己，与其抱怨浏览器的性能和其他，不如先从优化自己的代码开始。

再唠叨一下，何为dom （DOM: Document Object Module, 文档对象模型），通俗将就是可以实现从编程中更改html中内容的一种接口。

dom元素的操作

dom元素的操作可以看作一下几种

dom元素的获取
动态创建dom元素
子父（同胞）元素操作
dom追加属性设置等等.....（以下内容将通过具体代码来实现，建议去实战练习）

dom元素的获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>dom 元素的操作</title>
</head>
<body>
        <div class="b" style="width: 200px"></div>
        <ul id="item">
            <li>coffee</li>
            <li>tea</li>
            <li>water</li>
            <li>milk</li>
            <li>juice</li>
        </ul>
    <script>
        // dom元的操作  动态创建dom元素   子父元素操作  以及dom追加  属性设置等等..... 
    // 1.dom元素的获取   
    // var a=document.getElementsByClassName() 获取为集合 数组方式
    // var b=document.getElementsByName() 获取为nodes 元素节点集合
    // var c= document.getElementById()  获取单个对象 集合 数组方式
    // var d=document.getElementsByTagName()  以元素名称获取 集合 数组方式
    </script>
</body>
</html>

期间，可以用 console.log(); 来在控制台去输出当前的内容，用来调试及理解。

动态创建dom元素

        // document.createElement();
        // var a=document.createElement('title');
        // console.log(a);   动态创建一个title标签

子父（同胞）元素操作

/*dom元素里面如何操作子节点*/
    var ulItem = document.getElementById("item");
    /*childElementCount  子节点的个数*/
    /*console.log(ulItem.childElementCount);*/
    /*for (var i = 0; i < ulItem.childNodes.length; i++) {
        /!*if(ulItem.childNodes[i].nodeType==1)
         {
         console.log(ulItem.childNodes[i]);
         }*!/
        if (ulItem.childNodes[i].nodeName == "LI") {
            console.log(ulItem.childNodes[i]);
        }
    }*/
    /*firstChild   lastChild*/
    console.log(ulItem.children);
    /*找父元素里面的 子节点  有两个属性  childNodes  返回的是所有的节点  children  返回的是元素节点*/
    console.log(ulItem.firstChild); //输出第一个回车
    console.log(ulItem.firstElementChild);


    /*找元素的父级元素*/
    var liData=document.getElementById("lilist");
    /*console.log(liData.parentNode);*/
    /*console.log(liData.parent); 无效*/
    /*console.log(liData.parentElement);*/
    /*找元素的同胞兄弟*/
    /*console.log(liData.nextSibling);
    console.log(liData.nextElementSibling);*/
    /*console.log(liData.previousElementSibling);
    console.log(liData.previousSibling);*/

dom追加属性设置等等....

// 3.给元素设置属性
        //  1.给元素设置自定义属性
        // var obj=document.createElement('div');
        // obj.setAttribute('data-name','123456');
        // console.log(obj);//给obj 对象设置了一个自定义属性 data-name 值为 123456
        // 2.对内置属性的操作
         var obj=document.createElement('div');
         obj.style.backgroundColor='red';
         obj.style.width='200px';
         obj.style.height='100px';
        // console.log(obj);
        //3.操作属性、、对一部分的标签适用或部分功能部分适用
        // var obj=document.createElement('div');
        // obj.width='100px';
        // obj.className='block box'//两个class 名字
        // console.log(obj);
        // 4.自定义属性的获取
        var obj=document.createElement('div');
        obj.setAttribute('data-name','123456');
        console.log(obj);//给obj 对象设置了一个自定义属性 data-name 值为 123456
        console.log(obj.getAttribute('data-name'));
        

    // 4.dom元素的追加  document.write()   .innerHTML  .innerText
         var obj=document.createElement('div');
         obj.style.backgroundColor='red';
         obj.style.width='200px';
         obj.style.height='100px';
        //  document.body.innerHTML=obj;//不行
        //  document.body.innerText=obj;//不行
        //  document.write(obj);//不行

        //1. appendChild() //是给当前元素的内容之后进行追加
        document.body.appendChild(obj);//节点类型  node

        // 2.insertBefore()//将新元素添加到旧元素之前
        var ele=document.getElementsByClassName('b')[0];
        document.body.insertBefore(obj,ele);//obj 为新元素

关于这些内容，我觉得最好的方式就是去练习各种案例，完成一些小的项目，因为单纯的语法点并不能够产生深刻的记忆，在写代码是也不要怕犯错，有时候改bug能是我们更好地理解和记忆。

dom元素的操作方式

dom元素的操作

猜你喜欢