文章目录
一、DOM Document节点
DOM全称为Document Object Model，即文档对象模型。它是一套用来管理控制html文档的规则。而Document节点则是一种具象化的表现形式。
假设我们把整个html文档看成是一个对象，那么这个对象就是Document节点。
而我们如何操作控制这个对象的标准，就是DOM。
dom中规定html页面中的所有元素都是节点。
document节点又被叫做document对象。每个载入浏览器的 HTML 文档都会成为 document对象。
document对象使我们可以从脚本中对HTML页面中的所有元素进行访问。
document是html文档的根节点，每张网页都有自己的document节点。window.document属性就指向这个节点。也就是说只要浏览器开始载入HTML文档，这个节点对象就存在了，可以直接调用。
二、Document节点属性
document节点，自己本身是一个对象（也就是由字典构成的一系列的键值对），因此里面有很多的键名和键值，也就是属性和对应的属性的值。
然后，其中有些属性，本身又是一个节点，也就是一个对象，可以继续深层次往下走，如documentElement，有些则是单纯的document节点的属性，只有一层对应的值。
2.1 document下的节点
Document节点下面，有两个子节点：
-
doctype:它也是一个对象，包含文档信息，对于HTML5文档而言，它代表了<!doctype html>
var doctype = document.doctype; console.log(doctype); // "<!DOCTYPE html>" console.log(doctype.name); // "html"
2.1.1 document子节点
-
documentElement: 是文档的根节点，在document.doctype节点后面，它返回的是html节点重的内容，就可以通过改节点访问页面中的其他子节点。
document.documentElement console.log(document.documentElement);
这两个节点可能是为了访问方便，提上来的，并不是document的子节点
- body 节点 返回body标签内的内容
- head: 节点 返回head 标签的内容
2.1.2 document的文档信息属性：
-
documentURI 或URL
返回文档的当前网址，其中URL属性只有HTML文档才有 -
domain 返回当前文档的域名
-
lastModified
lastModified属性返回当前文档（网页）最后修改的时间戳，格式为字符串。
语法：document.lastModified
console.log(document.lastModified);//"05/30/2016 20:59:58“
注意，lastModified属性的值是字符串，所以不能用来直接比较。如果想要比较两个文档谁的日期更新，需要用转成时间戳格式才能进行比较。
if (Date.parse(doc1.lastModified) > Date.parse(doc2.lastModified)) {
// …
}ps：Date.parse方法能够将时间格式字符串转换成时间戳格式
-
location
属性返回一个只读对象
返回完整的URL：document.location.href
返回当前遵守协议：document.location.protocol
返回当前页面域名+端口号：document.location.host
返回当前页面域名：document.location.hostname
返回当前页面端口号，如果不存在则返回空：document.location.port
返回当前页面在服务器中路径：document.location.pathname
返回当当前页面URL中的查询字符串：document.location.search
跳转到另一个网址：document.location.assign(‘http://www.google.com’)location中有关的其他内容：
以下方法效果相同，都能够改变当前页面的url：
location.assign(‘传递一个url’);
window.location = ‘传递一个url’;
location.href = ‘传递一个url’; <常用>reload():重新加载当前显示的页面。
location.reload(false): // 优先从本地缓存重新加载
location.reload(true)😕/优先从服务器重新加载location对象的search属性代表URL的查询字符串（包括?）
// 查询字符串为 ?id=x&sort=name
var search = window.location.search;
search = search.slice(1); // 得到 ‘id=x&sort=name’
search = search.split(’&’); // 得到数组 [‘id=x’, ‘sort=name’] -
title 返回文档标签，属性可写
-
characterSet 返回文档的字符集
-
readyState 返回当前文档的加载状态：loading 在加载html代码 interactive在加载外部资源 complete全部加载完成
2.1.3 anchors,forms,images,links,scripts：返回文档内部特定元素的集合。
这些集合都是动态的，原节点有任何变化会立刻反映在集合中。
【anchors】
anchors属性返回 网页中所有指定了name属性的a节点元素 构成的类数组。
【forms】
forms属性返回 网页中所有表单 构成的数组。
【images】
images属性返回 网页中所有图片 构成的数组
【links】
links属性返回 网页中所有链接元素(即带有href属性的a标签) 构成的数组
【scripts】
scripts属性返回 网页中所有的脚本 构成的数组
三、Document节点操作页面元素
3.1 选中元素
-
【querySelector()】方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件则返回第一个匹配的节点。如果没有发现匹配的节点则返回null。
<style>.lianJie{color:red;}</style> <a href="#" name="a1" class="lianJie">345</a> <a href="#" name="a2" class="lianJie">123</a> <script> var temp = document.querySelector(".lianJie"); console.log(temp.innerText); </script>//345ps：querySelector是匹配的选择器，那么如果是选择器为id时，参数应该是"#id名"
-
【querySelectorAll()】方法,，返回所有满足条件的，多个是一个对象
-
【getElementById()】返回匹配指定ID属性的元素节点
-
【getElementsByTagName()】返回所有指定标签的元素
-
【getElementsByClassName()】//返回符合指定类名的所有元素
-
【getElementsByName()】 用于选择拥有name属性的HTML元素
3.2 创建页面元素
-
【createElement()】生成html元素节点
语法：document.createElement(“标签名”);
var newp = document.createElement(“p”); document.body.appendChild(newp);因为直接创建一个按钮根本没办法直观看到，因此通过.appendChild方式添加到body当中。.appendChild()方法的作用能够将代码创建的元素添加到指定位置。
-
【createTextNode()】生成文本节点，参数为所要生成的文本节点的内容
var newp = document.createElement(“p”); var p_text = document.createTextNode(“这是p的文本节点内容”); newp.appendChild(p_text); document.body.appendChild(newp); -
【createAttribute()】生成一个新的属性对象节点，并返回它
var newp = document.createElement("p"); var p_text = document.createTextNode("here is p text Node"); newp.appendChild(p_text); var p_style = document.createAttribute("style"); p_style.value = "color:cyan;"; newp.setAttributeNode(p_style); document.body.appendChild(newp);逻辑：
- 创建一个元素节点（标签）
- 创建一个文本节点（标签的内容）
- 将文本节点添加到元素节点中
- 创建一个属性节点（style）
- 为属性节点赋值 （样式的内容）
- 将属性节点设置到元素节点上
- 将元素节点添加在Body内
3.3 操作页面元素
-
【元素节点特性方法getAttribute()、setAttribute()和removeAttribute() 】
操作Element节点的CSS样式，最简单的方法之一就是使用节点对象的getAttribute方法、setAttribute方法和removeAttribute方法，读写或删除HTML元素的style属性。
语法：getAttribute(‘属性名’);
setAttribute(‘属性名’,‘属性值’);
removeAttribute(‘属性名’);
var div1 = document.querySelector("div");
div1.setAttribute('style','width:200px; height:200px; background-color:red; border:1px solid black;');
console.log(div1.getAttribute('style'));
div1.removeAttribute('style');
-
【元素节点的style属性】
Element节点本身还提供style属性，用来操作CSS样式。style属性指向一个对象，用来读写页面元素的行内CSS样式。
var divStyle = document.querySelector('div').style; divStyle.backgroundColor = 'red'; divStyle.border = '1px solid black'; divStyle.width = '100px'; divStyle.height = '100px'; divStyle.cssFloat = 'left';元素的style对象对应元素的style属性，style对象中的样式与元素style属性中的样式名是一一对应的，但是需要一点点改写规则:
a.将横杠从CSS属性名中去除，然后将横杠后的第一个字母大写
b.CSS属性名是JavaScript保留字的，在属性名之前需要加上字符串“css”
c.style对象的属性值都是字符串，而且包括单位。 -
【元素节点的style属性的cssText写法】
style对象的cssText属性可以用来读写或删除整个style属性。因此刚才的写法可以改写成：
divStyle.cssText = 'background-color:red;border:1px solid black;height:100px;width:100px;';
-
【元素节点的style属性方法setProperty()、getPropertyValue()和removeProperty() 】
style对象提供了三个方法来读写行内css规则：
setProperty(propertyName,value)：设置某个CSS属性。
getPropertyValue(propertyName)：读取某个CSS属性。
removeProperty(propertyName)：删除某个CSS属性。
这三个方法的第一个参数，都是CSS属性名，且不用改写连词线。
var divStyle = document.querySelector('div').style;
divStyle.setProperty('background-color','red');
divStyle.getPropertyValue('background-color');
divStyle.removeProperty(‘background-color’);
四、Node的使用
DOM是文档对象模型的简称。它的基本思想是：
把结构化文档解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。
所有的节点和最终的树状结构，都有规范的对外接口，以达到使用编程语言操作文档的目的（比如增删内容）。
所以，DOM可以理解成文档的编程接口。
node是DOM的最小组成单位，一个文档的树形结构就是由各种不同类型的节点组成。
4.1 node属性
(1)通用属性：nodeName、nodeType
nodeName属性返回节点的名称，nodeType属性返回节点的常数值
例如：
document.nodeName // "#document"
document.nodeType // 9
(2)返回当前node的相关节点属性：ownerDocument、nextSibling，previousSibling，parentNode，parentElement
-
ownerDocument属性返回当前节点所在的顶层文档对象，即document对象。
var d = p.ownerDocument; d === document // true console.log(d.nodeName);//#documentps：document对象本身的ownerDocument属性，返回null。
-
nextSibling属性返回紧跟在当前节点后面的第一个同级节点。
如果当前节点后面没有同级节点，则返回null。var el = document.getElementById('div-01').firstChild; var i = 1; while (el) { console.log(i + '. ' + el.nodeName); el = el.nextSibling; i++; }上面代码遍历div-01节点的所有子节点。
ps：从上述代码中能够得到的是，该属性还包括文本节点和评论节点。因此如果当前节点后面有空格，该属性会返回一个文本节点，内容为空格
-
previousSibling 属性返回当前节点前面的第一个同级节点。
如果当前节点前面没有同级节点，则返回null。 -
parentNode属性返回当前节点的父节点。
如果当前节点没有父节点，则返回null（document节点）。if (node.parentNode) { node.parentNode.removeChild(node); }上述代码展示了如何从父节点移除指定节点
-
parentElement属性返回当前节点的父元素节点。
如果当前节点没有父节点，或者父节点类型不是Element节点，则返回null。if (node.parentElement) { node.parentElement.style.display = 'none'; }上面代码设置了指定节点的父元素节点的CSS属性。
ps：parentElement是ie所独有的属性，其能实现的功能parentNode都能够实现。可以说parentNode是parentElement的标准版本。
(3)返回node内容属性：textContent，nodeValue
- textContent属性返回当前节点和它的所有后代节点的文本内容。
// HTML代码为
// <div id="divA">This is <span>some</span> text</div>
// JS代码为
document.getElementById(“divA”).textContent// This is some text
上述代码的textContent属性，自动忽略当前节点内部的HTML标签，返回所有文本内容。
- textContent属性返回当前节点和它的所有后代节点的文本内容。
// HTML代码为
// <div id="divA">This is <span>some</span> text</div>
// JS代码为
document.getElementById(“divA”).textContent// This is some text
上述代码的textContent属性，自动忽略当前节点内部的HTML标签，返回所有文本内容。
(4)返回当前node子节点相关属性：childNodes，firstChild，lastChild
-
childNodes属性返回一个节点集合(NodeList)，节点集合中包括当前节点的所有子节点。
需要指出的是，除了HTML中的元素节点之外，该属性返回的还包括Text节点和Comment节点。
如果当前节点不包括任何子节点，则返回一个空的NodeList集合。
由于NodeList对象是一个动态集合，一旦子节点发生变化，立刻会反映在返回结果之中。/*<body> <ul id="ul" name="ul"><li id="li-1" name="li-1">111</li></ul> <button id="btn">oooooo</button> </body>*/ <script> var ulNodes = document.querySelector('ul').childNodes; console.log(ulNodes); document.getElementById('btn').onclick = function() { var newli = document.createElement('li');//创建一个新节点 var newli_text = document.createTextNode('222'); newli.appendChild(newli_text); document.getElementById('ul').appendChild(newli); console.log(ulNodes); //没有再次获取所有子节点，变化仍然反映在了NodeList中 }; -
firstChild属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null。
需要指出的是，除了HTML元素子节点，该属性还包括文本节点和评论节点。 -
lastChild属性返回当前节点的最后一个子节点，如果当前节点没有子节点，则返回null
4.2 node的方法
（1)appendChild()，hasChildNodes()
appendChild()方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点
var p = document.createElement("p");
document.body.appendChild(p);
hasChildNodes()方法返回一个布尔值，表示当前节点是否有子节点。
var foo = document.getElementById("foo");
if ( foo.hasChildNodes() ) {
foo.removeChild( foo.childNodes[0] );
}
上述代码表示，如果foo节点有子节点，就移除第一个子节点。
(2)cloneNode()，insertBefore()，removeChild()，replaceChild()
(3)contains()，isEqualNode()
212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
