- DOM : 是表示和操作HTML文档内容的API
- DOM树:
根节点-Document节点-9 Element节点-1 Text节点-3 Comment节点-8 Attr节点-2
注意: document的爸爸是HTMLDocument , div,p,…等 元素节点的爷爷是HTMLElement, 文本节点的爸爸是Text, …
狠人话不多,直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM大结局</title>
</head>
<body>
<div >
<p>我是博主派来测试的小网页</p>
</div>
</body>
</html>
<script>
console.log(document.__proto__ ===HTMLDocument.prototype); //true
var div=document.getElementsByTagName("div")[0]; //拿到div元素节点
console.log(div.__proto__.__proto__ ===HTMLElement.prototype) //true
var text=document.getElementsByTagName("p")[0].firstChild; //拿到文本节点
console.log(text.__proto__ ===Text.prototype) //true
</script>
选取文档元素
-
document.getElementsByTagName() // 元素节点也有getElementsByTagName()方法
-
document.getElementsByClassName()
-
document.getElementById()
-
document.querySelector() //不具有实时性
-
document.querySelectorAll() //不具有实时性
-
document.body document.head document.documentElement(元素) document.forms … // document的快捷属性
一般的, 找到一大坨的方法返回的是NodeList对象(只读类数组) , 在控制台查看即可 -
1.作为结点树的文档
-
parentNode childNodes firstChild lastChild nextSibling previoursSibling
nodeType nodeValue(针对Text节点或Comment节点) nodeName
2 作为元素树文档 (只对文档的元素节点感兴趣)
parentElement children firstElementChild lastElementChild
nextElementSibling previousElementSibling childElementCount(等于children.length)
获取和设置属性
**HTML元素由标签(tag)和一组属性(attribute)**
获取或设置HTML行间属性(不管你是标准的还是非标准的属性!牛逼): getAttribute(),setAttribute() ,hasAttribute(),removeAttribute();
标准的属性: HTMLElement.Arrtibute ;
如果属性名与js保留字撞衫了,属性名前加html(属性名小驼峰写法)
例如 lable.htmlFor="pwd"; lable.className="lables";(class是例外,不尊守撞衫了规则)
HTML5 , 可以为元素定义属性名data-xxx的属性,通过dataset获取和设置
<p data-log="尼玛">test</p>
<script>
var p = document.getElementsByTagName('p')[0];
alert(p.dataset.log);
p.dataset.good="veryGood";
alert(p.getAttribute("data-good"));
</script>
innerHTML , outerHTML ,innerText , textContent 不逼逼了;
创建节点 插入节点 删除和替换节点
1 document.createElement() ; document.createText();
2 Node.appendChild() , Node.insertBefore()
3 Node.parentNode.removeChild(Node); Node.remove(); Node.replaceChild(新节点,Node);
注意: 将文档中已存在的节点插入到这个文档中,系统会自动删除该节点(类似剪切操作)