HTMLDOM对象的属性和⽅法介绍
HTML DOM对象的属性和⽅法介绍
DOM 是 Document Object Model（⽂档对象模型）的缩写。
DOM（⽂档对象模型）是针对HTML和XML⽂档的⼀个API（应⽤程序编程接⼝），它允许程序和脚本动态地访问和更新⽂档的内容，结构和样式。
W3C DOM 标准被分为 3 个不同的部分：
核⼼ DOM - 针对任何结构化⽂档的标准模型
XML DOM - 针对 XML ⽂档的标准模型
HTML DOM - 针对 HTML ⽂档的标准模型
HTML DOM 定义了所有 HTML 元素对象的属性，以及访问它们的⽅法，我们可以通过 Javascript 获取，修改，添加和删除 HTML 元素。
HTML DOM 对象有⼏种类型：
1.Document 类型
在浏览器中，Document 对象表⽰整个 HTML ⽂档。
1.1属性
引⽤⽂档的⼦节点
documentElement
var html = document.documentElement;    //取得对<html>元素的引⽤
body
var body = document.body;    //取得对<body>元素的引⽤
获取⽂档信息
title
通过 title 属性可以访问当前⽂档的标题，也可以修改当前⽂档的标题。
var originalTitle = document.title;    //返回当前⽂档的标题
document.title = "New title";    //修改当前⽂档的标题
URL
该属性返回当前页⾯完整的 URL，也就是浏览器地址栏中的全部地址信息。
⽐如我打开了⼀个页⾯，浏览器地址栏中的信息显⽰如下：
wwwblogs/cqhaibin/p/6291640.html
这些信息就是当前⽂档完整的 URL。
var url = document.URL;//返回当前⽂档完整的URL
domain
该属性返回当前⽂档的服务器域名。
还是上⾯的地址，域名就是 wwwblogs。
var domain = document.domain;//返回当前⽂档的域名
referrer
该属性包含着链接到当前⽂档的源页⾯的 URL。
⽐如 A 页⾯上有个超链接，超链接指向 B 页⾯，我们在 A 页⾯点击了这个超链接，于是打开了 B 页⾯，此时，B 页⾯的 referrer 属性值就是 A 页⾯的完整 URL。但 A 页⾯并不是通过点击其他超链接打开的，所以 A 页⾯的 referrer 属性值是空字符串 ""。
var referrer = ferrer;//返回链接到当前页⾯的源页⾯的URL
lastModified
var lastModified = document.lastModified;//返回当前⽂档最后被修改的⽇期和时间
还是以 wwwblogs/cqhaibin/p/6291640.html 这个页⾯为例，在控制台输⼊以下代码：
document.lastModified;    //输⼊这⾏代码
"01/17/2017 11:58:34"    //返回的信息
cookie
这个属性可以访问和设置与当前⽂档相关的所有 cookie。
var cookie = kie;//返回与当前⽂档相关的所有cookie
1.2 ⽅法
查元素
getElementById()
该⽅法接受⼀个参数，即希望获取的元素的 ID 名称。到相应的元素后会返回该元素。
<p id="p">some text</p>
var p = ElementById("p");    //取得对 p 元素的引⽤
getElementsByTagName()
该⽅法接受⼀个参数，即希望获取的元素的标签名。
返回的是⼀个 HTMLCollection 对象，这个对象包含了带有指定标签名的所有元素。该对象有 length 属性。
要访问 HTMLCollection 对象中的某项，可以⽤⽅括号语法或 item() ⽅法或 namedItem() ⽅法。
可以向⽅括号内传⼊数字或者字符串。在后台，对数字索引调⽤ item() ⽅法，对字符串索引调⽤ namedItem() ⽅法。
namedItem() ⽅法，接受⼀个参数，即元素的 name 特性值。返回带有给定 name 特性的元素。如果有多个元素 name 特性值相同，只返回第⼀个元素。
<img src="FuckJavaScript.gif" name="fc" />
<img scr="ComeOn.gif" />
<img src="OnMyGod.gif" />
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
var images = ElementsByTagName('img');    //取得对所有<img>元素的引⽤
//访问某项
alert(images.length);            //"3"
alert(images[0]);                //返回第⼀个<img>元素
alert(images["fc"]);              //返回第⼀个<img>元素
alert(images.item(0));            //返回第⼀个<img>元素
alert(images.namedItem("fc"));    //返回第⼀个<img>元素
getElementsByName()
这个⽅法接受⼀个参数，即 name 属性的值，返回带有给定 name 属性值的所有元素。常⽤此⽅法取得单选按钮。
这个⽅法也会返回⼀个 HTMLCollection 对象。
<fieldset>
<legend>你喜欢下列哪个品牌的⼿机</legend>
<label><input type="radio" value="Apple" name="phone" />苹果</label>
<label><input type="radio" value="Huawei" name="phone" />华为</label>
<label><input type="radio" value="OPPO" name="phone" />OPPO</label>
<label><input type="radio" value="Xiaomi" name="phone" />⼩⽶</label>
<label><input type="radio" value="Meizu" name="phone" />魅族</label>
</fieldset>
var brands = ElementsByName('phone');    //返回⼀个列表，包含所有 radio 元素
alert(brands[1].value);        //返回列表中第⼆个 radio 元素的 value 属性的值
alert(brands.item(1).value);    //返回列表中第⼆个 radio 元素的 value 属性的值
getElementsByClassName()
HTML 5 定义了该⽅法。
这个⽅法接受⼀个参数，即 class 特性值，返回带有给定 class 特性的所有元素。
2.Node 类型
2.1 属性
基础属性
nodeType
该属性表⽰元素的节点类型，返回⼀个数字。
不同类型节点的 nodeType 值不⼀样。
类型数值说明备注
ELEMENT_NODE1元素节点常⽤
ATTRIBUTE_NODE2属性节点常⽤
TEXT_NODE3⽂本节点常⽤
CDATA_SECTION_NODE4CDATA区段节点
ENTITY_REFERENCE_NODE5实体引⽤名称节点
ENTITY_NODE6实体名称节点
PROCESSING_INSTRUCTION_NODE7处理指令节点
COMMENT_NODE8注释节点常⽤
DOCUMENT_NODE9⽂档节点（⼜名根节点）常⽤
DOCUMENT_TYPE_NODE10⽂档类型节点
DOCUMENT_FRAGMENT_NODE11⽂档⽚段节点
NOTATION_NODE12DTD声明节点
nodeName
该属性返回节点的名称，是元素的标签名。
返回的标签名是⼤写字母。
<ol id="rank">
<li>第⼀名：张⽔⽔</li>
<li>第⼆名：黄糊糊</li>
<li>第三名：安莘婉</li>
</ol>
ElementById('rank').nodeName);    //"OL"
nodeValue
该属性返回节点的值，值取决于节点的类型。
ownerDocument
该属性返回整个⽂档对象。
在对返回来的对象进⾏第⼀个⼦节点检测时，返回的是⽂档声明：<!DOCTYPE ………………………………>。<ol id="rank">
<li>第⼀名：张⽔⽔</li>
<li>第⼆名：黄糊糊</li>
<li>第三名：安莘婉</li>
</ol>
<p>some text</p>
var lists = ElementsByTagName("li");
var p = ElementsByTagName("p");
ElementById('rank').ownerDocument);    //返回整个 Document ⽂档对象
alert(lists[0].ownerDocument);    //返回整个 Document ⽂档对象
alert(p[0].ownerDocument);        //返回整个 Document ⽂档对象
alert(p[0].ownerDocument.firstChild);    //返回 DocumentType 对象，也就是⽂档声明 <!DOCTYPE ………………>
作为⽗节点拥有的属性
childNodes
该属性返回⼀个 NodeList 对象。
NodeList 对象是⼀种类数组对象，保存着⼀组有序的节点，可以通过⽅括号语法和 item() ⽅法访问 NodeList 对象中的项。
<ol id="rank">
<li>第⼀名：张⽔⽔</li>
<li>第⼆名：黄糊糊</li>
<li>第三名：安莘婉</li>
</ol>
var rank = ElementById("rank");//获取 ol 元素
alert(rank.childNodes.length);    //"7"，返回 ol 元素的⼦节点个数
有的浏览器会把元素之间的空⽩处算作⼀个⽂本节点。
本例中 ol 元素后⾯的空⽩处（1个）和 li 元素后⾯的空⽩处（3个），算作⽂本节点，于是这4个空⽩⽂本节点加上3个 li 元素节点，⼀共是7个，所以 rank.childNodes.length 返回7。
但是，如果把上例中所有元素紧密相接，互相之间不留空⽩，则 length 值会不⼀样。
//元素之间不留空⽩
<ol id="rank"><li>第⼀名：张⽔⽔</li><li>第⼆名：黄糊糊</li><li>第⼀名：安莘婉</li></ol>
var rank = ElementById("rank");    //取得对 ol 元素的引⽤
alert(rank.childNodes.length);    //f返回 "3"
firstChild
该属性返回⽗节点的第⼀个⼦节点。
<ol id="rank"><li>第⼀名：张⽔⽔</li><li>第⼆名：黄糊糊</li><li>第三名：安莘婉</li></ol>
var rank = ElementById("rank");    //取得对 ol 元素的引⽤
alert(rank.firstChild);      //返回第⼀个 li 元素
alert(rank.childNodes[0]);    //返回第⼀个 li 元素
someNode.firstChild = someNode.childNodes[0]
上例中返回的是第⼀个 li 元素，即 <li>第⼀名：张⽔⽔</li>，要获得第⼀个 li 元素的⽂本内容：第⼀名：张⽔⽔，可以⽤下⾯的⽅法。
<ol id="rank"><li>第⼀名：张⽔⽔</li><li>第⼆名：黄糊糊</li><li>第三名：安莘婉</li></ol>
var rank = ElementById("rank");//取得对 ol 元素的引⽤
alert(rank.deValue);      //"第⼀名：张⽔⽔"
alert(rank.childNodes[0].deValue);    //"第⼀名：张⽔⽔"
lastChild
该属性返回⽗节点的最后⼀个⼦节点。
<ol id="rank"><li>第⼀名：张⽔⽔</li><li>第⼆名：黄糊糊</li><li>第三名：安莘婉</li></ol>
var rank = ElementById("rank");//取得对 ol 元素的引⽤
alert(rank.lastChild);                                //返回最后⼀个 li 元素
alert(rank.childNodes[rank.childNodes.length - 1]);    //返回最后⼀个 li 元素
alert(rank.deValue);                                //"第三名：安莘婉"
alert(rank.childNodes[rank.childNodes.length - 1].deValue);    //"第三名：安莘婉"
someNode.lastChild = someNode.childNodes[someNode.childNodes.length - 1]
作为⼦节点有⽤的属性
parentNode
该属性返回⼦节点的⽗节点。
<p>快过年了，说点什么好呢？</p>
<ul>
<li>新年快乐</li>
<li>万事如意</li>
<li id="djb">最后祝你新年⼤吉吧</li>
</ul>
var djb = ElementById("djb");//获得对 id="djb" 的 li 元素的引⽤
alert(deName);              //"UL"
previousSibling
在 childNodes 列表中每个节点相互之间都是同胞节点。
该属性返回 childNodes 列表中该⼦节点的上⼀个同胞节点。
<p>快过年了，说点什么好呢？</p>
<ul><li>新年快乐</li><li id="ruyi">万事如意</li><li>最后祝你新年⼤吉吧</li></ul>
var ruyi = ElementById("ruyi");//获得对 id="ruyi" 的 li 元素的引⽤
alert(ruyi.deValue);    //"新年快乐"
htmlbutton属性nextSibling
该属性返回 childNodes 列表中该⼦节点的下⼀个同胞节点。
<p>快过年了，说点什么好呢？</p>
<ul><li>新年快乐</li><li id="ruyi">万事如意</li><li>最后祝你新年⼤吉吧</li></ul>
var ruyi = ElementById("ruyi");//获得对 id="ruyi" 的 li 元素的引⽤
deValue);    //"最后祝你新年⼤吉吧"
2.2 ⽅法
hasChildNodes()
如果指定的节点有⼦节点，该⽅法返回 true，若没有⼦节点，则返回 false。
<input id="btn" type="button" value="Button" />
<ul id="words">
<li>新年快乐</li>
<li id="ruyi">万事如意</li>
<li>最后祝你新年⼤吉吧</li>
</ul>
var btn = ElementById("btn");//获得对 id="btn" 的引⽤
var words = ElementById("words");//获得对 id="words" 的 ul 元素的引⽤
alert(btn.hasChildNodes());    //"false"
alert(words.hasChildNodes());    //"true"
appendChild()
该⽅法向 NodeList 列表中的末尾添加⼀个节点。
接收⼀个参数，即要添加的节点。
该⽅法返回新添加的节点。
//代码
<ul id="words"><li>新年快乐</li><li>万事如意</li><li>最后祝你新年⼤吉吧</li></ul>
/
/页⾯显⽰
新年快乐
万事如意
最后祝你新年⼤吉吧
var words = ElementById("words");    //获得对 id="words" 的 ul 元素的引⽤
var addLi = ateElement("li");    //创建 li 元素
var liText = ateTextNode("我是新增项，被放在元列表的末尾处");    //创建 li 元素的⽂本内容
addLi.append(liText);    //给 li 元素添加⽂本内容
words.appendChild(addLi);    //给 ul 元素添加新建的 li 元素
//刷新页⾯
新年快乐
万事如意
最后祝你新年⼤吉吧
我是新增项，被放在元列表的末尾处
insertBefore()
该⽅法向 NodeList 列表中指定位置之前插⼊节点，不局限于最后⼀位。
接收两个参数，第⼀个是要插⼊的节点，第⼆个是指定位置的节点。如果第⼆个参数未指定，则会在列表末尾插⼊新节点。
该⽅法返回新插⼊的节点。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。