07-17 DOM模型的新手入门1
2018-07-18 本文已影响0人
埋没猿
DOM 文档对象模型
什么是DOM:
DOM是JS操作网页的接口,全称为"文档对象模型",它的作用是将网页转化为一个JS对象,从而可以用脚本进行各种操作(怎删改查)。
DOM树:
浏览器会根据DOM模型,将结构化文档( 比如HTML )解析成一系列的节点,再由这些节点组成一个树状结构。
节点：
DOM中的最小组成单位就是node，文档的树型结构就是有各种不同的节点组成。
7种节点:
Document: 整个文档树的顶层节点;
DocumentType: doctype标签 < !doctype html >;
Element: 网页的各种HTML标签 ( 如<body>,<a>等 );
Attribute: 网页元素的属性 ( 比如class;src等 );
Text: 标签之间或标签包含的文档;
Commont: 注释;
DocumentFragment: 文档的片段;
节点属性:
-- nodeType -- 返回一个整数值,表示节点的类型;
-- nodeName -- 返回节点的名称;
文档节点: #document;
元素节点: 大写的标签名;
属性节点: 属性的名称;
文本节点: #Text;
文档片段节点: #document-fragment;
文档类型节点: 文档的类型;
注释节点: #comment;
--nodeValue -- 返回节点的文本值,可读可写;
<body>
<div id="a1">你好</div>
</body>
<script>
var a1 = document.getElementById('a1')
console.log(a1.nodeValue) //null
//因为获取的是标签节点,而不是文本节点.
console.log(a1.firstChild.nodeValue) //你好
</script>
-- textContent -- 返回当前节点和他所有后代节点的文本,会忽略掉标签;
同样 textContent 也是一个可读可写的属性,如果写入的内容包含标签,也会做
文本;
<body>
<div id="div1">你好<p>世界</p></div>
</body>
<script>
var div1 = document.getElementById('div1')
console.log(div1.textContent) //你好世界
</script>
--nextSibling -- 返回当前节点的下一个兄弟节点,如果不存在下一个兄弟节点,
则返回null;
<body>
<div id="div2">111</div><div>222</div><div>333</div>
</body>
<script>
var div2 = document.getElementById('div2')
console.log(div2.nextSibling) //<div>222</div>;记住不能换行
</script>
遍历所有节点:
<script>
var el = document.getElementById('div3').firstChild;
while( el !== null ){
console.log(el.nodeName);
el = el.nextSibling;
}
</script>
--parentNode -- 返回当前节点的父级结点,只可能是document文档节点或元素节
点和他本身;
-- parentElement -- 返回当前节点的父级元素结点,和上面prentNode相同的效果
没有则返回null;
<body>
<div>111<div>222</div><a href="" id="a1">333</a></div>
</body>
<script>
var a1 = document.getElementById('a1')
console.log(a1.parentNode)
console.log(a1.parentElement)
// <div>
// "111"
// <div>222</div>
// <a href id="a1">333</a>
// </div>
</script>
-- firstChild -- 返回当前节点的第一个子节点
-- lastChild -- 返回当前节点的最后一个子节点
<body>
<div id="div4">1<div>2</div><div>3</div></div>
</body>
<script>
var div4 = document.getElementById('div4')
console.log(div4.firstChild) //"1"
console.log(div4.lastChild) //<div>3</div>
//如果没有,则返回null;
</script>
-- childNodes -- 返回当前元素的所有子节点,是一个nodelist数据
<body>
<div id="div4">1<div>2</div><div>3</div></div>
</body>
<script>
var div4 = document.getElementById('div4')
console.log(div4.childNodes)
//▶NodeList(3) [text,div,div]
</script>
