JavaScript的DOM文档操作总结

最新推荐文章于 2022-11-03 13:39:11 发布

原创最新推荐文章于 2022-11-03 13:39:11 发布 · 316 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css #dom #dom操作

本文深入解析DOM模型，讲解如何通过API获取、修改HTML元素，包括节点分类、节点操作、属性获取与修改，以及创建和删除元素的方法，是前端开发者必备技能指南。

DOM（文档对象模型）

DOM是针对HTML和XML文档的一个API（应用程序编程接口），DOM描绘了一个层次化的节点数，允许开发人员添加，移除，修改页面的某一部分。DOM是构造的对象树。

注：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

一、节点Node

：网页基本就是有节点构成的，每一部分都可称为节点。但是具体类型不大相同，可以分为

四类： 1、 Document （文档节点）：整个HTML文档

2、 Element（元素节点）：HTML文档中的HTML标签

3 、 Attribute（属性节点）：元素的属性

4、 Text（文本节点）：HTML标签中的文本内容

Document （文档节点）

：整个HTML文档，网页中所有的节点都是它的子节点。doucument对象作为window的对象存在，不用获取可直接使用，因此通过document查找文档的节点或创建节点。

1、获取节点：

方法	作用	参数	返回值
getElementById("")	通过元素的id获取元素节点	想要获取的元素id	找到的第一个元素，如果没有，返回null
getElementsByClassName ("app app1")	通过元素的class name 获取元素节点	为一个字符串表示元素的类名可以由空格隔开	HTMLCollection list 包含一个或多个元素，可以使用数组的操作方式去处理理结果
getElementsByTagName("")	通过元素的元素名（标签名）找到对应的元素	为一个字符串表示元素的元素名（标签名）	HTMLCollection list 包含一个或多个元素可以使用数组的操作方式去处理结果
getElementsByName("")	通过元素的name属性找到对应的元素	为一个字符串表示元素name	NodeList list 包含一个或多个元素可以使用数组的操作方式去处理结果
document.querySelector(“”“”)	通过CSS选择器选择一个元素。	为一个字符串CSS的选择器	找到的第一个元素，
document.querySelectorAll("")	通过CSS选择器选择多个元素。	为一个字符串CSS的选择器	找到的所有元素数组

案例：

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <div id="div1">
         <p class="p1"></p>
         <h1 name="h1"></h1>
         <button>按钮</button>
         <a href="http://baidu.com"></a>
         <font>hello world</font>
         <ul class="ul">
             <li></li>
             <li></li>
             <li></li>
         </ul>
     </div>
     <script>
         //通过id查找元素
         var div = document.getElementById("div1");
         console.log(div);
         //通过class查找元素
         var p = document.getElementsByClassName("p1");
         console.log(p);
        //  通过标签名选择
         var button = document.getElementsByTagName("button");
         console.log(button);
         //通过name查找元素（一般不用）
         var h1 = document.getElementsByName("h1");
         console.log(h1);
         //通过css选择器查找单个
         var a = document.querySelector("#div1 a");
         console.log(a);
         //通过css选择器查找多个
         var li = document.querySelectorAll(".ul li");
         console.log(li);
     </script>
 </body>
 </html>

2、查找节点

查找节点方法	作用
firstElementChild	某个节点的第一个孩子元素节点
lastElementChild	某个节点的最后一个孩子元素节点
nextElementSibling	某个节点的下一个兄弟元素节点
previousElementSibling	某个节点的上一个兄弟元素节点
childElementCount	该节点子元素的数量
textContent	该元素内部的text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="myDiv">
        <ul id="ul">
            <li id="li1">列表1</li>
            <li id="li2">列表2</li>
            <li id="li3">列表3</li>
            <li id="li4">列表4</li>
        </ul>
    </div>
    <script>
        var myDiv = document.getElementById("myDiv");
        var ul = document.getElementById("ul");
        //查找ul的第一个孩子节点
        console.log(ul.firstElementChild);
        console.log("--------------------------");
        //查找ul的最后一个孩子节点
        console.log(ul.lastElementChild);
        console.log("--------------------------");
        //查找li2的下一个兄弟元素节点
        var li2= document.getElementById("li2")
        console.log(li2.nextElementSibling);
        console.log("--------------------------");
        //查找li2的上一个兄弟元素节点
        console.log(li2.previousElementSibling);
        console.log("--------------------------");
        //ul节点下字节点数量
        console.log(ul.childElementCount);
        console.log("--------------------------");
        //该元素内部的text
        console.log(li2.textContent);        
    </script>
</body>
</html>

3、获取html的值得方法：

获取html的值得方法	作用
节点.innerText	获取html元素的text 内容
节点.innerHTML	获取html元素的html内容
节点.Attribute	获取HTML元素的属性值
节点.getAttribute(属性)	获取HTML元素的属性值
节点.style.样式	获取HTML元素的行内样式

