html基本操作总结,站在巨人的肩膀上总结JavaScript之DOM基本操作

原标题：站在巨人的肩膀上总结JavaScript之DOM基本操作

9.1 获取节点

document

getElementById 语法 document.getElementById(元素ID) ；

功能 通过元素ID获取节点；

getElementsByName

语法 document.getElementsByName (元素name属性) ；

功能 通过元素name属性获取节点；

getElementsByTagName

语法 document.getElementsByTagName(元素标签) ；

功能 通过元素标签获取节点；

节点指针

firstChild 语法 父节点.firstChild；

功能 获取元素的首个子节点；

lastChild 语法 父节点.lastChild；

功能 获取元素的最后一个子节点；

childNodes 语法 父节点.childNodes；

功能 获取元素的子节点列表；

previousSibling

语法 兄弟节点.previousSibling；

功能 获取已知节点的前一个节点；

nextSibling

语法 兄弟节点.nextSibling；

功能 获取已知节点的后一个节点；

parentNode

语法 子节点.parentNode；

功能 获取已知节点的父节点；

9.2 节点操作

创建节点

语法 document.(元素标签)；

功能 创建元素节点；

createAttribute

语法 document.createAttribute(元素属性)；

功能 创建属性节点；

createTextNode

语法 document.createTextNode(文本内容)；

功能 创建文本节点；

插入节点

语法 (所添加的新节点)；

功能 向节点的子节点列表的末尾添加新的子节点；

insertBefore

语法 insertBefore(所要添加的新节点，已知子节点)；

功能 在已知的子节点前插入一个新的子节点；

替换节点

replaceChild

语法 replaceChild(要插入的新元素，将被替换的老元素)；

功能 将某个子节点替换为另一个；

复制节点

cloneNode

语法 需要被复制的节点.cloneNode(true/false)；

功能 创建指定结点的副本；

替换节点

replaceChild

语法 replaceChild(要插入的新元素，将被替换的老元素)；

功能 将某个子节点替换为另一个；

复制节点

cloneNode

语法 需要被复制的节点.cloneNode(true/false)；

功能 创建指定结点的副本；

9.3 HTML DOM 树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

9.4 示例代码

Hello World!

The DOM is very useful.

本例演示 getElementsByTagName 方法。

var x=document.getElementById("main");

var y=x.getElementsByTagName("p");

document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);

查看结果:

Hello World!

The DOM is very useful.

本例演示 getElementsByTagName 方法。

id 为 "main" 的 div 中的第一段文本是：The DOM is very useful.返回搜狐，查看更多

责任编辑：