DOM基本操作（获取元素、节点的创建和添加、节点的替换和删除）

最新推荐文章于 2024-05-14 20:58:30 发布
最新推荐文章于 2024-05-14 20:58:30 发布
阅读量2.5k 收藏 10
点赞数
分类专栏： JavaScript 文章标签： DOM基本操作（获取元素、节点的创建和添加、节点的替换和删除）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44607694/article/details/94728428
版权

获取元素

document.getElementById通过id名字获取节点

 <div id="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>

var oBox = document.getElementById("box");
        console.log(oBox);

在这里插入图片描述
document.getElementsByClassName通过class名字获取节点 获取的是一个数组

    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>

var oBox = document.getElementsByClassName("box");
        console.log(oBox);

在这里插入图片描述
在HTML与CSS里.class类名是可以重复使用的，在页面上可能出现多个重复的.class类名，他是获取到多个把获取到多个放在数组里

返回结果是一个数组我们需要的是里面的值，那么如何拿到呢？？？

 var oBox = document.getElementsByClassName("box")[0]
 //通过下标来换取索引0的值也可以获取别的索引值
        console.log(oBox);

在这里插入图片描述
document.getElementsByTagName 通过标签名字获取节点 获取的是一个数组

<div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <div class="box"></div>
    <div></div>

var aBox = document.getElementsByTagName("div");
        console.log(aBox)

在这里插入图片描述
那么如何获取数组里面的值呢？？？

var aBox = document.getElementsByTagName("div")[2];//通过下标来换取索引2的值
        console.log(aBox);

在这里插入图片描述
document.querySelectorAll 通过复合（层级）选择器获取节点 获取的是一个数组

 <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>

 var  aLi = document.querySelectorAll(".box ul li");
        console.log(oBox);

在这里插入图片描述
那么如何获取数组里面的值呢？？？

 var aLi  = document.querySelectorAll(".box ul li")[1];
        console.log(aLi );

在这里插入图片描述
document.querySelector 通过复合（层级）选择器获取符合条件的第一个节点

    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>

var oLi = document.querySelector(".box ul li");
        console.log(oLi);

在这里插入图片描述
document.getElementsByName 通过name属性获取节点 获取的是一个数组

<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女

 var aInput = document.getElementsByName("sex");
        console.log(aInput);

在这里插入图片描述
获取特殊元素的方式

  • document.head 获取head标签
  • document.body 获取body标签
  • document.documentElement 获取html标签
		  console.log(document.head);
          console.log(document.body);
          console.log(document.documentElement);

在这里插入图片描述
document只对head，body，documentElement提供了开发接口其余都没有提供

节点的创建和添加（创建完一定要添加）

节点的创建

document.createElement 创建元素节点

 var oDiv = document.createElement("div");
        console.log(oDiv);

在这里插入图片描述
如何把这个属性节点添加到DOM树中

 <div id="box">
        <span>我是haven</span>
    </div>

  var oBox = document.getElementById("box");
        var oDiv = document.createElement("div");
        oBox.appendChild(oDiv);

在这里插入图片描述
document.createTextNode 创建文本节点

var oText = document.createTextNode("heaven")
        console.log(oText);

在这里插入图片描述
如何把这个文本节点添加到DOM树中

 <div id="box">
        <span>我是haven</span>
    </div>

 var oBox = document.getElementById("box");
        var oText = document.createTextNode("heaven");
        oBox.appendChild(oText);

在这里插入图片描述
document.createComment 创建注释节点

var oComment = document.createComment("我是注释节点");
        console.log(oComment);

在这里插入图片描述
如何把这个注释节点添加到DOM树中

<div id="box">
        <span>我是haven</span>
    </div>

 var obox = document.getElementById("box");
        var oComment = document.createComment("我是注释节点");
        obox.appendChild(oComment);

在这里插入图片描述
document.createDocumentFragment 创建文档片段节点

   var fragment = document.createDocumentFragment();
        console.log(fragment);

在这里插入图片描述

节点的添加、剪切操作

parentNode.appendChild(子节点) 把子节点插入到父节点的最后面

 <div id="box">
        <span>我是haven</span>
    </div>

  var oBox = document.getElementById("box");
        var oDiv = document.createElement("div");
        oBox.appendChild(oDiv);//把oDiv插入到oBox的最后面是以字符串形式添加的

在这里插入图片描述

