第十二讲 dom对象（DOM对象、document对象的常用方法、节点、查找结点、查看/修改/删除属性节点、创建和增加节点）

Fiki515

已于 2022-05-09 21:41:28 修改

阅读量1.6k

点赞数

文章标签： java

于 2022-04-24 20:54:21 首次发布

本文链接：https://blog.youkuaiyun.com/Fiki515/article/details/124391405

版权

一、查看节点

getElementById( ) 元素的ID名称来访问，返回对拥有指定id的第一个对象的引用
getElementsByName( ) 按元素的name名称来访问，返回带有指定名称的对象的集合
getElementsByTagName( )按标签来访问，返回带有指定标签名的对象的集合

 <body>
    <div id="box">hello box</div>
  </body>
  <script>
    var oDiv = document.getElementById("box"); //div元素对象
    // var oDiv = document.getElementsByTagName("div")[0];
    // console.log(oDiv.nodeName); //节点名称 DIV
    // console.log(oDiv.tagName); //标签名称 DIV

    // console.log(oDiv.nodeType); //1  节点类型
    // console.log(oDiv.nodeValue); //null  节点值

    // var attr = oDiv.getAttributeNode("id");
    // console.log(attr);
    // alert(attr); //[object Attr]属性对象
    // console.log(attr.nodeName); //节点名称  属性名
    // console.log(attr.nodeType); //节点类型  2
    // console.log(attr.nodeValue); //节点值  属性值

    var ch = oDiv.firstChild; //第一个子节点
    // console.log(ch);
    // alert(ch); //[object Text] 文本对象节点
    console.log(ch.nodeName); //节点名称  文本
    console.log(ch.nodeType); //节点类型 3
    console.log(ch.nodeValue); //节点值  文本值

    // get获取
    // Attribute 属性
    // Node  节点

    // 节点类型：
    // 元素节点   1
    // 属性节点   2
    // 文本节点   3
  </script>

二、查看节点

1、根据层次关系查找节点

（1）通过父节点对象查找子节点对象

父节点对象.firstChild 获取当前元素的第一个子节点
父节点对象.lastChild 获取当前元素的最后一个子节点
父节点对象.childNodes 获取当前元素的所有子节点可能会有空格
父节点对象.firstElementChild 查找父节点下的第一个子元素节点
父节点对象.lastElementChild 查找父节点下的最后一个子元素节点
父节点对象.children：获取当前元素的所有子元素

（2）通过子节点对象查找父节点对象

子节点对象.parentElement 通过子节点查找父元素
子节点对象.parentNode 获取当前元素的父元素

（3）通过子节点查找兄弟节点

子节点对象.previousSibling 获取当前元素的前一个兄弟节点
子节点对象.nextSibling 获取当前元素的后一个兄弟节点
子节点对象.previousElementSibling 获取当前元素的前一个兄弟节点
子节点对象.nextElementSibling 获取当前元素的后一个兄弟节点

<body>
    <ul id="box">
        <li id="list">列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
  </body>
  <script>
    var oUl = document.getElementById("box");
    var oLi = document.getElementById("list");

    // console.log(oUl.firstChild);//第一个子节点  可能有文本节点 换行
    // console.log(oUl.firstElementChild);//第一个子元素节点

    // console.log(oUl.lastChild);//最后一个子节点   可能有文本节点 换行
    // console.log(oUl.lastElementChild);//最后一个子元素节点

    // console.log(oUl.childNodes);//ul里的所有的子节点对象 可能有文本节点
    console.log(oUl.children);//ul里的所有的子元素节点对象

    // console.log(oUl.firstChild.nodeType); //3
    // console.log(oUl.firstChild.nodeValue); //

    // console.log(oUl.childNodes.length); //7
    // var elArr = [];
    // for (var i = 0; i < oUl.childNodes.length; i++) {
    // //   console.log(oUl.childNodes[i]);
    //     if(oUl.childNodes[i].nodeType === 1){
    //         elArr.push(oUl.childNodes[i])
    //     } 
    // }
    // console.log(elArr);



   console.log(oLi.parentNode); //查找父节点
   console.log(oLi.parentElement);//查找父元素

  

    // 父节点查找子节点

    // 通过父节点对象查找子节点对象（可能会有文本节点）  兼容性好
    // 父节点对象.firstChild  查找父节点下的第一个子节点
    // 父节点对象.lastChild   查找父节点下的最后一个子节点
    // 父节点对象.childNodes   多个  查找父节点下的所有的子节点

    // 通过父节点对象查找子元素节点对象   
    // 父节点对象.firstElementChild  查找父节点下的第一个子元素节点
    // 父节点对象.lastElementChild   查找父节点下的最后一个子元素节点
    // 父节点对象.children   多个  查找父节点下的所有的子元素节点


    // 子节点查找父节点
    // 子节点对象.parentNode  通过子节点查找父节点
    // 子节点对象.parentElement  通过子节点查找父元素
  </script>

