javascript--DOM讲解

DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次变化的节点树，允许开发人员添加、移除和修改页面的某一部分。

一、节点层次

在html页面中，文档元素始终都是元素。

1. Node类型

JavaScript中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。
（1）nodeType属性：用于表明节点的类型。

需要注意的是，在IE中不支持常量

if(someNode.nodeType === 1){    // 不使用Node.ELEMENT_NODE
    console.log("node is an element");
}123

（2）nodeName和nodeValue

if(someNode.nodeType === 1){    var name = someNode.nodeName,   // 元素的标签名        value = someNode.nodeValue; // null
    console.log(name, value);
}12345

（3）节点关系
文档中所有节点之间都存在着这样或那样的关系。节点间的各种关系可以用传统的家族关系来描述，相对于把文档树比喻成家谱。

立即学习“Java免费学习笔记（深入）”；

说明：

• hasChildNodes()在节点包含一个或多个子节点的情况下返回true

• NodeList对象拥有length属性，但并不是Array实例；其是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反应在NodeList对象中。可以通过方括号，也可以使用item()方法访问NodeList中的节点。
  

示例：

    
李刚
    
ligang
    
http://www.php.cn
12345

var div = document.getElementById("content");console.log(div.hasChildNodes());   // trueconsole.log(div.ownerDocument); 
    // #documentvar children = div.childNodes;console.log(children[0]);    
       // 
李刚
  注意：这里有可能是#text，格式化回车缩进导致！！console.log(children.item(1)); 
        // 
ligang
var p1 = div.firstChild;console.log(p1.parentNode);      
           // 
…
console.log(p1.previousSibling);  
             // nullconsole.log(p1.nextSibling);     
                // 
ligang
123456789101112

（4）操作节点
因为关系指针是只读的，所以DOM提供了一些操作节点的方法。

注意：并不是所有节点都有子节点，如果在不支持子节点的节点上调用了上述方法，将会导致错误发生。
示例：将blog元素移动到content中

    
李刚
http://www.php.cn
12345

var div = document.getElementById("content"),
    p = document.getElementById("blog");div.appendChild(p);123

    
李刚
    
http://www.php.cn
12345

说明：如果传入到appendChild()中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置。

示例：将blog作为content的第一个子元素，将company作为content的最后一个子元素

    
李刚
http://www.php.cn
ptmind
123456

var content = document.getElementById("content"),
    blog = document.getElementById("blog"),
    company = document.getElementById("company");content.insertBefore(blog, content.childNodes.item(0)); 
    // content.firstChildcontent.insertBefore(company, null);12345

    
李刚
    
http://www.php.cn
    
ptmind
123456

（5）其他方法

所有节点都有上述方法！

2. Document类型

JavaScript通过Document类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。而且，document对象是window对象的一个属性。

document.documentElement; // 获取对的引用document.body;  // 获取对的引用/* 以本人blog为例 */document.title; 
// 获取页面title信息："李刚的学习专栏 - 博客频道 - CSDN.NET"document.URL;   // 获取页面完整的URL："http://www.php.cn"document.domain;   
 // 获取页面的域名："blog.csdn.net"  document.referrer;  // 获取链接到当前页面的那个页面的URL：直接访问为空！1234567

技巧：由于跨域安全限制，来自不同子域的页面无法通过JavaScript通信。而通过将每个页面的document.domain设置为相同的值，这些页面就可以互相访问对方包含的JavaScript对象了。例如，在www.xxx.com中嵌入了一框架，框架内页面加载自report.xxx.com；两者不能进行访问。可以将两个页面的document.domain值都设置为xxx.com，就可以互相访问了。
需要注意的是，浏览器对domain有一限制，即如果域名开始时松散的(xxx.com)，那么不能将它再设置为紧绷的(www.xxx.com)。
（1）查找元素

var images = document.getElementsByTagName("img");images.item(0);images.namedItem("myImage");123

上述两种方式都可以通过[]代替。在后台，对数值索引会调用item()，对字符串索引会调用namedItem()。
（2）特殊集合

Movio

AI真人出镜视频讲解

下载

（3）DOM一致性检测

document.implementation.hasFeature("名称", "版本号");document.implementation.hasFeature("XML", "1.0");   // true12

存在实现与规范不一致的情况，所以建议除了检测hasFeature()之外，还同时使用能力检测。
（4）文档写入

示例：

my name is:
document.write("ligang");  // my name is: ligangwindow.onload = function(){
    document.write("ligang"); // ligang};12345

在文档加载结束后再调用document.write()，输出的内容将会重写整个页面。
write()、writeln()可以动态包含外部资源，需注意不能直接包含""，因为其会被解释为脚本块的结束。

document.write("