HTML DOM之document对象的属性和方法-CSDN博客

W3C的DOM有2个版本：核心DOM和HTML DOM。核心DOM是一个语言独立和模块独立的API，它能够在任何语言中实现，而不仅仅是在JavaScript中实现，例如JAVA DOM实现，XML DOM实现等。HTML DOM是网页的面向对象的层次式的视图，其中的对象映射了不同的HTML元素，例如HTMLParagraphElement代表了p标签。其实所谓的DOM就是W3C定义的一套接口（interface），每个接口定义了一些属性和方法，具体实现由浏览器实现。而HTML DOM其实就是继承了核心DOM的接口，并在此基础上添加HTML所独有的属性和方法，例如id。
一、HTML DOM之Document对象
当浏览器载入HTML文档时，它就会成为document对象。
1、获取dom元素的几种方法

1.1、根据id获取dom元素

document.getElementById("myDiv");//静态方法，返回带有指定id的元素对象,{Object}


1.2、根据标签名获取dom元素

document.getElementsByTagName("div");//动态方法，返回指定标签名的元素集合。


1.3、根据类名获取dom元素

document.getElementsByClassName("example");//返回文档中所有指定类名的元素集合,作为NodeList对象。多个选择器之间用空格分割。

document.getElementsByClassName("example color");


1.4、根据CSS选择器字符串获取dom元素

<div id="myDiv" class="example exp">你好</div>

document.querySelector(".example.exp");//选择器包含一个或多个要匹配的css选择器,对于多个选择器，使用逗号隔开，返回一个匹配的元素。。 返回文档中与指定选择器或选择器组匹配的第一个Element。 如果找不到匹配项，则返回null。

//注意:如果要匹配的ID或选择器不符合 CSS 语法（比如不恰当地使用了冒号或者空格），你必须用反斜杠将这些字符转义。由于 JavaScript 中，反斜杠是转义字符，所以当你输入一个文本串时，你必须将它转义两次（一次是为 JavaScript 字符串转义，另一次是为 querySelector 转义）：

<div id="foo\bar"></div>

<div id="foo:bar"></div>


console.log('#foo\bar') // "#fooar"

document.querySelector('#foo\bar') // 不匹配任何元素


console.log('#foo\\bar') // "#foo\bar"

console.log('#foo\\\\bar') // "#foo\\bar"

document.querySelector('#foo\\\\bar') // 匹配第一个div元素


document.querySelector('#foo:bar') // 不匹配任何元素

document.querySelector('#foo\\:bar') // 匹配第二个div


1.5、根据CSS选择器字符串获取dom元素集合

document.querySelectorAll(".example,.exp");//选择器是一个或多个CSS选择器，这些选择器由逗号隔开。返回的 NodeList 将包含文档中的所有节点，这些都是由特定选择器匹配的。如果选择器字符串包含了一个CSS伪元素，将返回空的元素集合。


1.6、根据元素的 name 属性值获取dom元素集合

var a = document.getElementsByName("myname");//返回一个实时更新的 NodeList集合。

注意：name属性只有在(X)HTML文档中可用。该方法返回一个live的 NodeList集合，这个集合包含name属性为指定值的所有元素，例如<meta> 、<object>，甚至那些不支持name属性但是添加了name自定义属性的元素也包含其中。getElementsByName 在不同的浏览器其中工作方式不同。在IE和Opera中， getElementsByName() 方法还会返回那些id为指定值的元素。所以你要小心使用该方法，最好不要为元素的name和id赋予相同的值。


style对象下的具体属性都有哪些?详情参阅:http://www.runoob.com/jsref/dom-obj-style.html


2、document.activeElement,返回文档中当前获得焦点的元素。


3、document.addEventListener(),向文档添加事件句柄。用document.removeEventListener() 移除addEventListener()所添加的事件。IE8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。但是，对于这类浏览器版本可以使用 attachEvent() 方法来添加事件句柄（要注意跨浏览器兼容问题）。


用法：document.addEventListener(event, function, useCapture);useCapture指定事件是否在捕获或冒泡阶段执行。true - 事件句柄在捕获阶段执行；false- 默认。事件句柄在冒泡阶段执行。addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄,可以在文档中添加许多事件，添加的事件不会覆盖已存在的事件,也可以添加不同类型的事件。例如：

document.addEventListener("click", myFunction);

document.addEventListener("click", someOtherFunction);


当传递参数值时，使用"匿名函数"调用带参数的函数：

document.addEventListener("click",function(){

myFunction(p1, p2);

});


如果浏览器不支持 addEventListener() 方法, 你可以使用 attachEvent() 方法替代。以下实例演示了跨浏览器的解决方法：

if(document.addEventListener){//所有主流浏览器，除了 IE 8 及更早 IE版本

document.addEventListener("click", myFunction);

}else if(document.attachEvent){// IE 8 及更早 IE 版本

document.attachEvent("onclick", myFunction);

}