三、查看/修改/删除属性节点

查看属性节点：getAttribute("属性名")
修改属性节点：setAttribute("属性名","属性值")
删除属性节点：removeAttribute(“属性名”)

<body>
    <ul id="box" a="10">
        <li>列表1</li>
        <li id="list">列表2</li>
        <li>列表3</li>
    </ul>
</body>
<script>
   var oUl = document.getElementById("box");
//   console.log(oUl.id);
//    console.log(oUl.a);//无法获取自定义的属性值
//    console.log(oUl.getAttribute("id")); 
//    console.log(oUl.getAttribute("a")); //可以获取自定义属性

// 设置
    // oUl.title = "hello"
    // oUl.b = 100;

    oUl.setAttribute("title","hello")
    oUl.setAttribute("b",100);
    // oUl.removeAttribute("a");
    oUl.removeAttribute("a");

//    节点对象.getAttribute("属性名") 根据属性名获取属性值
//    节点对象.setAttribute("属性名","属性值") 
//    节点对象.removeAttribute("属性名")   删除对应的这对属性
</script>

四、创建和增加节点的方法

createElement（）：创建元素节点
appendChild（）：末尾追加方式插入节点
insertBefore（）：在指定节点前插入新节点
cloneNode（）：克隆节点

 <style>
        img{
            width: 100px;
        }
    </style>
</head>
<body>
   <div id="box">
       hello world
   </div>

   <button id="btn">点击添加图片</button>
</body>
<script>
    var oDiv = document.getElementById("box");
    var oBtn = document.getElementById("btn");
    // var oSpan = document.createElement("span");
    oBtn.onclick = function(){
        var oImg = document.createElement("img");//创建图片节点对象
        // oImg.src = ""
        oImg.setAttribute("src","./img/biaoqing.webp");//设置图片节点对象src属性
        // oDiv.appendChild(oImg);//把创建好的图片节点对象追加到div内部最后
        document.body.appendChild(oImg);//把创建好的图片节点对象追加到body内部最后
    }
    
    // console.log(oSpan);//元素对象
    // console.log(oImg);//元素对象
    // alert(oSpan);
    // oSpan.innerHTML = "我是span";
    // console.log(oSpan);//元素对象

    // 追加
    // oDiv.appendChild(oSpan);


    // 创建元素对象
    // document.createElement("元素名称") 

    // 追加元素对象到父元素内部最后
    // 父节点对象.appendChild(子节点)

</script>

五、属性操作

<body>
    <ul id="box" a="10">
        <li>列表1</li>
        <li id="list">列表2</li>
        <li>列表3</li>
    </ul>
</body>
<script>
   var oUl = document.getElementById("box");
//   console.log(oUl.id);
//    console.log(oUl.a);//无法获取自定义的属性值
//    console.log(oUl.getAttribute("id")); 
//    console.log(oUl.getAttribute("a")); //可以获取自定义属性

// 设置
    // oUl.title = "hello"
    // oUl.b = 100;

    oUl.setAttribute("title","hello")
    oUl.setAttribute("b",100);
    // oUl.removeAttribute("a");
    oUl.removeAttribute("a");

//    节点对象.getAttribute("属性名") 根据属性名获取属性值
//    节点对象.setAttribute("属性名","属性值") 
//    节点对象.removeAttribute("属性名")   删除对应的这对属性
</script>