节点操作

105 阅读2分钟

查找节点:

查找父级:子元素.parentNode;查找最近的父级元素,返回是dom元素

查找子级: 父元素.children;是一个伪数组,可以使用遍历,不能使用forEach

兄弟级:

nextElementSibling下一个兄弟元素

previousElementSibling上一个兄弟元素

补充:

1.查找返回的都是dom对象

2.找不到返回为null

\

增加节点:

创建新节点:

let result = document.createElement(标签名称)

注意:

创建元素之后,还需要对元素设置内容和样式

内容设置:innerText innerHTML

属性设置: 元素.属性

\

追加节点:

parent.appendChild(child)

将child的元素添加到parent元素里面去(最后面)

append:追加,都是在最后面追加

\

parent.insertBofore(child, refChild)

将child元素添加到refChild的前面去;ref:相对引用参照

如果refChild元素获取不到, 会默认以appendChild形式添加

一定要传递第二个参数,否则报错

补充:

1.第二个参数可以使用查子级方法children[0]

2.追加的节点可以是新创建的 也可以是页面上已经存在 (移动)

\

克隆节点:

模板元素.cloneNode(布尔值)

false: 浅拷贝---只拷贝元素结构

true: 深拷贝---拷贝元素结构及内容

补充:

1.用于需要创建一个复杂的标签

2.前提: 页面上有一个模板节点

\

删除节点:

parent.removeChild(child):通过父元素删除直接子元素(parent是父元素,child是要删除的元素)

element.remove():删除元素本身

\

节点操作补充:

节点操作:

节点:页面中的内容都是节点,像元素,属性,文本内容,注释。。

元素节点:就是指标签元素,像p span div a img .....

属性,文本内容:之前学习过了。 innerHTML,innerText dom对象.属性

注释:但是我们也不用处理它

操作:

增加:创建元素,再实现增加:追加到最后,插入到最前面

删除:通过父删除子,删除元素本身

修改:没有

查询(获取):以前只是相对于文档获取元素:根文档查找子元素,后代元素。