DOM的基本概念

好好睡觉好好学习好好吃饭

已于 2022-03-22 10:20:16 修改

阅读量648

点赞数

分类专栏： Javascript 文章标签： javascript

于 2022-03-20 21:40:44 首次发布

本文链接：https://blog.csdn.net/weixin_46273011/article/details/123615043

版权

Javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

对于某些HTML熟悉可以直接打点调用，不需要用style。例如，src，href等。

对于不符合W3C属性，可以通过setAttribute来设置，也可以读取

节点定义和类型

定义：DOM是标签和JS的桥梁，通过DOM找到标签的对象，该对象就可以成为JS的变量。为什么可以通过DOM找到标签对象呢？是DOM将 HTML标签变为了节点树

使用方法nodeType，书写的方法节点名称.nodeType

  <div id="box1">
        <p id="para">A</p>
        <p>B</p>
        <p>C</p>
    </div>
    <script>
        var box1 = document.getElementById("box1");
        var para = document.getElementById("para");
        // 1
         console.log(box1.nodeType)
  </script>

nodeType	节点类型
1	元素节点，标签<div>等
3	文字
8	注释
9	docume
10	DTD

获得元素节点

通过id来获得元素对象——document.getElementById("id的名称")

通过标签来获得元素对象——document.getElemetByTagName("标签")

通过类来获得元素对象——document.getElementByClassName("类名")

获得元素后需要对元素节点声明变量。

注意点：演示运行，DOM是在html标签的后才运行的，也就是script在标签后面

也可以在<head></head>里面先 window.οnlοad=function(){}

<div>
        <p id="p1">id节点元素选择器</p>
        <p id="p2" class="spec">id节点元素选择器2</p>
 </div>
 <script>
       

        // var a= document.getElementById("p1");
        // var a = document.getElementsByTagName("p")
        var a = document.getElementsByClassName("spec");
        console.log(a);   
</script>

通过选择器来获得——document.querySelector("")，

document.querySelectorall("")，选择的是一个数组

下面的代码没有单独选中一个元素对象，存在问题

   <div>
        <p id="p1">id节点元素选择器</p>
        <p id="p2" class="spec">id节点元素选择器2</p>
    </div>

    <div class="box2">
        <p >id节点元素选择器</p>
        <p  class="spec">id节点元素选择器2</p>
    </div>
    <script>
       

        // var a= document.getElementById("p1");
        // var a = document.getElementsByTagName("p")
        // var a = document.getElementsByClassName("spec");
        var a = document.querySelector(".box2 .spec");
        console.log(a);   
        </script>

节点关系

各个节点之间的关系，父子，大儿子，小儿子，大哥，小弟等

使用函数的方法，通过上述的方法找到节点后，也可以就可以找个其他的节点

注意：两个标签之间的空白文白也是属于一个文本节点

    <div>
        <p id="p1">id节点元素选择器</p>
        <p id="p2" class="spec">id节点元素选择器2</p>
    </div>

    <div class="box2">
        <p >id节点元素选择器</p>
        <p  class="spec">id节点元素选择器2</p>
    </div>
    <script>
       

        // var a= document.getElementById("p1");
        // var a = document.getElementsByTagName("p")
        // var a = document.getElementsByClassName("spec");
        var a = document.querySelector(".box2");
        console.log(a.childNodes);   
        </script>

封装IE6 的一些节点寻找函数

1）寻找所有元素节点

发展到IE9的时候定位到元素节点

但要实现IE6时候，也可以定位到子元素节点，即封装节点函数

思路：

  <div id="box1">
        <p id="para">A</p>
        <p>B</p>
        <p>C</p>
    </div>
    <script>
        var box1 = document.getElementById("box1");
        var para = document.getElementById("para");
        // 1
        // console.log(box1.nodeType)
        // 有7个子节点，childNOdes 是IE6版本
        // console.log(box1.childNodes)
        //  有三个元素节点,children 是IE9版本
        // console.log(box1.children);
        

        // 如果版本低，写一个节点封装函数，实现children函数的功能
        // Zj难点形参怎么写,获得的变量是什么，存储到什么地方
        // t 对象不是父节点，而是父节点的使用childNodes后的子节点数组
        function fun(node){
          var child=[];
            for (var i=0;i<node.childNodes.length;i++){
                if(node.childNodes[i].nodeType==1){
                    child.push(node.childNodes[i])
                }
              
            }
            return child;
        }
  console.log(fun(box1));
    </script>

2）寻找上一个子节点

思路：也是要从当前的子节点一步步对前面的节点进行判断，使用循环语句，但是对于前面有多少个节点是不清楚的，所以采用循环语句。循环结束的条件是到父节点了或者已经到元素节点，while的条件用到父节点作为结束条件，return null，用if语句和return作为找到元素节点。用 node =node.previousSibling作为步长，向结束的条件推进


        // text，是于div之间的空白文本, 是IE6版本
        // console.log(para.previousSibling.nodeType);
        // <p >A</p>,是IE9版本
        // console.log(para.previousElementSibling)

        function fun(node){
            // var o= node;
            while(node.previousSibling!=null){
                if(node.previousSibling.nodeType==1){
                    return node.previousSibling
                }
                node =node.previousSibling;
            
            }
            return null;


        }
               console.log(fun(para));

3）找到所有兄弟的元素节点

思路找到父节点，再找到父节点对应的兄弟节点

  console.log(para.parentNode.children) ;

对节点进行编辑

对节点内容进行编辑

   <div class="box1">
        <p id="para"></p>
    </div>
    <script>
        var para = document.getElementById("para");
        console.log(para);
        // 是给p标签内的内容赋值，所以用的等号写法
        // para.innerHTML="写什么呢";
        para.innerText="你只能写文本";

    </script>

