HTML DOM对象的属性和方法介绍(原生JS方法)
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，也就是浏览器地址栏中的全部地址信息。
比如我打开了一个页面，浏览器地址栏中的信息显示如下：
http://www.cnblogs.com/cqhaibin/p/6291640.html
这些信息就是当前文档完整的 URL。
var url = document.URL; //返回当前文档完整的URL
domain
该属性返回当前文档的服务器域名。
还是上面的地址，域名就是 www.cnblogs.com。
var domain = document.domain; //返回当前文档的域名
referrer
该属性包含着链接到当前文档的源页面的 URL。
比如 A 页面上有个超链接，超链接指向 B 页面，我们在 A 页面点击了这个超链接，于是打开了 B 页面，此时，B 页面的 referrer 属性值就是 A 页面的完整 URL。但 A 页面并不是通过点击其他超链接打开的，所以 A 页面的 referrer 属性值是空字符串 ""。
var referrer = document.referrer; //返回链接到当前页面的源页面的URL
lastModified
var lastModified = document.lastModified; //返回当前文档最后被修改的日期和时间
还是以 http://www.cnblogs.com/cqhaibin/p/6291640.html 这个页面为例，在控制台输入以下代码：
document.lastModified; //输入这行代码 "01/17/2017 11:58:34" //返回的信息
cookie
这个属性可以访问和设置与当前文档相关的所有 cookie。
var cookie = document.cookie; //返回与当前文档相关的所有cookie
1.2 方法
- 查找元素
getElementById()
该方法接受一个参数，即希望获取的元素的 ID 名称。找到相应的元素后会返回该元素。
<p id="p">some text</p>
var p = document.getElementById("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 = document.getElementsByTagName('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 = document.getElementsByName('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_NODE | 1 | 元素节点 | 常用 |
| ATTRIBUTE_NODE | 2 | 属性节点 | 常用 |
| TEXT_NODE | 3 | 文本节点 | 常用 |
| CDATA_SECTION_NODE | 4 | CDATA区段节点 | |
| ENTITY_REFERENCE_NODE | 5 | 实体引用名称节点 | |
| ENTITY_NODE | 6 | 实体名称节点 | |
| PROCESSING_INSTRUCTION_NODE | 7 | 处理指令节点 | |
| COMMENT_NODE | 8 | 注释 节点 | 常用 |
| DOCUMENT_NODE | 9 | 文档节点（又名根节点） | 常用 |
| DOCUMENT_TYPE_NODE | 10 | 文档类型节点 | |
| DOCUMENT_FRAGMENT_NODE | 11 | 文档片段节点 | |
| NOTATION_NODE | 12 | DTD声明节点 |
nodeName
该属性返回节点的名称，是元素的标签名。
返回的标签名是大写字母。
<ol id="rank">
<li>第一名：张水水</li>
<li>第二名：黄糊糊</li>
<li>第三名：安莘婉</li>
</ol>
alert(document.getElementById('rank').nodeName); //"OL"
nodeValue
该属性返回节点的值，值取决于节点的类型。
ownerDocument
该属性返回整个文档对象。
在对返回来的对象进行第一个子节点检测时，返回的是文档声明：<!DOCTYPE ………………………………>。
<ol id="rank">
<li>第一名：张水水</li>
<li>第二名：黄糊糊</li>
<li>第三名：安莘婉</li>
</ol>
<p>some text</p>
var lists = document.getElementsByTagName("li");
var p = document.getElementsByTagName("p");
alert(document.getElementById('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 = document.getElementById("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 = document.getElementById("rank"); //取得对 ol 元素的引用
alert(rank.childNodes.length); //f返回 "3"
firstChild
该属性返回父节点的第一个子节点。
<ol id="rank"><li>第一名：张水水</li><li>第二名：黄糊糊</li><li>第三名：安莘婉</li></ol>
var rank = document.getElementById("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 = document.getElementById("rank"); //取得对 ol 元素的引用
alert(rank.firstChild.firstChild.nodeValue); //"第一名：张水水"
alert(rank.childNodes[0].firstChild.nodeValue); //"第一名：张水水"
lastChild
该属性返回父节点的最后一个子节点。
<ol id="rank"><li>第一名：张水水</li><li>第二名：黄糊糊</li><li>第三名：安莘婉</li></ol>
var rank = document.getElementById("rank"); //取得对 ol 元素的引用
alert(rank.lastChild); //返回最后一个 li 元素
alert(rank.childNodes[rank.childNodes.length - 1]); //返回最后一个 li 元素
alert(rank.lastChild.firstChild.nodeValue); //"第三名：安莘婉"
alert(rank.childNodes[rank.childNodes.length - 1].firstChild.nodeValue); //"第三名：安莘婉"
someNode.lastChild = someNode.childNodes[someNode.childNodes.length - 1]
- 作为子节点有用的属性
parentNode
该属性返回子节点的父节点。
<p>快过年了，说点什么好呢？</p>
<ul>
<li>新年快乐</li>
<li>万事如意</li>
<li id="djb">最后祝你新年大吉吧</li>
</ul>
var djb = document.getElementById("djb"); //获得对 id="djb" 的 li 元素的引用
alert(djb.parentNode.nodeName); //"UL"
previousSibling
在 childNodes 列表中每个节点相互之间都是同胞节点。
该属性返回 childNodes 列表中该子节点的上一个同胞节点。
<p>快过年了，说点什么好呢？</p>
<ul><li>新年快乐</li><li id="ruyi">万事如意</li><li>最后祝你新年大吉吧</li></ul>
var ruyi = document.getElementById("ruyi"); //获得对 id="ruyi" 的 li 元素的引用
alert(ruyi.previousSibling.firstChild.nodeValue); //"新年快乐"
nextSibling
该属性返回 childNodes 列表中该子节点的下一个同胞节点。
<p>快过年了，说点什么好呢？</p>
<ul><li>新年快乐</li><li id="ruyi">万事如意</li><li>最后祝你新年大吉吧</li></ul>
var ruyi = document.getElementById("ruyi"); //获得对 id="ruyi" 的 li 元素的引用
alert(ruyi.nextSibling.firstChild.nodeValue); //"最后祝你新年大吉吧"
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 = document.getElementById("btn"); //获得对 id="btn" 的引用
var words = document.getElementById("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 = document.getElementById("words"); //获得对 id="words" 的 ul 元素的引用
var addLi = document.createElement("li"); //创建 li 元素
var liText = document.createTextNode("我是新增项，被放在元列表的末尾处"); //创建 li 元素的文本内容
addLi.append(liText); //给 li 元素添加文本内容
words.appendChild(addLi); //给 ul 元素添加新建的 li 元素
//刷新页面
新年快乐
万事如意
最后祝你新年大吉吧
我是新增项，被放在元列表的末尾处
insertBefore()
该方法向 NodeList 列表中指定位置之前插入节点，不局限于最后一位。
接收两个参数，第一个是要插入的节点，第二个是指定位置的节点。如果第二个参数未指定，则会在列表末尾插入新节点。
该方法返回新插入的节点。
//代码
<ul id="words"><li>新年快乐</li><li>万事如意</li><li>最后祝你新年大吉吧</li></ul>
//页面显示
新年快乐
万事如意
最后祝你新年大吉吧
var words = document.getElementById("words"); //获得对 id="words" 的 ul 元素的引用
var addLi = document.createElement("li"); //创建 li 元素
var liText = document.createTextNode("我是新增项，被插在了列表的第二位置处"); //创建 li 元素的内容
addLi.append(liText); //给 li 元素添加文本内容
words.insertBefore(addLi, words.childNodes[1]); //把新建 li 元素插入到列表的第二个位置处
//刷新页面
新年快乐
我是新增项，被插在了列表的第二位置处
万事如意
最后祝你新年大吉吧
replaceChild()
该方法用一个新节点替换 NodeList 列表中的某个节点。
接收两个参数，第一个是要插入的节点（这个节点可以是文档中某个已存在的节点，或者是创建的新节点），第二个是要替换的节点。
该方法返回被替换的节点。
//代码
<ul id="words"><li>新年快乐</li><li>万事如意</li><li>最后祝你新年大吉吧</li></ul>
//页面显示
新年快乐
万事如意
最后祝你新年大吉吧
var words = document.getElementById("words"); //获得对 id="words" 的 ul 元素的引用
var addLi = document.createElement("li"); //创建 li 元素
var liText = document.createTextNode("我是新增项，替换了原列表的第项"); //创建 li 元素的文本内容
addLi.append(liText); //给 li 元素添加文本内容
words.replaceChild(addLi, words.childNodes[1]); //用新建 li 元素替换了原列表中第二项
//刷新页面
新年快乐
我是新增项，替换了原列表的第二项
最后祝你新年大吉吧
removeChild()
该方法移除 NodeList 列表中的某个节点。
接收一个参数，即要移除的节点。
返回移除的节点。
//代码
<ul id="words"><li>新年快乐</li><li>万事如意</li><li>最后祝你新年大吉吧</li></ul>
//页面显示
新年快乐
万事如意
最后祝你新年大吉吧
var words = document.getElementById("words"); //获得对 id="words" 的 ul 元素的引用
words.removeChild(words.firstChild); //移除原列表的第一项
//刷新页面
万事如意
最后祝你新年大吉吧
- 所有节点都有的方法
cloneNode()
该方法可以创建一个完全相同的副本。
接收一个布尔值参数，表示是否执行深复制。true 进行深复制；false 进行浅复制。
深复制，复制节点及其整个子节点树；浅复制，只复制节点本身。
返回被复制的节点。
normalize()
该方法删除空的文本节点；把相邻的文本节点合并为一个文本节点。
3.Element 类型
Element 类型用于表示 HTML 元素，提供了对元素标签名，子节点和属性的访问。
3.1 属性
id
设置或返回元素的元素的 id 属性值。
title
设置或返回元素的元素的 title 内容。
lang
设置或返回元素的元素内容的语言代码，很少使用
dir
设置或返回元素的语言的方向，ltr，左到右；rt，右到左。很少使用
className
设置或返回元素的 class 属性的值。
tagName
返回元素的标签名。
在 HTML 中，tagName 属性的返回值始终是大写的。
<p id="myP" class="para" title="text" lang="en" dir="ltr">Some Text</p>
var p = document.getElementById('myP');
alert(p.id); //"myP"
alert(p.className); //"para"
alert(p.title); //"text"
alert(p.lang); //"en"
alert(p.dir); //"ltr"
alert(p.tagName); //"P" 大写
3.2 方法
document.createElement()
创建新元素。
接收一个参数，即要创建元素的标签名。
返回新创建的元素。
//页面空空
//写代码
var p = document.createElement("p"); //创建 p 元素
var pText = document.createTextNode("Some text"); //创建文本节点
p.appendChild(pText); //给 p 元素添加文本节点
document.body.appendChild(p); //给 body 元素添加 p 元素
//刷新页面
Some text
getAttribute()
该方法取得元素的属性。
接收一个参数，即需要获得属性值的属性名称。属性名称要用引号括起来。
返回指定属性的值。如果指定属性不存在，则返回 null。
<p id="myP" class="para" title="text" lang="en" dir="ltr">Some Text</p>
var p =document.getElementById("myP");
alert(p.getAttribute("id")); //"myP"
alert(p.getAttribute("class")); //"para"
alert(p.getAttribute("title")); //"text"
alert(p.getAttribute("lang")); //"en"
alert(p.getAttribute("dir")); //"ltr"
setAttribute()
该方法添加指定的属性，并为其赋指定的值。
接收两个参数，第一个参数为要添加的属性的名称，第二个参数为要添加的属性值。属性名称和属性值都要用引号括起来。
无返回值。
<p id="myP">Some Text</p>
var p =document.getElementById("myP");
alert(p.getAttribute("class")); //"null"
p.setAttribute("class", "para"); //设置 class 属性并赋值 "para"
alert(p.getAttribute("class")); //"para"
removeAttribute()
该方法删除指定的属性。
接收一个参数，希望删除指定属性的名称。属性名称要用引号括起来。
无返回值。
<p id="myP" class="para">Some Text</p>
var p =document.getElementById("myP");
alert(p.getAttribute("class")); //"para"
p.removeAttribute("class"); //移除 class 属性
alert(p.getAttribute("class")); //"null"
4. Text 类型
方法
document.createTextNode()
该方法创建文本节点。
接收一个参数，即要插入的文本内容。
返回创建的文本节点。
<p id="myP"></p>
//页面空空
//JS代码
var p =document.getElementById("myP"); //创建 P 元素
var pText = document.createTextNode("Some text"); //创建文本节点
p.appendChild(pText); //给 p 元素添加文本节点
document.body.appendChild(p); //给 body 元素添加 p 元素
//刷新页面
Some text
normalize()
如果父节点包含两个或多个文本节点，父节点在调用了该方法后，会把所有文本节点合并为一个文本节点。
无参数。
splitText()
该方法会把一个文本节点分成两个文本节点。
接收一个参数，参数为数字，为指定分割的位置值。
原来的文本节点将包括为从开始到分割位置之前的内容。
该方法返回一个新文本节点，包括从分割位置开始（包含分割位置的文本）到结束的内容。
5.Attribute 类型
Attributes 属性包含一个 NamedNodeMap 对象，与 NodeList 类似，是一个动态集合。
一个元素的所有属性节点都在这个集合中。
NamedNodeMap 对象有 length 属性，即一个元素所有属性的个数。
5.1 属性
name
该属性返回指定属性的名称。
value
该属性返回指定属性的值。
specified
该属性值是布尔值。
如果在文档中设置了属性值，则返回 true，如果是 DTD/Schema 中的默认值，则返回 false。
length
返回属性列表中属性节点的个数。
<p id="myP" class="para" title="text">Some Text</p>
var p =document.getElementById("myP");
console.log(p.attributes.length); //3
console.log(p.attributes[1]); //返回属性列表中第二个属性对象
console.log(p.attributes[1].name); //"class"
console.log(p.attributes[1].value); //"para"
console.log(p.attributes["class"]); //返回属性列表中第二个属性对象
console.log(p.attributes["class"].name); //"class" 返回属性列表中第二个属性对象的名称
console.log(p.attributes["class"].value); //"para"
console.log(p.attributes[1].specified); //"true"
5.2 方法
getNamedItem()
接收一个参数，即想要返回的属性节点的属性名称。
返回指定属性名称的属性节点。
<p id="myP" class="para" title="text">Some Text</p>
var p =document.getElementById("myP");
console.log(p.attributes.getNamedItem("class")); //返回属性列表中 class 属性节点
console.log(p.attributes.getNamedItem("class").name); //"class"
console.log(p.attributes.getNamedItem("class").value); //"para"
//再来回顾前两种访问属性节点列表中某个属性节点的方法
//方括号里面跟索引号
console.log(p.attributes[1]); //返回属性列表中第二个属性节点
console.log(p.attributes[1].name); //"class"
console.log(p.attributes[1].value); //"para"
//方括号里面跟属性名称
console.log(p.attributes["class"]); //返回属性列表中 class 属性节点
console.log(p.attributes["class"].name); //"class"
console.log(p.attributes["class"].value); //"para"
removeNamedItem()
接收一个参数，即想要删除的属性节点的属性名称。
返回删除的指定属性名称的属性节点。
<p id="myP" class="para" title="text">Some Text</p>
var p =document.getElementById("myP");
alert(p.attributes["title"]); //返回属性 title 节点
p.attributes.removeNamedItem("title"); //移除 title 属性节点
alert(p.attributes["title"]); //"undifined"
document.createAttribute() 不赞成使用
该方法创建属性节点。
接收一个参数，即要创建的属性节点的名称。
setNamedItem()
该方法向 NamedNodeMap 列表中添加或替换指定的属性节点。
接收一个参数，即要添加的向 NamedNodeMap 列表中添加或替换指定的属性节点。
如果此节点已存在，则将替换该节点，并返回被替换的节点，否则返回值是 null。
//p 元素有2个属性节点
<p id="myP" class="para">Some Text</p>
var p =document.getElementById("myP");
alert(p.attributes.length); //"2"
var attrT = document.createAttribute("title"); //创建属性节点 title
attrT.value = "text"; //给 title 节点赋值
p.attributes.setNamedItem(attrT); //给 p 元素的属性列表中添加 title 属性节点
//检测添加的属性节点
alert(p.attributes.length); //"3"
alert(p.attributes["title"].value); //"text"
一般开发人员用的最多的是 getAttribute()，setAttribute()，removeAttribute() 这些方法。
item()
接收一个参数，即想要访问的属性节点的索引数值。
返回位于指定索引的属性节点。
<p id="myP" class="para" title="text">Some Text</p>
var p =document.getElementById("myP");
console.log(p.attributes.item(1)); //返回属性列表中第二个属性节点
console.log(p.attributes.item(1).name); //"class"
console.log(p.attributes.item(1).value); //"para"
//再来回顾前三种访问属性节点列表中某个属性节点的方法
//方括号里面跟索引号
console.log(p.attributes[1]); //返回属性列表中第二个属性节点
console.log(p.attributes[1].name); //"class"
console.log(p.attributes[1].value); //"para"
//方括号里面跟属性名称
console.log(p.attributes["class"]); //返回属性列表中 class 属性节点
console.log(p.attributes["class"].name); //"class"
console.log(p.attributes["class"].value); //"para"
//geyNamedItem()里跟属性名称
console.log(p.attributes.getNamedItem("class")); //返回属性列表中 class 属性节点
console.log(p.attributes.getNamedItem("class").name); //"class"
console.log(p.attributes.getNamedItem("class").value); //"para"