parentNode.insertBefore(A,B) 把节点A添加到节点B之前

    <div id="box">
        <h2>我是标题</h2>
        <span>我是haven</span>
    </div>

     var oBox = document.getElementById("box");
       var oSpan = document.getElementsByTagName("span")[0];
       var oDiv = document.createElement("div");
       oBox.insertBefore(oDiv,oSpan);

在这里插入图片描述
如何把现有标签添加到，另一个现有标签之前

 <div id="box">
        <h2>我是标题2</h2>
        <h3>我是标题3</h3>
        <span>我是haven</span>
    </div>

var oBox = document.getElementById("box");
        var oSpan = document.getElementsByTagName("span")[0];
        var oH3 = document.getElementsByTagName("h3") [0];
        oBox.insertBefore(oSpan,oH3);

在这里插入图片描述
那么用appendChild方法来可以实现吗？？

  <div id="box">
        <h2>我是标题2</h2>
        <h3>我是标题3</h3>
        <span>我是haven</span>
    </div>

   var oBox = document.getElementById("box");
        var oSpan = document.getElementsByTagName("span")[0];
        var oH3 = document.getElementsByTagName("h3") [0];
        oBox.appendChild(oH3);

在这里插入图片描述
结论：无论是appendChild方法还是insertBefore方法都可以对节点的 添加、剪切操作，都可以操作一次不能操作多次

节点的替换和删除

节点的替换 、 剪切操作（只能一换一操作不能一换多个节点操作）

节点的替换 parentNode.replaceChild(A,B) 用节点A替换节点B

 <div id="box">
        <h2>我是标题2</h2>
        <span>我是heaven</span>
        <h3>我是标题3</h3>
    </div>

var oBox = document.getElementById("box");
        var oH3 = document.getElementsByTagName("h3")[0]
        var oDiv = document.createElement("div");
        oBox.replaceChild(oDiv,oH3);

在这里插入图片描述
剪切操作 parentNode.replaceChild(A,B) 用节点A替换节点B

 <div id="box">
        <h2>我是标题2</h2>
        <span>我是heaven</span>
        <h3>我是标题3</h3>
    </div>

 var oSpan = document.getElementsByTagName("span")[0];
        var oBox = document.getElementById("box");
        var oH3 = document.getElementsByTagName("h3")[0]
        oBox.replaceChild(oSpan,oH3);

在这里插入图片描述

节点的删除 、删除子节点 parentNode.removeChild(子节点)

 <div id="box">
        <h2>我是标题2</h2>
        <span>我是heaven</span>
        <h3>我是标题3</h3>
    </div>

var oBox = document.getElementById("box");
        var oH3 = document.getElementsByTagName("h3");
        oBox.removeChild(oH3[0]);

在这里插入图片描述

动态获取与静态获取

get系列获取元素的方式是动态获取

动态获取指的是：在获取节点之后还可以检测出符合条件的节点、并放置到集合中

    <div id="box">
        <h3>1</h3>
        <h3>2</h3>
        <h3>3</h3>
    </div>

 var oBox = document.getElementById("box");
        var oH3 = document.getElementsByTagName("h3");
        var h3 = document.createElement("h3");
        oBox.appendChild(h3);
        console.log(oH3);

在这里插入图片描述在这里插入图片描述
动态获取的方式是能再次感知到用js的方法添加新的标签的

query系列获取元素的方式是静态态获取

静态获取指的是：在获取节点之后无法检测出符合条件的节点、不能放置到集合中

<div id="box">
        <h3>1</h3>
        <h3>2</h3>
        <h3>3</h3>
    </div>

 var oBox = document.getElementById("box");
        var oH3 = document.querySelectorAll("h3");
        var h3 = document.createElement("h3");
        oBox.appendChild(h3);
        console.log(oH3);

在这里插入图片描述在这里插入图片描述
静态获取的方式是不能能再次感知到用js的方法添加新的标签的
在这里插入图片描述

如何在创建空节点的时候添加内容

元素节点.innerText 可以设置节点的文本内容、也可以读取节点的内容、不可以解析标签

<div id="box">
        <h3>1</h3>
        <h3>2</h3>
        <h3>3</h3>
    </div>

 var oBox = document.getElementById("box");
        var oH3 = document.createElement("h3");
        oBox.appendChild(oH3);
        oH3.innerText = "我是h3节点";//创建h3标签添加文本内容

在这里插入图片描述在这里插入图片描述
那么如何读取元素节点的内容呢？？

 var oBox = document.getElementById("box");
        var oH3 = document.querySelectorAll("h3");
        oH3.innerText = "我是新增节点H3";
        console.log(oH3[2].innerText);//读取节点的文本内容

