前言:
今天看官们对“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时,浅复制,只复制节点本身;