js——DOM节点

prtyaa 2023-12-26 19:05:17  67355

分类专栏：资讯

```
<div id="box">div 1</div>
    <div id="demo">
        <p>paragraph1</p>
        <p>paragraph2</p>
        <p>paragraph3</p>
        <div class="inner">
            <p>inner p</p>
        </div> 
    </div>
```
一、生成一个新的元素对象
```
//生成一个新的元素对象
var newNode = document.createElement("div");
//给新的div内部添加文字
document.innerHTML("新的 div");
//给body添加一个新的节点子元素
document.body.appentChild(newNode);
```
二、移出元素
```
//获取元素
var box=document.getElementById("box");
document.body.removeChild(box);
```
三、获取子元素
```
var demo = document.getElementById("demo");
var child = demo.children;
console.log(child);
```
四、节点属性

1、获取元素节点

document.getElementById("box");

2、获取属性节点

box.getAttributeNode("id");

3、获取文本节点

box.childNodes;

五、父节点属性

1、获取子节点：

比较常用的我用加粗标记出来了～

childNodes 获取的是所有类型的子节点包括空格
children 获取的是所有元素类型的子节点
firstChild 获取的是所有类型的子节点的第一个
lastChild 获取的是所有类型的子节点的最后一个
firstElementChild 获取的是所有元素类型的子节点的第一个
lastElementChild 获取的是所有元素类型的子节点的最后一个

2、获取父级

parentNode
parentElement

3、获取兄弟节点

previousSibling 获取上一个同级的节点（包括空格）；
nextSibling 获取下一个同级的节点（包括空格）；
//有兼容问题，IE9以下不可用
previousElementSibling 获取上一个同级的元素节点；
nextElementSibling 获取下一个同级的元素节点；

六、创建新节点方法

一般将创建的节点存在变量中，方便使用。

1、创建元素节点

document.createElement("div");

2、创建属性节点

document.createAttribute("id");

3、创建文本节点

document.createTextNode("hello");

七、节点常用操作

1、将一个节点添加到指定父节点的子节点列表末尾

parentNode.appendChild(child);

2、用指定节点替换当前节点的一个子节点

parentNode.replaceChild(newChild,oldChild);

3、在某个指定子节点前添加新的子节点

parentNode.insertBefore(newNode,referenceNode);

4、移除节点

parentNode.removeChild(child);

八、克隆节点

注意：浅度克隆只克隆它本身，而深度克隆是该节点下面的后代节点都会被克隆。

//浅度克隆
cloneNode(false);
//深度克隆
cloneNode(true);

九、节点判断方法

//有的话返回true（包括空格），否则返回flase
//表示该元素是否包含有子节点
Node.haschildNodes();
//表示传入的节点是否为该节点的后代节点
Node.contains(child)
还有以下方法也可以进行判断是否有子节点
Node.firstChild() !== null;
Node.childNodes.length > 0;

注意：判断节点跟判断元素节点是不一样的。判断元素节点需要在中间加上Element，childNodes改为children。

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=31085

赞同 0

评论 0 条

js——DOM节点

一、生成一个新的元素对象

二、移出元素

三、获取子元素

四、节点属性

五、父节点属性

六、创建新节点方法

七、节点常用操作

八、克隆节点

九、节点判断方法

相关文章

关注我们