在这里插入图片描述
修改并赋值innerText

 var oBox = document.getElementById("box");
        var oH3 = document.querySelectorAll("h3");
        oH3[0].innerText = "我是修改并赋值的节点";

在这里插入图片描述
元素节点.innerHTML、可以设置节点的文本内容、也可以读取节点的内容、可以解析标签

怎么样innerHTML方法解析字符串中的标签

  var oBox = document.getElementById("box");
        var oH3 = document.querySelectorAll("h3");
        oH3[0].innerHTML = "<a>我是修改后的文本节点的内容</a>"

在这里插入图片描述
打印的结果是用innerHTML替换的结果

var oBox = document.getElementById("box");
        var oH3 = document.querySelectorAll("h3");
        oH3[0].innerHTML = "<a>我是修改后的文本节点的内容</a>";
        console.log(oH3[0].innerHTML);

在这里插入图片描述

元素节点的常用方法

<div id="box">
        <h3 class="no">测试标题</h3>
    </div>

如何拿到h3标签的属性集合

 var oBox = document.getElementById("box");
        console.log(oBox.children[0].attributes);

在这里插入图片描述
元素节点.setAttribute(属性节点名,属性节点值)、设置指定的属性节点

<div id="box">
        <h3 class="no">测试标题</h3>
    </div>

  var oBox = document.getElementById("box");
         oBox.children[0].setAttribute("id", "title")

在这里插入图片描述
元素节点.getAttribute(属性节点名)、获取指定属性节点名称的值

var oBox = document.getElementById("box");
         console.log(oBox.children[0].getAttribute("class"));

在这里插入图片描述
元素节点.removeAttribute(属性节点名)、删除指定属性节点

<div id="box">
        <h3 class="no">测试标题</h3>
    </div>

 var oBox = document.getElementById("box");
         oBox.children[0].removeAttribute("class");

在这里插入图片描述
元素节点.hasChildNodes、判断元素节点有没有子节点

var oBox = document.getElementById("box");
    console.log(oBox.children[0].hasChildNodes());

在这里插入图片描述

  • 如果有则返回返回结果是true
  • 如果没有则返回结果是是false
