36-JavaScript-DOM-dom编程初解

来源：互联网发布：python集成开发环境编辑：程序博客网时间：2024/04/29 15:18

1. Node 对象

Node 对象是整个 DOM 的主要数据类型。
节点对象代表文档树中的一个单独的节点。
节点可以是元素节点、属性节点、文本节点.

参考: http://www.w3school.com.cn/xmldom/dom_node.asp
参考DHTML: DHTML网页制作完全手册_.chm

2. 常用属性

① nodeName String 节点名称

② nodeValue String 节点值

③ nodeType Number 节点类型

参考: http://www.w3school.com.cn/xmldom/dom_nodetype.asp

④ firstChild Node

⑤ lastChild Node

⑥ childNodes NodeList

⑦ previousSibling Node 前一个兄弟节点

⑧ nextSibling Node 后一个兄弟节点

⑨ ownerDocument Document

⑩ 其他
A) textContent 设置或返回节点及其后代的文本内容。(火狐)
B) text 返回节点及其后代的文本（IE 独有的属性）。
C) attributes Map 该节点属性集对象 (Element)

示例:

<html><head>    <meta http-equiv="content-type" content="text/html;charset=utf-8"/><script type="text/javascript">var ground;function showDivInfo() {    ground = $("ground");    // console.info(ground);    console.info( ground.nodeName );    // DIV    console.info( ground.nodeType );    // 1    console.info( ground.nodeValue );   // null    console.info( ground.textContent );}function showChildren() {    ground = $("ground");    var children = ground.childNodes;        console.info( children );    console.info( children.length );    // 遍历子节点    for(var i = 0; i < children.length; i++ ) {        console.info( "nodeName: " + children[i].nodeName                  + "   nodeType: " + children[i].nodeType                   + "   nodeValue: " + children[i].nodeValue);    }/*    nodeName: #text   nodeType: 3   nodeValue: ("\n ")    nodeName: DIV     nodeType: 1   nodeValue: null    nodeName: #text   nodeType: 3   nodeValue: ("\n ")    nodeName: DIV     nodeType: 1   nodeValue: null    nodeName: #text   nodeType: 3   nodeValue: ("\n ")*/}function $(id) {    return document.getElementById(id);}    </script>    <style type="text/css"> div {    border: 1px solid black;    background-color: gray;    margin: 2px;    padding: 5px;    width: 400px; }     #ground {    width: 500px; }</style></head><body>        <div id="ground">        <div id="rabbit">a rabbit is eating carrots! </div>        <div id="dog">a dog is eating bones !</div>    </div>        <button onclick="showDivInfo()">ground div 's base info</button> <br/>    <button onclick="showChildren()">ground div 's children</button> <br/></body></html>

3. 常用方法

① hasChildNodes() Boolean

判断当前节点是否拥有子节点。

② appendChild(newchild) Node

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

③ removeChild(node) Node

删除（并返回）当前节点的指定子节点

④ replaceChild(new_node,old_node) Node

将某个子节点替换为另一个

⑤ insertBefore(newchild,refchild) Node

已有的子节点前插入一个新的子节点