HTML DOM对象的属性和方法
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 名称。找到相应的元素后会返回该元素。(通过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 特性值相同,只返回第一个元素。
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
<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>元素
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
getElementsByName()
这个方法接受一个参数,即 name 属性的值,返回带有给定 name 属性值的所有元素。常用此方法取得单选按钮。
这个方法也会返回一个 HTMLCollection 对象。(通过name属性查找元素,返回一个匹配的元素数组)
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
<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 属性的值
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
getElementsByClassName()
HTML 5 定义了该方法。(通过class查找元素,返回一个匹配的元素数组)
这个方法接受一个参数,即 class 特性值,返回带有给定 class 特性的所有元素。
<p class="jereh">杰瑞集团1</p>
<p class="jereh">杰瑞集团2</p>
var result = document.getElementsByClassName("jredu"); //返回一个数组,包含所有 class为jereh的元素 alert(result[0].innerHTML); //返回第一个数组中的文本
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
该属性返回节点的名称,是元素的标签名。
返回的标签名是大写字母。
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
<ol id="rank">
<li>第一名:张水水</li>
<li>第二名:黄糊糊</li>
<li>第三名:安莘婉</li>
</ol> alert(document.getElementById('rank').nodeName); //"OL"
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
nodeValue
该属性返回节点的值,值取决于节点的类型。
ownerDocument
该属性返回整个文档对象。
在对返回来的对象进行第一个子节点检测时,返回的是文档声明:<!DOCTYPE ………………………………>。
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
<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 ………………>
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
- 作为父节点拥有的属性
childNodes
(通过父元素去查找所有的子元素 有bug不允许父元素和子元素换行)
该属性返回一个 NodeList 对象。
NodeList 对象是一种类数组对象,保存着一组有序的节点,可以通过方括号语法和 item() 方法访问 NodeList 对象中的项。
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
<ol id="rank">
<li>第一名:张水水</li>
<li>第二名:黄糊糊</li>
<li>第三名:安莘婉</li>
</ol> var rank = document.getElementById("rank"); //获取 ol 元素
alert(rank.childNodes.length); //"7",返回 ol 元素的子节点个数
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
有的浏览器会把元素之间的空白处算作一个文本节点。
本例中 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
该属性返回父节点的第一个子节点。(通过父元素去查找第一个子元素,这种写法有bug,不允许父元素和子元素换行)。
(firstElementChild:通过父元素去查找第一个子元素,允许元素换行)。
<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.innerHTML); //"第一名:张水水"
alert(rank.firstChild.firstChild.nodeValue); //"第一名:张水水"
alert(rank.childNodes[0].firstChild.nodeValue); //"第一名:张水水"
lastChild
该属性返回父节点的最后一个子节点。
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
<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.innerHTML); //"第三名:安莘婉"
alert(rank.lastChild.firstChild.nodeValue); //"第三名:安莘婉"
alert(rank.childNodes[rank.childNodes.length - 1].firstChild.nodeValue); //"第三名:安莘婉"
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
someNode.lastChild = someNode.childNodes[someNode.childNodes.length - 1]
- 作为子节点有用的属性
parentNode
该属性返回子节点的父节点。
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
<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"
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
previousSibling
在 childNodes 列表中每个节点相互之间都是同胞节点。
该属性返回 childNodes 列表中该子节点的上一个同胞节点。(previousSibling这种写法有bug,不允许父元素和子元素换行)(previousElementSibling 这种写法元素可以换行)
<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 列表中该子节点的下一个同胞节点。(nextSibling这种写法有bug,不允许父元素和子元素换行)(nextElementSibling 这种写法元素可以换行)
<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。
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
<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"
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
appendChild()
该方法向 NodeList 列表中的末尾添加一个节点。
接收一个参数,即要添加的节点。
该方法返回新添加的节点。
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
//代码
<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 元素 //刷新页面
新年快乐
万事如意
最后祝你新年大吉吧
我是新增项,被放在元列表的末尾处
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
insertBefore()
该方法向 NodeList 列表中指定位置之前插入节点,不局限于最后一位。
接收两个参数,第一个是要插入的节点,第二个是指定位置的节点。如果第二个参数未指定,则会在列表末尾插入新节点。
该方法返回新插入的节点。
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
//代码
<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 元素插入到列表的第二个位置处 //刷新页面
新年快乐
我是新增项,被插在了列表的第二位置处
万事如意
最后祝你新年大吉吧
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
replaceChild()
该方法用一个新节点替换 NodeList 列表中的某个节点。
接收两个参数,第一个是要插入的节点(这个节点可以是文档中某个已存在的节点,或者是创建的新节点),第二个是要替换的节点。
该方法返回被替换的节点。
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
//代码
<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 元素替换了原列表中第二项 //刷新页面
新年快乐
我是新增项,替换了原列表的第二项
最后祝你新年大吉吧
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
removeChild()
该方法移除 NodeList 列表中的某个节点。
接收一个参数,即要移除的节点。
返回移除的节点。
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
//代码
<ul id="words"><li>新年快乐</li><li>万事如意</li><li>最后祝你新年大吉吧</li></ul> //页面显示
新年快乐
万事如意
最后祝你新年大吉吧 var words = document.getElementById("words"); //获得对 id="words" 的 ul 元素的引用
words.removeChild(words.firstChild); //移除原列表的第一项 //刷新页面
万事如意
最后祝你新年大吉吧
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
- 所有节点都有的方法
cloneNode()
该方法可以创建一个完全相同的副本。
接收一个布尔值参数,表示是否执行深复制。true 进行深复制;false 进行浅复制。
深复制,复制节点及其整个子节点树;浅复制,只复制节点本身。
返回被复制的节点。
normalize()
该方法删除空的文本节点;把相邻的文本节点合并为一个文本节点。
3.Element 类型
Element 类型用于表示 HTML 元素,提供了对元素标签名,子节点和属性的访问。
3.1 属性
id
设置或返回元素的元素的 id 属性值。
title
设置或返回元素的元素的 title 内容。
lang
设置或返回元素的元素内容的语言代码,很少使用
dir
设置或返回元素的语言的方向,ltr,左到右;rt,右到左。很少使用
className
设置或返回元素的 class 属性的值。
tagName
返回元素的标签名。
在 HTML 中,tagName 属性的返回值始终是大写的。
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
<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" 大写
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
innerHTML
返回元素的文本。
<h1>青岛理工大学</h1>
var h1 = document.getElementsByTagName("h1");
console.log(h1[].innerHTML); //返回文本“青岛理工大学”。
3.2 方法
document.createElement()
创建新元素。
接收一个参数,即要创建元素的标签名。
返回新创建的元素。
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
//页面空空 //写代码
var p = document.createElement("p"); //创建 p 元素
var pText = document.createTextNode("Some text"); //创建文本节点
p.appendChild(pText); //给 p 元素添加文本节点
document.body.appendChild(p); //给 body 元素添加 p 元素 //刷新页面
Some text
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
getAttribute()
该方法取得元素的属性。
接收一个参数,即需要获得属性值的属性名称。属性名称要用引号括起来。
返回指定属性的值。如果指定属性不存在,则返回 null。
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
<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"
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
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()
该方法创建文本节点。
接收一个参数,即要插入的文本内容。
返回创建的文本节点。
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
<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
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
normalize()
如果父节点包含两个或多个文本节点,父节点在调用了该方法后,会把所有文本节点合并为一个文本节点。
无参数。
splitText()
该方法会把一个文本节点分成两个文本节点。
接收一个参数,参数为数字,为指定分割的位置值。
原来的文本节点将包括为从开始到分割位置之前的内容。
该方法返回一个新文本节点,包括从分割位置开始(包含分割位置的文本)到结束的内容。
5.Attribute 类型
Attributes 属性包含一个 NamedNodeMap 对象,与 NodeList 类似,是一个动态集合。
一个元素的所有属性节点都在这个集合中。
NamedNodeMap 对象有 length 属性,即一个元素所有属性的个数。
5.1 属性
name
该属性返回指定属性的名称。
value
该属性返回指定属性的值。
specified
该属性值是布尔值。
如果在文档中设置了属性值,则返回 true,如果是 DTD/Schema 中的默认值,则返回 false。
length
返回属性列表中属性节点的个数。
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
<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"
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
5.2 方法
getNamedItem()
接收一个参数,即想要返回的属性节点的属性名称。
返回指定属性名称的属性节点。
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
<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"
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
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"
setNamedItem()
该方法向 NamedNodeMap 列表中添加或替换指定的属性节点。
接收一个参数,即要添加的向 NamedNodeMap 列表中添加或替换指定的属性节点。
如果此节点已存在,则将替换该节点,并返回被替换的节点,否则返回值是 null。
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
//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"
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
一般开发人员用的最多的是 getAttribute(),setAttribute(),removeAttribute() 这些方法。
item()
接收一个参数,即想要访问的属性节点的索引数值。
返回位于指定索引的属性节点。
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
<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"
![HTML DOM对象的属性和方法 HTML DOM对象的属性和方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
总结:
按数字索引访问某项:element.attributes[number],element.attributes.item(number)。
按字符串索引访问某项:element.attributes[string],element.attributes.getNamedItem(string)。