龙空技术网

什么是文档对象模型DOM?获取和删除节点的方法有哪些?

代码开发 196

前言:

今天看官们对“html节点树”可能比较关切,小伙伴们都需要学习一些“html节点树”的相关资讯。那么小编在网络上汇集了一些对于“html节点树””的相关知识,希望同学们能喜欢,看官们快快来学习一下吧!

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树).

将HTML代码分解为DOM节点层次图:

HTML文档可以说由节点构成的集合,DOM节点有:

1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。

2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性,如<a>标签的链接属性href=""。

一. 获取节点的方法

1. 顶层API

documment.getElementById() 返回一个元素;

document.getElementsByName() 返回一个dom数组,具有相同name值的;

domdocument.getElementsByTagName() 返回一个dom数组,具有相同的标签名;

2. 通过父节点获取

parent.firstChild;

parent.lastChild;

parent.childNodes;

parent.children;

parent.getElementsByTagName;

3. 通过子节点获取childNode.parentNode;

4. 通过临近节点获取;

neighbour.previousSibling;

neighbour.nextSibling;

二. 插入节点的方法

appendChild()

insertBefore();

三. 删除节点的方法

replaceChild(替换节点, 被替换的节点)

removeChild(被移除的节点)

四. 复制节点

cloneNode(bool)bool为true时,深复制,复制节点以及节点的所有子节点;

bool为false时,浅复制,只复制节点本身;

标签: #html节点树 #删除html节点