文章目录
一、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>//345
ps: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);//#document
ps: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()