对节点元素的css进行改变

    <div class="box1">
        <p id="para"></p>
    </div>
    <script>
        var para = document.getElementById("para");
        console.log(para);
        // 是给p标签内的内容赋值，所以用的等号写法
        // para.innerHTML="写什么呢";
        para.innerText="你只能写文本";
        para.style.color="red";

    </script>

对于某些HTML熟悉可以直接打点调用，不需要用style。例如，src，href等。

下面代码对于替换图片，使用标签寻找节点元素，无法进行替换？？？因为标签寻找和类名寻找到的是数组

<div class="box1">
        <p id="para"></p>
        <img src="images/1.jpg" alt="" id ="oimg">
    </div>
    <script>
        var para = document.getElementById("para");
   
        // var oimg = document.getElementsByTagName("img");
        //oimg[0].src="images/0.jpg";
        var oimg = document.getElementById("oimg");
        console.log(oimg);
        oimg.src="images/0.jpg";

    </script>

对于不符合W3C属性，可以通过setAttribute来设置，也可以读取

  <div class="box1" >
        <p id="para" data=""></p>
        <img src="images/1.jpg" alt="" id ="oimg">
    </div>
    <script>
        var para = document.getElementById("para");
        // console.log(para);
        para.setAttribute("data",10);
        var a =para.getAttribute("data");
        console.log(a);
  </script>

节点创建

创建节点，但是是孤儿节点，需要将其挂在DOM树上。

1，根据父节点插入作为末尾子节点，父节点.appendChild(要插入的节点)；2根据兄弟节点插入前面，父节点.insertBefore(要插入的节点，兄弟节点)。

    <div id="box1">
        <p>我是段落1</p>
        <p>我是段落2</p>
        <p>我是段落3</p>
        <p>我是段落4</p>
    </div>
    <script>
        
    // 创建新的节点
    var op=document.createElement("p");
    op.innerHTML=("我是新增段落");
    // 以父节点为基准，挂到最后一个子节点
    // var obox1 =document.getElementById("box1");
    // box1.appendChild(op);
    // 义兄弟节点为基准，挂到兄弟的节点的前面
    var p = document.getElementsByTagName("p");
    box1.insertBefore(op,p[2]);
    </script>

创建节点对应的题目

1，创建20*20的表格；2，创建99乘法表

对for循环代码的一个理解，对局部变量，进行循环操作，每一遍循环同一个名称的局部变量都在不同的内存处保存改变后的变量值

 <table id="tab1">

    </table>
    
    <script>

        // 思路：先创建行，行的父子节点是table，
        var obox1 =document.getElementById("tab1");
        function hang(){
            for (var i=1;i<=20;i++){
                // 每一次产生新的变量都存贮到var tr中，是否是同一个地址，从代码的实现是重新新建了地址
                var tr = document.createElement("tr");
                tr.innerHTML="表格单元";
                obox1.appendChild(tr)
                for(var j =1;j<=11;j++){
                    var td = document.createElement("td");
                    td.innerHTML="表格单元";
                    tr.appendChild(td)

                }
            

        }
        }
        hang();
        
        // 制作九九乘法表格
            // 思路：先创建行，行的父子节点是table，
        var obox1 =document.getElementById("tab1");
        function hang(){
            for (var i=1;i<=9;i++){
                // 每一次产生新的变量都存贮到var tr中，是否是同一个地址，从代码的实现是重新新建了地址
                var tr = document.createElement("tr");
                // tr.innerHTML="表格单元";
                obox1.appendChild(tr)
                for(var j =1;j<=i;j++){
                    var td = document.createElement("td");
                    
                    td.innerHTML=Number(i)+"*"+Number(j)+"="+i*j;
                    tr.appendChild(td)

                }
            

        }
        }
        hang();
     

    </script>

移动节点

可以将有父节点的元素移动，所用的函数和挂孤儿节点是一样的

    <div id="box1">
        <p id="para">我是段落</p>
    </div>
    <div id="box2">
        <p>我不是段落</p>
        <p>我不是段落</p>
        <p>我不是段落</p>

    </div>
    <script>
        var obox2 =document.getElementById("box2");
        var para = document.getElementById("para");
        var p = document.getElementsByClassName;
        // obox2.appendChild(para);
        obox2.insertBefore(p[0],para);

    </script>

移除节点

父节点.removeChild（要移除的子节点）

    <div id="box1">
        <p id="para">我是段落</p>
    </div>
    <div id="box2">
        <p>我不是段落</p>
        <p>我不是段落</p>
        <p>我不是段落</p>

    </div>
    <script>
        var obox2 =document.getElementById("box2");
        var p = document.getElementsByTagName("p");
        obox2.removeChild(p[1]);

    </script>

克隆节点

克隆的节点也是孤儿节点，也需要挂树

    <div id="box1">
        <ul id="ul1">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <div id="box2">
   

    </div>
    <script>

        var obox1 =document.getElementById("box1");
        var obox2 =document.getElementById("box2");
        var oul1 =document.getElementById("ul1");
        // 没用true是克隆当前一个节点，使用true则子节点也会克隆
       var ul_new = oul1.cloneNode(true);
       obox2.appendChild(ul_new);
    </script>

好好睡觉好好学习好好吃饭

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DOM的基本概念

DOM是标签和JS的桥梁，通过DOM找到标签的对象，该对象就可以成为JS的变量。使用方法nodeType，书写的方法节点名称.nodeType <div id="box1"> <p id="para">A</p> <p>B</p> <p>C</p> </div> <script> var box1 = docu
复制链接

扫一扫