DOM知识结构

一、编程接口：

 

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

方法是您能够执行的动作（比如添加或修改元素）。

属性是您能够获取或设置的值（比如节点的名称或内容）。

 

二、节点类型：

1. 文档类节点

2. 元素类节点

3. 属性类节点

4. 文本类节点

5. 注释节点

 

三、节点要素：

1、nodeType：返回节点的类型。nodeType 是只读的。

比较重要的节点类型有：

元素类型NodeType

元素1

属性2

文本3

注释8

文档9

 

2、nodeName：是只读的

元素节点的 nodeName 与标签名相同

属性节点的 nodeName 与属性名相同

文本节点的 nodeName 始终是 #text

文档节点的 nodeName 始终是 #document

注释：nodeName 始终包含 HTML 元素的大写字母标签名。

 

3、nodeValue：属性规定节点的值。

元素节点的 nodeValue 是 undefined 或 null

文本节点的 nodeValue 是文本本身

属性节点的 nodeValue 是属性值

 

四、元素之间的关系：

1. parentNode：

2. childNodes：

3. nextSibling：

4. previousSibling：

5. firstChild：

6. lastChild：

 

五、操作DOM

l 添加/删除/修改/获取 Document类型

l 添加/删除/修改/获取 Element类型

l 添加/删除/修改/获取 CSS 样式

l 添加/删除/修改/获取 Text类型

l 添加/删除/修改/获取 HTML 属性

l 改变事件（处理程序）

 

1、添加/删除/修改/获取 Document类型

1）文档的子节点

Html：document.documentElement;

Body:document.body;

 

2)文档信息

Title：document.title;

URL:document.URL;

Domain:document.domain;

 

3)特殊集合

文档中所有的<form>元素：document.forms;

文档中所有的<img>元素：document.images;

文档中所有带href特性的<a>元素：document.links;

 

2、添加/删除/修改/获取 Element类型

1) 获取 HTML 元素：

ü getElementById()

ü getElementsByName()

ü getElementsByTagName()：返回带有指定标签名的所有元素

ü getElementsByClassName()：Internet Explorer 5,6,7,8 中无效。

 

document.getElementById("main").getElementsByTagName("p");

返回包含文档中所有 <p> 元素的列表，并且这些 <p> 元素应该是 id="main" 的元素的后代（子、孙等等）

 

2） 创建HTML 元素：

createElement()：创建元素节点。

<div id="div1">

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

 

<script>

var para=document.createElement("p");

var node=document.createTextNode("This is new.");

para.appendChild(node);

 

var element=document.getElementById("div1");

element.appendChild(para);

</script>

 

3） 添加HTML元素：

appendChild() ：将新元素作为父元素的最后一个子元素进行添加。

insertBefore() ：

<div id="div1">

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

 

<script>

var para=document.createElement("p");

var node=document.createTextNode("This is new.");

para.appendChild(node);

 

var element=document.getElementById("div1");

var child=document.getElementById("p1");

element.insertBefore(para,child);

</script>

 

4） 删除已有的 HTML 元素：

removeChild(child)：必须清楚该元素的父元素

<div id="div1">

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

<script>

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

parent.removeChild(child);

</script>

 

提示：能否在不引用父元素的情况下删除某个元素？

很抱歉。DOM 需要了解您需要删除的元素，以及它的父元素。

这里提供一个常用的解决方法：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素：

var child=document.getElementById("p1");

child.parentNode.removeChild(child);

 

5） 替换 HTML 元素：

parent.replaceChild(替换后的,替换前的)：

<div id="div1">

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

 

<script>

var para=document.createElement("p");

var node=document.createTextNode("This is new.");

para.appendChild(node);

 

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

parent.replaceChild(para,child);

</script>

 

3、添加/删除/修改/获取 Element 类型的属性

ü attributes

ü 直接将属性名当做元素对象的属性访问（但class属性不起作用，需改用className）

 

1）创建HTML属性：createAttribute()：创建新的 Attr 节点。

createAttribute(name)

 

抛出：如果 name 参数中含有不合法的字符，该方法将抛出代码为 INVALID_CHARACTER_ERR 的 DOMException 异常。

 

2）获取HTML属性：getAttribute() ：返回指定属性名的属性值

element.getAttribute(attributename)

 

3）设置/修改HTML属性：setAttribute()：添加指定的属性，并为其赋指定的值。

element.setAttribute(attributename,attributevalue)

注释：Internet Explorer 8 以及更早的版本不支持此方法。

 

4) 删除HTML属性：removeAttribute(“style”)(彻底删除)；

 

4、添加/删除/修改/获取 CSS 样式：

 

1） 添加/删除/修改/获取内联style：

nodeName.style.fontWeight:

注意：通过nodeName.style返回的数据类型是Object：

 

2） 添加/删除/修改/获取class属性：

nodeName.className="class1";

 

<style>

.hide{display:none;}

</style>

<button type="button" id="hide">Hide the text</button>

<div id="target">text</div>

<script>

document.getElementById("hide").οnclick=function(){

   document.getElementById("target").className="hide";

};

</script>

 

3）以元素属性的方式添加/修改/获取样式：

获取：nodeName.getAttribute(“style”)（返回的数据类型是string）;

添加/修改：nodeName.setAttribute(“style”,attributevalue);

nodeName.setAttribute(“class”,attributevalue);

 

<style>

.hide{display:none;}

</style>

<button type="button" id="hide">Hide the text</button>

<div id="target">text</div>

<script>

document.getElementById("hide").οnclick=function(){

   document.getElementById("target").setAttribute("class","hide");

};

</script>

 

删除：removeAttribute(“style”)(彻底删除)；

 

5、添加/删除/修改/获取HTML文本：

 

1） 添加/修改/获取HTML文本：innerHTML属性：对于获取或修改 HTML 元素的内容很有用

 

2) 创建HTML文本：createTextNode()

 

3) 添加HTML文本：appendChild()

 

4） 删除HTML文本：removeChild()

 

六、说明：

document对象给定的就是当前所访问的文档

document.documentElement表示html标签

获取body的快捷方式：document.body

获取表单元素的快捷方式：document.forms[0].elements[0]

标签属性：.tagName;

 

hasChildNodes()

hasAttributes()