文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准接口
1、节点
1、获取子节点
- 父级.childNodes 标准浏览器下包含 文本或换行节点,而在IE8及以下,只包含元素节点
- 父级.children 所有浏览器一返回元素节点
返回的都是类数组,有长度,能通过下标获取某一个
<ul id="ul1">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
var ul = document.getElementById('ul1');
var li = ul.childNodes;
console.log(li);
var li = ul.children;
console.log(li);
2、节点的基本属性
节点基本属性有nodeType, nodeName, nodeValue
var p = document.querySelector('p');
var ul1 = document.getElementById('ul1');
var li = ul1.childNodes;
// 节点.nodeType : 节点类型,返回1--12的数字,代表12种类型
// 1:元素节点 2:属性节点 3:文本节点 9:文档节点
console.log(p.nodeType); // 1
console.log(ul1.nodeType); // 1
for (var i = 0; i < li.length; i++) {
console.log(li[i].nodeType);
}
// -----------------------
// 节点.nodeName : 节点名称
// 元素节点:返回元素节点的大写的标签名
// 文本节点:返回#text
console.log(p.nodeName); // P
console.log(ul1.nodeName); // UL
for (var i = 0; i < li.length; i++) {
console.log(li[i].nodeName);
}
// -------------------
// 节点.nodeValue : 节点内容
// 节点内容:认为只有文本才有节点内容
// 推荐用innerHTML innerText
console.log(p.nodeValue); // null
console.log(p.childNodes[0].nodeValue); // 11111111
3、父节点
- 元素.parentNode 返回元素的父级
- 元素.offsetParent 返回离它最近的有定位属性的父级,如果没有定位的父级,返回body
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
var box3 = document.getElementById('box3');
console.log(box3.parentNode);
console.log(box3.offsetParent);
4、其它节点
获取父节点下的第一个元素子节点
- 父元素.firstChild 在标准浏览器下,有可能返回文本节点,在IE8及以下,返回元素节点
- 父元素.firstElementChild 在标准浏览器下,返回第一个元素节点,在IE8及以下,没有这个方法
var ul1 = document.getElementById('ul1');
var first = ul1.firstElementChild || ul1.firstChild;
first.style.backgroundColor = 'red';
// 最后一个
var last = ul1.lastElementChild || ul1.lastChild;
last.style.backgroundColor = 'pink';
// 下一个兄弟节点
var next = first.nextElementSibling || first.nextSibling;
next.style.backgroundColor = 'yellow';
// 上一个兄弟节点
var prev = last.previousElementSibling || last.previousSibling;
prev.style.backgroundColor = 'green';
// ---------------------
// 推荐:如果找第一个和最后一个
var li = ul1.children;
console.log(li[0]); // 第一个
console.log(li[li.length - 1]); // 最后一个
5、属性操作
<div id="box" title="哈哈哈啊" abc="洋洋">平头哥</div>
// 1、点的形式 (不能操作标签上的自定义属性)
console.log(box.title);
box.title = '老王';
console.log(box.abc); // undefined
// 2、中括号的形式 (不能操作标签上的自定义属性)
console.log(box['title']);
box['title'] = '老马';
console.log(box['abc']); // undefined
// ------------------------------
// 元素.getAttribute(属性名); 获取
// 元素.setAttribute(属性名, 值); 设置
// 元素.removeAttribute(属性名); 删除
console.log(box.getAttribute('title'));
box.setAttribute('title', '老李');
console.log(box.getAttribute('abc')); // 操作自定义的
box.setAttribute('abc', '老洋');
box.setAttribute('ddd', '123')
box.removeAttribute('title');
dataset
<div id="box" data-abc="123" data-id-ab="小王">平头哥</div>
// IE10及以下不支持
var box = document.getElementById('box');
// ----------------------
console.log(box.dataset); // { abc → "123", idAb → "小王" }
console.log(box.dataset.abc);
console.log(box.dataset.idAb);
box.dataset.index = '456'; // 设置
delete box.dataset.abc; // 删除
2、操作节点
1、创建节点
- 创建标签:document.createElement(标签名);
- 创建文本:document.createTextNode(文本);
2、追加节点
-
父元素.appendChild(子元素);
子元素添加到父元素中,放到最后
3、插入节点
-
父元素.insertBefore(要插入的节点, 参考的节点);
要插入的节点放在参考元素的前面
4、删除节点
-
父元素.removeChild(被删除的元素)
返回被删除的元素
5、替换节点
- 父元素.replaceChild(新的节点,被替换的节点);
6、克隆节点
-
被克隆的元素.cloneNode(布尔);
返回克隆出来的新节点,如果参数为true,则克隆子孙节点,如果为false,则只克隆当前这个标签