HTMLDOM对象的属性和方法介绍

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

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，也就是浏览器地址栏中的全部地址信息。

⽐如我打开了⼀个页⾯，浏览器地址栏中的信息显⽰如下：
/cqhaibin/p/6291640.html
这些信息就是当前⽂档完整的 URL。

var url = document.URL;//返回当前⽂档完整的URL
domain
该属性返回当前⽂档的服务器域名。

还是上⾯的地址，域名就是。

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 = stModified;//返回当前⽂档最后被修改的⽇期和时间
还是以 /cqhaibin/p/6291640.html 这个页⾯为例，在控制台输⼊以下代码：
stModified; //输⼊这⾏代码
"01/17/2017 11:58:34" //返回的信息
cookie
这个属性可以访问和设置与当前⽂档相关的所有 cookie。

var cookie = document.cookie;//返回与当前⽂档相关的所有cookie
1.2 ⽅法
查找元素
getElementById()
该⽅法接受⼀个参数，即希望获取的元素的 ID 名称。

找到相应的元素后会返回该元素。

some text
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(dItem("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_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>
alert(document.getElementById('rank').nodeName); //"OL"
nodeValue
该属性返回节点的值，值取决于节点的类型。

ownerDocument
该属性返回整个⽂档对象。

在对返回来的对象进⾏第⼀个⼦节点检测时，返回的是⽂档声明：<!DOCTYPE ………………………………>。

<ol id="rank">
<li>第⼀名：张⽔⽔</li>
<li>第⼆名：黄糊糊</li>
<li>第三名：安莘婉</li>
</ol>
some text
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(stChild); //返回最后⼀个 li 元素
alert(rank.childNodes[rank.childNodes.length - 1]); //返回最后⼀个 li 元素
alert(stChild.firstChild.nodeValue); //"第三名：安莘婉"
alert(rank.childNodes[rank.childNodes.length - 1].firstChild.nodeValue); //"第三名：安莘婉"
stChild = someNode.childNodes[someNode.childNodes.length - 1]
作为⼦节点有⽤的属性
parentNode
该属性返回⼦节点的⽗节点。

快过年了，说点什么好呢？
<ul>
<li>新年快乐</li>
<li>万事如意</li>
<li id="djb">最后祝你新年⼤吉吧</li>
var djb = document.getElementById("djb");//获得对 id="djb" 的 li 元素的引⽤
alert(djb.parentNode.nodeName); //"UL"
previousSibling
在 childNodes 列表中每个节点相互之间都是同胞节点。

该属性返回 childNodes 列表中该⼦节点的上⼀个同胞节点。

快过年了，说点什么好呢？
<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 列表中该⼦节点的下⼀个同胞节点。

快过年了，说点什么好呢？
<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 列表中的某个节点。

接收⼀个参数，即要移除的节点。

返回移除的节点。

接收⼀个布尔值参数，表⽰是否执⾏深复制。

true 进⾏深复制；false 进⾏浅复制。

深复制，复制节点及其整个⼦节点树；浅复制，只复制节点本⾝。

返回被复制的节点。

normalize()
该⽅法删除空的⽂本节点；把相邻的⽂本节点合并为⼀个⽂本节点。

3.Element 类型
Element 类型⽤于表⽰ HTML 元素，提供了对元素标签名，⼦节点和属性的访问。

3.1 属性
id
设置或返回元素的元素的 id 属性值。

title
设置或返回元素的元素的 title 内容。

lang
设置或返回元素的元素内容的语⾔代码，很少使⽤
dir
设置或返回元素的语⾔的⽅向，ltr，左到右；rt，右到左。

很少使⽤
className
设置或返回元素的 class 属性的值。

tagName
返回元素的标签名。

在 HTML 中，tagName 属性的返回值始终是⼤写的。

Some Text
var p = document.getElementById('myP');
alert(p.id); //"myP"
alert(p.className); //"para"
alert(p.title); //"text"
alert(ng); //"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。

Some Text
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()
该⽅法添加指定的属性，并为其赋指定的值。

接收两个参数，第⼀个参数为要添加的属性的名称，第⼆个参数为要添加的属性值。

属性名称和属性值都要⽤引号括起来。

⽆返回值。

Some Text
var p =document.getElementById("myP");
alert(p.getAttribute("class")); //"null"
p.setAttribute("class", "para"); //设置 class 属性并赋值 "para"
alert(p.getAttribute("class")); //"para"
removeAttribute()
该⽅法删除指定的属性。

接收⼀个参数，希望删除指定属性的名称。

属性名称要⽤引号括起来。

⽆返回值。

Some Text
var p =document.getElementById("myP");
alert(p.getAttribute("class")); //"para"
p.removeAttribute("class"); //移除 class 属性
alert(p.getAttribute("class")); //"null"
4. Text 类型
⽅法
document.createTextNode()
该⽅法创建⽂本节点。

接收⼀个参数，即要插⼊的⽂本内容。

返回创建的⽂本节点。

//页⾯空空
//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
返回属性列表中属性节点的个数。

Some Text
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()
接收⼀个参数，即想要返回的属性节点的属性名称。

返回指定属性名称的属性节点。

Some Text
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()
接收⼀个参数，即想要删除的属性节点的属性名称。

返回删除的指定属性名称的属性节点。

Some Text
var p =document.getElementById("myP");
alert(p.attributes["title"]); //返回属性 title 节点
p.attributes.removeNamedItem("title"); //移除 title 属性节点
alert(p.attributes["title"]); //"undifined"
setNamedItem()
该⽅法向NamedNodeMap 列表中添加或替换指定的属性节点。

接收⼀个参数，即要添加的向NamedNodeMap 列表中添加或替换指定的属性节点。

如果此节点已存在，则将替换该节点，并返回被替换的节点，否则返回值是 null。

//p 元素有2个属性节点
Some Text
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()
接收⼀个参数，即想要访问的属性节点的索引数值。

返回位于指定索引的属性节点。

Some Text
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"
总结：
按数字索引访问某项：element.attributes[number]，element.attributes.item(number)。

按字符串索引访问某项：element.attributes[string]，element.attributes.getNamedItem(string)。