巧克力很苦
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM创建元素节点.获取节点
weixin_66171880的博客
02-02 1931
1.每点击一下去创建一个节点元素：案例如下 <div id="wrap"></div> <script> let oWrap = document.querySelector("#wrap"); // 每在页面上点1下，都在wrap内生成一个 div，每个div的背景色都是随机的 // wrap里每个div节点，都能绑定1个点击事件，点击时，可以打印自身 document.documentElem..
DOM-添加元素、节点
weixin_30271335的博客
03-27 219
createElement()方法能够根据参数指定的标签名称创建一个新元素，并返回新建元素的引用，用法如下 var element=document.createElement("tagName"); 其中element表示新建元素的引用，createElement()是document对象的一个方法，该方法只有一个参数，用来指定创建元素的标签名称。 <!DOCTYPE html&...
DOM操作---删除元素，删除指定的元素，循环删除元素
最新发布
I_am_shy的博客
05-14 376
remove()方法可以删除自身节点，要注意一个元素被删除时，它的子元素也会跟着全部删除removeChild ()方法可以删除指定的子元素。
关于js_document对象中的获取元素，创建元素的方法
qq_55961861的博客
08-12 2052
关于js_document对象中的获取元素，创建元素的方法！
添加新的元素节点
哈哈
05-08 267
<!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>Doc
html5元素节点怎么创建,创建元素节点createElement
weixin_39869733的博客
07-01 843
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。语法：document.createElement(tagName)参数:tagName：字符串值，这个字符串用来指明创建元素的类型。注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。我们来创建一个按钮，代码如下：var body = document.b...
html dom节点操作(获取/修改/添加或删除)
09-04
了解这些基本操作后，开发者可以灵活地控制网页的动态交互，实现诸如添加新内容、更新现有元素、删除不需要的部分以及调整元素布局等功能。在实际应用中，DOM节点操作是构建交互式网页和Web应用程序的关键技术之一。...
示例6：删除和替换节点.rar_删除和替换节点
09-20
删除和替换节点是DOM操作中的基本操作，它们允许我们动态地更新页面内容。本示例将深入探讨如何使用JavaScript实现这两个功能。 一、删除节点 1. `removeChild()` 方法：此方法接受一个子节点作为参数，然后将其从...
JavaScript HTML DOM元素 节点操作汇总
10-16
本文将深入探讨DOM中的节点操作，包括添加、删除、替换和查找节点等基本操作。 首先，理解DOM的基本概念至关重要。DOM（Document Object Model）是一种标准，它将HTML或XML文档表示为一个树形结构，其中每个部分都...
JavaScript 节点操作 以及DOMDocument属性和方法
10-30
7. `removeChild`和`replaceChild`: 分别用于删除和替换子节点。 8. `loadXML`和`load`：加载XML数据到文档中。 9. `save`: 保存XML文件到指定位置。 此外，XMLHTTP对象在AJAX（异步JavaScript和XML）中扮演重要...
基本DOM节点操作
08-31
1. **获取元素节点** - `getElementById()`：这是最直接的方法，通过元素的唯一ID来获取指定元素。例如，`document.getElementById('myElement')`会返回ID为'myElement'的元素。 - `getElementsByTagName()`：返回...
dom的获取元素和节点方法
weixin_44595744的博客
12-10 255
DOM(document object model) DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象，用来操作html和xml功能的一类对象的集合。也有人认为DOM是对HTML以及XML的标准编程接口。
document节点创建页面元素
不甜呐的博客
05-21 3309
1.createElement()方法 描述：本方法用来在内存中创建一个页面元素 语法：var 变量名 = document.createElement("标签名"); 注意：本方法创建的页面元素并不会直接显示在页面中，而是默认存在于内存中 兼容性：五大主流浏览器都支持 2.createTextNode()方法 描述：本方法可创建文本节点 语法：var 变量名 = document.createTextNode(text); 兼容性：五大主流浏览器都...
获取、创建、添加页面元素
kwroi的博客
11-15 2026
Web APIs 获取页面元素及创建、添加页面元素的方法
DOM之元素的 创建+添加+删除+克隆
weixin_47075145的博客
07-18 2561
方式2利用innerHTML创建元素（不推荐用）innerHTML属性值不运行时，当作字符串，运行时当作js代码。
JavaScript之DOM编程（获取节点、删除节点、操作标签文本、操作节点属性、操作节点样式）
python全栈
01-26 668
一、获取节点 element1=window.document.getElementById("d1") <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript">
html对象添加子元素,Dom节点对象操作方法 ，用document创建节点对象，追加节点，追加内容以及增加，删除，复制...
weixin_36315943的博客
06-25 3538
节点的创建追加创建新节点document.createElement(‘节点名’);追加子节点appendChild把节点对象加到body中document.body.appendChild()var tab = document.createElement('table');//创建节点对象tabletab.innerHTML='hello world';//为节点对象添加内容document....
JS DOM 编程复习笔记--创建元素、插入元素（四）
小帅的编程笔记
10-20 667
今天我们来学习使用JS来动态创建DOM元素并插入的已有的HTML中。 要创建一个HTML元素，使用 document.createElement() 方法。 let element = document.createElement(htmlTag); document.createElement() 方法接受一个HTML标签名称并返回Element 类型的新节点。 1) 创建一个div元素 我们先来搞一个空的HTML文档 <!DOCTYPE html> <html> <hea
DOM操作：
m0_52558788的博客
04-12 2184
document object model（文档对象模型） 作用：动态操作html元素节点（写特效） 操作html元素节点（element）： 节点的样式操作： 增 删 改 查： 获取当前需要操作的元素节点： Dom tree（dom树）：root element（html） document（当前文档的根节点) document.getElementById():通过id 属性获取元素 document.getElementByClassName//通过class属性，
DOM怎样添加、移除、移动、复制、创建和查找节点
06-08
DOM提供了一系列的API用于添加、移除、移动、复制、创建和查找节点，具体如下： 1. 添加节点：使用appendChild()方法在父节点下添加一个新的子节点，或者使用insertBefore()方法在指定位置插入一个新的子节点。 2. 移除节点：使用removeChild()方法删除指定节点，或者使用replaceChild()方法替换指定节点。 3. 移动节点：使用appendChild()方法将节点从一个父节点移动到另一个父节点下。 4. 复制节点：使用cloneNode()方法复制指定节点，可以选择是否复制子节点。 5. 创建节点：使用createElement()方法创建一个新的元素节点，或者使用createTextNode()方法创建一个新的文本节点。 6. 查找节点：使用getElementById()方法根据节点ID查找节点，或者使用getElementsByTagName()方法根据标签名查找节点，也可以使用querySelector()方法根据CSS选择器查找节点。 需要注意的是，添加、移除、移动、复制、创建和查找节点的操作都是基于DOM树的结构，因此需要先获取到要操作的节点，然后再进行相应的操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值