Javascript:DOM对象

信息:原创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。

节点类型 nodeName nodeType nodeValue
元素节点 元素名称 1 null
属性节点 属性名称 2 属性值
文本节点 #text 3 文本内容


元素节点的属性

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