( ! ) Warning: include(): http:// wrapper is disabled in the server configuration by allow_url_include=0 in D:\www\up\js\dom.php on line 14
Call Stack
#TimeMemoryFunctionLocation
10.0000361280{main}( )...\dom.php:0

( ! ) Warning: include(http://pub.houheaven.com/Nav02/Nav_deep2.htm): failed to open stream: no suitable wrapper could be found in D:\www\up\js\dom.php on line 14
Call Stack
#TimeMemoryFunctionLocation
10.0000361280{main}( )...\dom.php:0

( ! ) Warning: include(): Failed opening 'http://pub.houheaven.com/Nav02/Nav_deep2.htm' for inclusion (include_path='.;C:\php\pear') in D:\www\up\js\dom.php on line 14
Call Stack
#TimeMemoryFunctionLocation
10.0000361280{main}( )...\dom.php:0

信息:原创2014-09-150 次阅读0 个评论

标签:后天堂向上,网站制作,自学教程,网站技术,javascript,javascript DOM对象,文档对象模型


基本介绍


DOM:文档对象模型。使用 DOM,开发者可以对 HTML 页面元素(标签)进行访问和操作,比如获取某个元素、增删改查元素内容和属性等等。

需要注意的是,DOM 和 BOM 一样,没有统一的标准,各个浏览器对其支持程度不同,而 IE 是通过 COM 来实现 DOM 的。



DOM 方法

获取节点

方法说明
document.getElementById()获取指定 ID 的节点(元素)
document.getElementsByTagName()获取指定 class 的节点集合
document.getElementsByName()获取指定 name 的节点集合

操作节点属性

方法说明
getAttribute(attr)获取节点属性的值
setAttribute(attr,value)设置节点属性的值
removeAttribute(attr)移除节点属性的值

实例

HTML: 

<p id="greet">hello world!</p>

 

JS: 

var p=document.getElementById("greet");

alert(p.innerHTML);// hello world!



元素节点

节点分为元素节点、属性节点和文本节点。

这些节点又有三个非常有用的属性,分别为:nodeName、nodeType、nodeValue。

节点类型nodeNamenodeTypenodeValue
元素节点元素名称1null
属性节点属性名称2属性值
文本节点#text3文本内容


元素节点的属性

html 属性

属性说明
tagName获取元素节点的标签名
innerHTML获取元素节点的内容
id获取元素节点的 ID 属性的值
title获取元素节点的 title 属性的值
style获取元素节点的 style 属性对象
className获取元素节点的类名

层次节点属性

属性说明
parentNode获取元素节点的父节点
childNodes获取元素子节点的集合(不忽略空白节点)
children获取元素子节点的集合(忽略空白节点)
firstChild获取元素子节点的第一个
lastChild获取元素子节点的最后一个
nextSibling获取元素节点的下一个节点
previousSibling获取元素节点的上一个节点
attributes获取元素节点的属性集合(遍历的顺序从后至前)
ownerDocument返回文档本身(document)


操作元素节点

方法说明
createElement()创建一个元素节点
createTextNode()创建一个文本节点
createAttribute()创建一个属性节点
cloneNode()克隆元素节点后创建成新的节点
appendChild()在元素节点集合的末尾添加新的子节点
removeChild()移除元素节点集合中指定的子节点
replaceChild()替换元素节点集合中指定的子节点
insertBefore()在元素节点的前面添加新的子节点(父元素进行操作)


DOM 拓展

呈现模式

微软从 IE6 开始区分标准模式和混杂模式(怪异模式),区分方式主要是看文件的声明(!DOCTYPE)。IE 为 document 创建了一个新的属性 compatMode,如果浏览器是标准模式,则返回 CSS1Compat,混杂模式返回BackCompat。




JS 的 DOM 是一个很强大很复杂的内容,以上仅仅是其一部分,如果你有钻研精神,或者你想学习更多相关知识,可以去浏览国外一些优质的网站、书籍,或者去看一下李炎恢老师的视频教程。

显示框架
top