实例，注意innerHTML与innerText的区别

getAttribute（）需要参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div" style="background-color: red;">
        <p id="p" >hello，world</p>
        <a id="a" href="http://baidu.com"></a>
    </div>

    <script>
        var div = document.getElementById("div");
        var p =document.getElementById("p");
        var a = document.getElementById("a")
       //获取HTML元素的Text内容
        console.log(div.innerText);
        console.log(p.innerText);
        //获取html元素的html内容
        console.log(div.innerHTML);
        console.log(p.innerHTML);
        //获取HTML元素的属性值
        console.log(a.href);
        //getAttribute获取HTML元素的属性值
        console.log(a.getAttribute("href"));
        //获取HTML元素的行内样式
        console.log(div.style.backgroundColor);
    </script>
</body>
</html>

4、改变HTML的方法

改变html的方法就是在获得html的基础上给它赋新的值，方法如下：

改变html的值得方法	作用
节点.innerText=new text	改变html元素的text 内容
节点.innerHTML=new html	改变html元素的html内容
节点.Attribute=new value	改变HTML元素的属性值
节点.setAttribute(属性，value）	改变HTML元素的属性值
节点.style.样式=new style	改变HTML元素的行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div" style="background-color: red;">
       div内容    
    </div>
         <div id="div2"></div>
        <a id="a1" href="http://baidu.com">百度1</a>
        <a id="a2" href="http://baidu.com">百度2</a>

    <script>
        var div = document.getElementById("div");
        var div2 = document.getElementById("div2");
        var a1 = document.getElementById("a1")
        var a2 = document.getElementById("a2")
       //改变HTML元素的Text内容  （1）
        console.log( div.innerText="我是新div内容");
        //改变html元素的html内容    （2）
        console.log(div2.innerHTML="<button>div按钮</button>");
        //改变HTML元素的属性值  （3）
        a1.href="http://123.sogou.com"
        console.log(a1);
        //setAttribute改变HTML元素的属性值  （4）
        a2.setAttribute("href","http://123.sogou.com")
        console.log(a2);
        //改变HTML元素的行内样式    （5）
        console.log(div.style.backgroundColor="pink");
    </script>
</body>
</html>

5、修改 HTML元素的方法介绍

方法	作用	参数	返回值
document.createElement(element)	创建新的HTML 元素节点。	创建元素的名称	返回创建的节点
document.createAttribute(attribute)	创建 HTML 属性节点。	要创建的属性名称。	创建的属性
document.createTextNode(text)	创建 HTML 文本节点。	文本节点的文本。	创建文本节点
元素节点.removeChild(element)	删除 HTML 元素。	要移除的节点对象。	成功返回被删除的节点，失败，返回 NULL。
元素节点.appendChild(element)	末尾添加新HTML元素	要添加的节点对象。	添加的节点
元素节点.replaceChild(newnode,oldnode)	替换HTML元素	newnode你要插入的节点对象。 oldnode你要移除的节点对象	替换的节点
元素节点.insertBefore(newnode,old node)	在指定的子节点前面插入新的子节点。	newnode要添加新的节点前的子节点 oldnode要添加新的节点前的子节点	插入的节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="myDiv">
        <div  id=div1>div1</div>
        <div id=div2>div2</div>
        <div id=div3>div3</div>
    </div>
    
</body>
<script>
    
    //创建一个p节点 document.createElement
    var node=document.createElement("p");
    //创建一个text节点 document.createTextNode
    var textNode=document.createTextNode("hello");
    //将text节点追加到p节点上 appendChild
    node.appendChild(textNode);
    //找到id为mydiv的节点
    var myDiv = document.getElementById("myDiv");
    //将刚刚创建的node节点追加为myDiv的子节点
    myDiv.appendChild(node);
    //删除第一个div1
    var  div1= document.getElementById("div1");
    myDiv.removeChild(div1);
    
    //替换最后一个div3（创建一个h1替换）
    var div3 = document.getElementById("div3");
    var h1=document.createElement("h1");
    h1.innerText="替换";
    myDiv.replaceChild(h1,div3);
    //创建一个h2插入到div2前面
    var h2 = document.createElement("h2");
    h2.innerText="插入";
    myDiv.insertBefore(h2,div2)
    console.log(myDiv);
</script>
</html>

5、 Comment类型
    注释方法
      createComment();
      作用：创建注释节点
      var cNode = document.createComment("这是一个注释");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <div id="div"></div>
  <script>
        var cNode = document.createComment("这是一个注释");
        var div =document.getElementById("div");
        div.appendChild(cNode);
        console.log(div.innerHTML);
  </script>
    
</body>
</html>