( ! ) 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 | ||||
# | Time | Memory | Function | Location |
1 | 0.0000 | 361280 | {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 | ||||
# | Time | Memory | Function | Location |
1 | 0.0000 | 361280 | {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 | ||||
# | Time | Memory | Function | Location |
1 | 0.0000 | 361280 | {main}( ) | ...\dom.php:0 |
信息:原创2014-09-150 次阅读0 个评论
标签:后天堂向上,网站制作,自学教程,网站技术,javascript,javascript DOM对象,文档对象模型
DOM:文档对象模型。使用 DOM,开发者可以对 HTML 页面元素(标签)进行访问和操作,比如获取某个元素、增删改查元素内容和属性等等。
需要注意的是,DOM 和 BOM 一样,没有统一的标准,各个浏览器对其支持程度不同,而 IE 是通过 COM 来实现 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() | 在元素节点的前面添加新的子节点(父元素进行操作) |
微软从 IE6 开始区分标准模式和混杂模式(怪异模式),区分方式主要是看文件的声明(!DOCTYPE)。IE 为 document 创建了一个新的属性 compatMode,如果浏览器是标准模式,则返回 CSS1Compat,混杂模式返回BackCompat。
JS 的 DOM 是一个很强大很复杂的内容,以上仅仅是其一部分,如果你有钻研精神,或者你想学习更多相关知识,可以去浏览国外一些优质的网站、书籍,或者去看一下李炎恢老师的视频教程。