javascript操作DOM的方法与属性

时间:2021-08-07 15:59:25

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

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

javascript操作DOM的方法与属性

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

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

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

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

节点属性:

属性 说明
nodeName   节点的名称
nodeType    节点的类型
nodeValue   节点的当前值

点击查看详细

遍历节点树:

属性 说明
childNodes 所有子节点
firstChild 第一个子节点
lastChild 最后一个子节点
parentNode 父节点
nextSibling 下一个节点(同一层级中)
previousSibling 上一个节点(同一层级中)

DOM操作:

属性 说明
creteElement(element) 创建一个新的元素节点
createTextNode() 创建一个新的文本节点
appendChild(newnode) 在元素最后添加一个新的子节点
insertBefore(newnode,node) 在已有子节点之前插入新的子节点
removeChild(node) 从元素子节点中删除给定的节点
replaceChild(newnode,oldnew) 替换指定的子节点

注意:前两个是document的方法。