Dom
-
定义
文档对象模型（Document Object Model）
是文档的编程接口。 -
作用
把web 页面和脚本/编程语言连接起来，
即访问或操作HTML文档、XHTML文档、XML文档中的节点元素。 -
原理
HTML文档是树状结构，根为<HTML>；
DOM也是树状结构，根为window或document对象。
所以DOM就可以把HTML以树状的形式呈现出来。
document 对象
-
定义
表示整个文档（window.document） -
作用
通过JavaScript对HTML页面中的所有元素进行访问、修改。 -
属性 = 能够获取或设置的值
-
innerText</a>
返回 元素内包含的文本内容
-
innerText</a>
-
innerHTML
返回元素的HTML结构（文本+标签） -
elem.children （HTMLCollection）
返回指定元素的子元素集合。只返回HTML节点，不返回文本节点。 -
elem.childNodes （NodeList）
返回指定元素的子元素集合，包括HTML节点，所有属性，文本。
Element对象
-
定义
表示HTML元素（比如<body> <span> 等） -
作用
DOM提供了一系列的方法可以进行元素的操作。 -
方法 = 能够执行的动作
-
查询
document节点：
document.getElementById// 匹配指定ID的元素节点
document.getElementsByClassName// 一个类数组的对象
document.getElementsByTagName// 一个类数组的对象
document.getElementsByName// 一个类数组的对象
document.querySelector// 第一个匹配指定的CSS选择器的元素节点。
document.querySelectorAll// 匹配指定的CSS选择器的所有节点集合
父节点：
parentObj.childNodes：子元素列表（NodeList）
parentObj.firstChild：第一个子元素
parentObj.lastChild：最后一个子元素
兄弟节点：
neighbourNode.nextSibling：下一个兄弟元素
子节点：
childNode.parentNode -
增加
appendChild：在元素末尾添加元素。
insertBefore：在元素之前插入元素。 -
删除
removeChild：从某个父节点中删除指定子节点。
-
-
修改
replaceChild：用新元素替换旧元素。 -
创建
document.createElement（"HTML标签"）：生成HTML元素节点。
document.createTextNode（"文本内容"）：生成文本节点。 -
属性 = 能够获取或设置的值
object.getAttribute：获取元素的值
object.setAttribute：设置元素属性
例
<div id="demo">
<p id="p1">hello world <span>123</span></p>
<p class="p2"> 饥人谷</p>
</div>
var parent = document.getElementById('d1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2')
属性：
console.log(p1.innerText);// hello world 123
console.log(p1.innerHTML);// <p id="p1">......</p>
查询：
console.log(document.getElementById('p1'));//<p id="p1">hello ...</p>
console.log(document.getElementsByClassName('p2')); //HTMLCollection[1]
console.log(document.getElementsByTagName('p')); //HTMLCollection[2]
console.log(document.querySelector('span')); // <span>123</span>
console.log(document.querySelectorAll('demo')); // NodeList[0]
console.log(demo.childNodes); // NodeList[5]
console.log(demo.firstChild); // #text
console.log(demo.lastChild); // #text
console.log(p1.nextSibling); // #text
console.log(p1.parentNode); // <div id="demo">...</div>
创建：
document.creatElement('p');--------->创建元素p
var txt = document.createTextNode('apple');--------->创建文本apple，并赋给txt
var txt2 = document.createTextNode('pen'); --------->创建文本pen，并赋给txt2
增加：
demo.appendChild(txt); ------------------->把apple添加到div末尾
修改：
demo.insertBefore(txt,p1); ------------------->把apple插入.p1之前
demo.replaceChild(txt2,txt); ------------------->用pen替换apple
删除：
demo.removeChild(p1);------------------->删除<p id="p1"> ...</p>
tip：
HTMLCollection VS. NodeList
-
定义：
NodeList 对象代表一个有顺序的节点列表。
HTMLCollection 是一个接口，表示 HTML 元素的集合。 -
相同：
1 都是类数组对象，都有length属性，可以通过for循环迭代
2 都是只读的
3 都是实时的，即文档的更改会立即反映到相关对象上面
(有一个例外，document.querySelectorAll返回的NodeList不是实时的)
4 都有item()方法，可以通过item(index)或item("id")获取元素 -
不同：
1 HTMLCollection对象具有namedItem()方法，可以传递id或name获得元素
2 HTMLCollection的item()方法和通过属性获取元素(document.forms.f1)可以支持id和name，而NodeList对象只支持id
网友评论