关于dom节点

最新推荐文章于 2024-03-30 16:26:30 发布

原创最新推荐文章于 2024-03-30 16:26:30 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #javascript

本文详细介绍了DOM中的节点类型，包括父节点、子节点和同胞节点的关系，以及如何通过nodeType属性获取节点类型。此外，还列举了DOM元素的方法，如创建、插入、替换和删除节点，以及属性的相关操作，包括getAttribute、setAttribute和removeAttribute。最后讨论了cloneNode和removeChild的功能及其用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明：

父节点、子节点和同胞节点

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）

每个节点都有父节点、除了根（它没有父节点）

一个节点可拥有任意数量的子

同胞是拥有相同父节点的节点

注:为保证兼容性,书写html的时候必须写成一行

1、 nodeType属性

nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有：

如:

Var div=document.getElementById(“div”);

div.nodeType 节点的类型

div.nodeName /div.tagName 节点的名字

*div.firstchild.nodeValue* 先获取节点的子节点后再求值（文本）

div.parentNode.nodeType/nodeName/nodeValue 父节点的……

div.childNodes[0].nodeType/nodeName/nodeValue 第一个子节点的……

div. firstChild. nodeType/nodeName/nodeValue 第一个节点的……

div.lastChild.nodeType/nodeName/nodeValue 最后一个子节点的……

div. nextSibling. nodeType/nodeName/nodeValue 下一个节点的……

div. previousSibling. nodeType/nodeName/nodeValue 上一个节点的……

div.childNodes.length 子节点的个数

hasChildNodes() 判断父节点是否有子节点

tagName = nodeName [标签名/节点名]

</script>

Nodevalue注意事项

var div=document.getElementById("div");

alert(div.firstChild.firstChild.nodeValue);

2、dom元素方法列表

1、创建节点：

使用createElement创建元素节点，

使用createTextNode创建文本节点

document.body指向的是<body>元素

document.documentElement则指向<html>元素

如document.p[0]

如:

var createNode = document.createElement("div");

var createTextNode = document.createTextNode("hello world");

createNode.appendChild(createTextNode);

document.body.appendChild(createNode);

或document.documentElement.appendChild(createNode);

2、插入节点：

可以使用appendChild，insertBefore，

insertBefore接收两个参数，第一个是插入的节点，第二个是参照节点，如parentDOM.insertBefore(a,b)，则a会插入在b的前面

//插入节点

var newNode= document.createElement("div");

var TextNode = document.createTextNode("hello world");

newNode.appendChild(TextNode);

var div1 = document.getElementById("div1"); //div1为参照节点

document.body.insertBefore(newNode,div1);

parentNode.insertBefore(newNode,oldNode)

3、替换和删除元素，

从replaceChild和removeChild的字面意思看，就是删除子节点，因此调用者，需要包含子节点div1，不然调用会报错。返回的节点是替换的或删除的元素，被替换/删除的元素仍然存在，但document中已经没有他们的位置了。

//替换元素

parentDOM.replaceChild(newNode,oldNode);

//删除元素

parentDOM.removeChild(div1);

4、属性相关操作

4-1 getAttribute获取属性

如: nodeDOM. getAttribute(“属性”);

4-2 setAttribute设置属性

如: nodeDOM. setAttribute (“属性”,”属性值”);

4-2 creatAttribute建立属性

如:

Var parentDOM=document.getElementById(“parent”); //1获取元素节点

var oAttr=document.createAttribute("class"); //2 建立属性节点--class

oAttr.value="red"; // 3 属性赋值

parentDOM.setAttributeNode(oAttr); // 4 将属性节点插入至元素节点

4-3 删除属性removeAttribute

parentDom.removeAttribute(“属性”) //删除属性的同时删除属性值

3、cloneNode克隆

Var oldNode=document.getElementById(“old”);

Var newNode=oldNode.cloneNode(true);

newNode.setAttribute(“属性”, “属性值”);

var parentNode=document.getElementById(“parent”);

parentNode.appendChild(newNode)

4、removeChild删除节点

node.removeChild(child)：从DOM中删除一个子节点，返回删除的节点

<body>

        <button id="button">删除</button>

         <ul class="ul">

          <li>1</li>

          <li>2</li>

          <li>3</li>

          </ul>

          <script>

          //1 获取对象

          var btn = document.getElementById("button");

          var ul = document.getElementById("ul");

          //写事件处理程序

          btn.onclick = function(){

          if(ul.children.length == 0){

          this.disabled = true;

          }else{

          ul.removeChild(ul.children[0]);

          }

          }

          </script>

</body>