4、document.removeEventListener(event,function,useCapture);用于移除由 document.addEventListener()方法添加的事件句柄。

注意: 如果要移除事件句柄，addEventListener() 的执行函数必须使用外部函数，如上实例所示 (myFunction)。匿名函数，类似 "document.removeEventListener("event", function(){ myScript });"该事件是无法移除的。

提示使用 element.addEventListener()和element.removeEventListener()方法来添加或移除指定元素的事件句柄。


注意：IE8及更早IE版本不支持removeEventListener()方法，Opera7及Opera更早版本也不支持。但是，对于这些不支持该函数的浏览器，你可以使用detachEvent()方法来移除由attachEvent()方法添加的事件句柄(查看"更多实例"了解跨浏览器的解决方案)。


注意：useCapture参数，如果添加两次事件句柄，一次在捕获阶段，一次在冒泡阶段，你必须单独移除该事件。


5、document.anchors,返回了当前页面的所有超级链接数组。注意：a链接没有name属性的不会被计入。


6、document.applets，返回对文档中所有Applet对象的引用(Applet对象是什么)。


7、document.baseURI,获取文档的基础URL。除了IE浏览器，其他主流浏览器都支持 baseURI 属性。


8、document.body，返回文档的body元素。


9、document.close()，用于关闭一个由window.open方法打开的输出流。


10、document.cookie，设置或返回与当前文档有关的 键/值 对的所有 cookies。


11、document.createAttribute(attributename)，创建一个属性节点，返回一个节点对象,示例：

var attr=document.createAttribute("class");

attr.value="democlass";(或者attr.nodeValue = "democlass";)

document.getElementsByTagName("p")[0].setAttributeNode(attr);


12、document.createComment(),创建注释节点, 并插入HTML文档。示例：

var cText = document.createComment("My personal comments");

document.body.appendChild(c);


13、document.createDocumentFragment();

创建空的DocumentFragment对象，并返回此对象（文档片段）。该方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。当你想提取文档的一部分，改变，增加，或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。你也可以使用文档的文档对象来执行这些变化，但要防止文件结构被破坏，createDocumentFragment() 方法可以更安全改变文档的结构及节点。文档片段是个轻量级的document对象，它的设计初衷就是为了完成更新和移动节点这类任务。文档片段的一个便利的语法特性是当你附加一个片断到节点时，实际上被添加的是该片断的子节点，而不是片断本身。只触发了一次重排，而且只访问了一次实时的DOM。可以提升性能。示例：

var frag=document.createDocumentFragment();

var son = document.createElement('p');

son.innerText = '子标签';

frag.appendChild(son);

document.getElementsByClassName("empty")[0].appendChild(frag);


14、document.createElement(nodename);创建一个元素节点。元素节点可以自定义，并不一定需要是标准html元素名称，且创建后的元素需要添加到body或者某个元素下，否则不显示，示例：

var mydiv = document.createElement("mydiv");

var div = document.createElement("div");

div.innerText = "元素内容";（注意：如果这里用div.nodeValue = "元素内容";则设置文本节点无效）

document.body.appendChild(mydiv);

document.body.appendChild(div);


15、document.createTextNode(text);创建一个文本节点。HTML元素通常是由元素节点和文本节点组成。示例：

var text = document.createTextNode("Hello World");

document.body.appendChild(text);


拓展：nodeValue、innerText、innerHTML和textContent区别？

(1)、nodeValue：仅仅对CDATA片段，注释comment，Processing Instruction节点或text节点有效，对document, documentFragment, Element节点，返回值为null,也无法使用其进行内容的设置，如果要改变元素的文本节点，用element.childNodes[0].nodeValue。(注意：element.childNodes[0].nodeValue只可以用来修改元素已存在的文本节点，如果是没有文本节点的元素需要新添加文本节点，用element.childNodes[0].nodeValue会报错,这是需要用其他方法替代。)，示例：

<div class="demo1"></div>

document.querySelector(".demo1").childNodes[0].nodeValue = "新增文本节点";//报错


<div class="demo2"></div>

document.querySelector(".demo2").childNodes[0].nodeValue = "新增文本节点";//正确


(2)、innerHTML：浏览器会将内容解析为HTML，因此更慢。


(3)、innerText：与innerHTML类似，但是不会解析其中的html标签。


(4)、textContent：使用纯文本而不是解析为html,更快捷.（比innerHTML安全）,如果在仅仅是要element节点改变文本，使用textContent。


textcContent、nodeValue和innerHMLT在改变元素文本节点的区别：三者都能用，但使用nodeValue容易造成困惑，innerTMLHTML性能差点，使用textContent最佳。


示例：var div = document.createElement("div");

var attr = document.createAttribute("class");

attr.value="new_div";

div.setAttributeNode(attr);

div.innerText = "新建div标签";


