dom元素的操作方式

电玩女神 2022-04-22 20:40 269阅读 0赞

> 好久不见呀，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能是我们更好地理解和记忆。