首页 > 其他分享> > DOM知识点总结

DOM知识点总结

2022-06-11 23:33:39 作者：互联网

DOM-Document Object Model

部分知识点总结,话不多说,上代码

1.DOM查询剩余方法

 <script>
        window.onload = function () {
            //获取body标签
            //var body = document.getElementByTagName("body")[0];
            //在document中有一个属性body,它保存的是body的引用
            var body = document.body;

            // document.documentElement保存的是html标签
            var html = document.documentElement;
            console.log(html);

            //document.all代表页面所有的元素
            var all = document.all; 根基元素的class属性chaxunyi

            //根据元素的class属性查询一组元素节点对象
            //getElementsClassName()不兼容ie8及以下
            var box1 = document.getElementsByClassName("box1");
            console.log(box1.length);

            //获取页面中所有的div
            var divs = document.getElementsByTagName("div");

            /*
             * document.querySelector()
             * -需要一个选择器的字符串作为参数,可以根据css选择器来查询一个元素节点对象
             * -虽然ie8中没有getElementsByClassName(),但是也可以使用querySelector()代替
             * -使用该方法会返回唯一一个元素,如果满足条件的元素有多个,那么他只会返回第一个
             */
            var div = document.querySelector(".box1 div");
            var box1 = document.querySelector(".box1");
            /*
             * document.querySelectorAll()
             * -方法和querySelector()用法类似,不同的是她会符合条件的元素封装到一个数组中
             * -即使符合条件的元素只有一个.也会返回数组
             * 
             */
            var box1=document.querySelectorAll(".box1");
        }
    </script>
</head>

<body>
    <div class="box1">
        <div>第一个</div>
    </div>
    <div class="box1">
        <div>第二个</div>
    </div>
    <div class="box1">
        <div>第三个</div>
    </div>
</body>

2.DOM增删改

写了具体几个case来加深理解

//创建一个"广州"节点,添加到#city下
myClick("btno1",function(){
    //创建广州节点<li>广州</li>
    //创建li元素节点
   
     //可以创建一个元素节点对象
    //需要一个标签名作为参数,将会根据标签名创建元素节点对象
    //并将创建的对象作为返回值返回
   var li= document.createElement("li");
   
   //创建广州文本节点
   //document.createTextNode()
   //可以用来创建一个文本节点对象
   //需要一个文本内容作为参考,将会根据该内容创建文本节点,并将新的节点返回
   var geText= document.createTextNode("广州");
    
    //将geText设置li的子节点
    //向一个父节点添加一个新的子节点
    //用法:父节点.appendChild(子节点)
    li.appendChild(gzText);
    
    //将"广州"添加到city下
    city.appendChild(li);
;})

//将广州插入到#bj之前
myClick("btn02",function(){
    //创建一个广州
    var li=document.createElement("li");
    var gzText=document.createTextNode("广州");
    li.appendChild(geText);
    //获取id为bj的节点
    var bj=document.getElementById("city");
    //获取city
    var city=document.getElementById("city");
    //insertBefore()
    //--可以在指定的子节点前插入新的子节点
    //语法:
    //父节点.insertBefore(新节点,旧节点)
    city.insertBefore(li,bj);
})
//replaceChild()
//可以使用指定的子节点替换已有的子节点
//语法:父节点.replaceChild(新节点,旧节点);

//removeChild()
//--可以删除一个子节点
//--语法:父节点.removeChild(子节点);
//也可 子节点.parentNode.removeChild(子节点)

bj.parentNode.removeChild(bj);

//向city中添加广州
var city=document.getElementById("city");
//使用innterHTML也可以完成DOM的增删改的相关操作,动作太大一般我们会两种方式结合
//city.innterHTML+="<li>广州</li>"

var li=document.createElement("li");
li.innterHTML="广州";

标签：总结,知识点,DOM,li,city,var,document,box1,节点
来源： https://www.cnblogs.com/buxiu888/p/16359496.html