document.body.appendChild(div);

alert(div.nodeValue);//null

alert(div.childNodes[0].nodeValue);//'新建div标签'


16、document.doctype;返回HTML文档的文档类型对象，IE8及IE更早版本显示HTML和XHTML文档时该属性返回null,但是支持XML文档。


17、document.documentElement;返回文档的根节点,HTML文档返回对象为HTML元素。


18、document.documentMode;返回用于通过浏览器渲染文档的模式。IE8使用不同方式渲染页面,基于!DOCTYPE或者某些存在的HTML元素。这些元素返回值如下:

5 - 页面在 IE5 模式下展示

7 - 页面在 IE7 模式下展示

8 - 页面在 IE8 模式下展示

9 - 页面在 IE9 模式下展示

注意：如果没有指定!DOCTYPE,IE8以IE5模式渲染页面。


19、document.documentURI;设置或返回文档的位置。


20、document.domain;返回当前文档的服务器域名。


21、document.domConfig;返回normalizeDocument()被调用时所使用的配置。


22、document.embeds;返回文档中所有嵌入的内容（embed）集合。


23、document.forms;forms集合返回当前页面所有表单的数组集合。


24、document.images;返回当前文档中所有图片的数组。


25、document.implementation;返回处理该文档的 DOMImplementation 对象。


26、document.importNode(node,true);把一个节点从另一个文档复制到该文档以便应用。如果第二个值设置为true，那么还要复制该节点的所有子孙节点。实例：

var frame=document.getElementsByTagName("iframe")[0];

var h=frame.contentWindow.document.getElementsByTagName("h1")[0];

var x=document.importNode(h,true);

注意:IE8及IE更早版本不支持该方法。


27、document.inputEncoding;返回当前文档的字符编码。

注意： 除了Opera浏览器、IE8及更早IE版本不支持该属性。


28、document.lastModified;返回文档最后被修改的日期和时间。


29、document.links;links集合返回当前文档所有链接的数组。links集合计算<a href="">标签和<area>标签。


30、document.normalize();合并相邻的文本节点并删除空的文本节点。实例：

<p id="demo">点击一个按钮来添加文本,点击另一个按钮规范化文档</p>

<p>上面的段落有 <span id="cc">1</span>个子节点。</p>

<button onclick="addTextNode()">添加一个文本节点</button>

<button onclick="normPara()">规范文本</button>


function addTextNode(){

var y=document.createTextNode("Click again");

var x=document.getElementById("demo");

x.appendChild(y);

var z=document.getElementById("cc");

z.innerHTML=x.childNodes.length;

}

function normPara(){

document.normalize();

var x=document.getElementById("demo");

var z=document.getElementById("cc");

z.innerHTML=x.childNodes.length;

}


执行addTextNode方法后，p标签文本内容增加了“Click again”，但是审查元素可以看出p标签的布局如下：

<p id="demo">

"点击一个按钮来添加文本,点击另一个按钮规范化文档"

"Click again"

</p>


执行normPara方法后，审查元素可以看出p标签的布局如下：

<p id="demo">点击一个按钮来添加文本,点击另一个按钮规范化文档Click again</p>


31、document.open(MIMEtype,replace);打开一个输出流来收集 document.write() 或 document.writeln() 方法输出的内容。调用 open() 方法打开一个新文档并且用 write() 方法设置文档内容后，必须记住用 document.close()方法关闭文档，并迫使其内容显示出来。

注意：如果目标文件已经存在，它将被清除。如果这个方法没有参数，会显示一个新窗口(about:blank)。

参数MIMEtype可选，规定正在写的文档的类型，默认值是 "text/html"。

参数replace可选，当此参数设置后，可引起新文档从父文档继承历史条目。


32、document.readyState，返回当前文档的状态，该属性返回以下值:

uninitialized - 还未开始载入

loading - 载入中

interactive - 已加载，文档与用户可以开始交互

complete - 载入完成


33、document.referrer;返回载入当前文档的来源文档的URL。如果当前文档不是通过超级链接访问的，则为 null。这个属性允许客户端 JavaScript 访问 HTTP 引用头部。


34、document.adoptNode(node)，从另外一个文档返回adapded节点到当前文档。


35、document.scripts;返回页面中所有脚本的集合。


36、document.title;设置或获取当前文档的标题（ HTML title 元素中的文本）。


37、document.URL;返回当前文档的URL。


38、document.write(exp1,exp2,exp3,...);向文档写入HTML表达式或JavaScript代码。


39、document.writeln(exp1,exp2,exp3,...);与write()方法作用相同，外加可在每个表达式后写一个换行符。writeln方法和write方法的区别实例：

document.write("Hello World!");

document.write("Have a nice day!");

文档展示：Hello World!Have a nice day!


document.writeln("Hello World!");

document.writeln("Have a nice day!");

文档展示：Hello World!

Have a nice day!  复制代码