1. 节点关系
三种类型的节点
- 元素类型
- 文本类型
- 属性类型
操作html的三种方式
- html方式
- DOM核心方式
- XML方式
a. 创增删改
| 方法 | 解释 |
|---|---|
| createElement("") | 创建元素节点 |
| 插入节点 | |
| parent.appendChild(child) | 后面内部插入 |
| parent.insertBefore(new,node) | new 新插入的节点 node 在node节点前 |
| el.html(str) | 获取设置html内容 |
| el.text() | 获取设置文本内容 |
| el.value | 获取设置表单值 |
| el.cloneNode(true) | 复制节点 |
| parent.remove(child) | 父亲删除子节点 |
b. 节点
- 节点类型
nodeType 1-9
元素节点 1
文本节点 3 - nodeValue
节点的值 （文本值） - nodeName
节点的名称 （ 标签名）
c. Element类（元素节点类）
| --- | --- |
|---|---|
| parentElement | 父元素节点 |
| children | 子节点 |
| firstElementChild | 第一个子节点 |
| lastElementChild | 最后一个子节点 |
| previousElementSibling | 上一个兄弟元素 |
| nextElementSibling | 下一个兄弟元素 |
d. node类 （节点类）
| --- | --- |
|---|---|
| parentNode | 父节点 |
| childNodes | 子节点 |
| firstChild | 第一个子节点 |
| lastChild | 最后一个子节点 |
| previousSibling | 上一个兄弟元素 |
| nextSibling | 下一个兄弟元素 |
区别 :
node类型包含了文本节点和元素节点
兼容性 node类型更好，操作方便 Element更方便
e. 表格操作
| --- | --- |
|---|---|
| table.insertRow(n) | n插入到第几行 |
| row.insertCell(n) | n插入到第几列 |
| row.rowIndex | 返回当前是第几行 |
| table.deleteRow(n) | 删除第n行 |
f. 距离相关
宽高
window.innerWidth 可视区宽
window.innerHeight 可以区域高
document.documentElement.offsetHeight 文档高
document.documentElement.offsetWidth 文档宽
el.clientWidth
el.clentHeight
内容+padding(内边距) 的宽高
el.offsetHeight
el.offsetWidth
内容+padding(内边距)+border(边框)的宽高
el.scrollHeight
el.scrollWidth
内容+padding(内边距)+滚动区域的宽高
偏移值
getBoundingClientRect
x
y
width 宽
height 高
top 距离可视区域的top
bottom 距离可视区域的底部偏移值
right 距离可视区域的右侧偏移值
offsetTop 可以获得 HTML 元素距离上方或外层元素的位置
offsetLeft
clientTop 获取元素上边框的高度
滚动值
scrollTop滚动顶部的值
scrollLeft滚动左侧的值
HTMLCollection 对象
getElementsByTagName() 方法返回 HTMLCollection 对象。
HTMLCollection 对象是类数组的 HTML 元素列表（集合）。
下面的代码选取文档中的所有 <p> 元素：
<h1>JavaScript HTML DOM</h1>
<p>Hello World!</p>
<p>Hello China!</p>
<p id="demo"></p>
<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
"第二段的 innerHTML 是：" + myCollection[1].innerHTML;
</script>
HTML HTMLCollection 长度
length 属性定义了 HTMLCollection 中元素的数量：
实例
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;
HTMLCollection 并非数组！
HTMLCollection 也许看起来像数组，但并非数组。
您能够遍历列表并通过数字引用元素（就像数组那样）。
不过，您无法对 HTMLCollection 使用数组方法，比如 valueOf()、pop()、push() 或 join()。
HTML DOM NodeList 对象
NodeList 对象是从文档中提取的节点列表（集合）。
NodeList 对象与 HTMLCollection 对象几乎相同。
如使用 getElementsByClassName() 方法，某些（老的）浏览器会返回 NodeList 对象而不是 HTMLCollection。
所有浏览器都会为 childNodes 属性返回 NodeList 对象。
大多数浏览器会为 querySelectorAll() 方法返回 NodeList 对象。
下面的代码选取文档中的所有 <p> 节点：
实例
var myNodeList = document.querySelectorAll("p");
NodeList 中的元素可通过索引号进行访问。
如需访问第二个 <p> 节点，您可以这样写：
y = myNodeList[1];
注释：索引从 0 开始。
HTML DOM Node List 长度
length 属性定义节点列表中的节点数：
实例
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;
例子解释：
- 创建所有 <p> 元素的列表
- 显示该列表的长度
length 属性在您希望遍历节点列表中的节点时很有用：
实例
改变节点列表中所有 <p> 元素的背景色：
var myNodelist = document.querySelectorAll("p");
var i;
for (i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.backgroundColor = "red";
}
HTMLCollection 与 NodeList 的区别
HTMLCollection（前一章）是 HTML 元素的集合。
NodeList 是文档节点的集合。
NodeList 和 HTML 集合几乎完全相同。
HTMLCollection 和 NodeList 对象都是类数组的对象列表（集合）。
它们都有定义列表（集合）中项目数的 length 属性。
它们都可以通过索引 (0, 1, 2, 3, 4, ...) 像数组那样访问每个项目。
访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号。
访问 NodeList 项目，只能通过它们的索引号。
只有 NodeList 对象能包含属性节点和文本节点。
节点列表不是数组！
节点数组看起来像数组，但并不是。
您能够遍历节点列表并像数组那样引用其节点。
不过，您无法对节点列表使用数组方法，比如 valueOf()、push()、pop() 或 join()。
网友评论