DOM知识结构

一、编程接口

 

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

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

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

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

 

二、节点类型:

1. 文档类节点

2. 元素类节点

3. 属性类节点

4. 文本类节点

5. 注释节点

 

三、节点要素:

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

比较重要的节点类型有:

元素类型NodeType

元素1

属性2

文本3

注释8

文档9

 

2nodeName是只读的

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

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

文本节点的 nodeName 始终是 #text

文档节点的 nodeName 始终是 #document

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

 

3nodeValue属性规定节点的值。

元素节点的 nodeValue undefined null

文本节点的 nodeValue 是文本本身

属性节点的 nodeValue 是属性值

 

四、元素之间的关系:

1. parentNode

2. childNodes

3. nextSibling

4. previousSibling

5. firstChild

6. lastChild

 

五、操作DOM

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

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

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

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

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

改变事件(处理程序)

 

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

1)文档的子节点

Htmldocument.documentElement;

Body:document.body;

 

2)文档信息

Titledocument.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").onclick=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").onclick=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()

 

 

阅读更多
文章标签: dom
个人分类: dom
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