1、获取节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>111111</p> <ul id="ul1"> <li>11111</li> <li>22222</li> <li>33333</li> <li>44444</li> </ul> </body> </html>
节点树（家谱）
2、获取子节点
-
元素.childNodes 在标准浏览器下，返回的可能有文本节点，在IE8及以下，只返回元素节点
-
元素.children 只返回元素节点（推荐）
<ul id="list"> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> </ul>
var ul = document.getElementById('list'); // var li = ul.childNodes; var li = ul.children; console.log(li);
3、节点的基本属性
节点基本属性有nodeType(节点类型), nodeName(节点名), nodeValue(节点内容)
var p = document.querySelector('p'); var ul = document.querySelector('ul'); var li = ul.childNodes; // 元素.nodeType 元素节点1 属性节点2 文本节点3 文档节点9 console.log(p.nodeType); // 1 元素节点 for (var i = 0; i < li.length; i++) { console.log(li[i].nodeType); } // ---------------------------- // 元素.nodeName 元素节点，返回大写的标签名 文本节点，返回#text console.log(p.nodeName); // P console.log(ul.nodeName); // UL for (var i = 0; i < li.length; i++) { console.log(li[i].nodeName); } // ---------------------------------- // 元素.nodeValue // 只有文本节点才有nodeValue console.log(p.nodeValue); // null console.log(p.childNodes[0].nodeValue); // 111111
4、获取父节点
-
元素.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);
5、其它节点
<ul> <li>11111</li> <li>22222</li> <li>33333</li> <li>44444</li> </ul>
var ul = document.getElementsByTagName('ul')[0]; // 通过父级，获取第一个子节点 // 父级.firstChild 在标准浏览器下，有可能返回的是一个文本节点，在IE8及以下，返回的是一个元素节点 // 父级.firstElementChild 在标准浏览器下，返回的是第一个元素节点，在IE8及以下返回undefined // console.log(ul.firstChild); // console.log(ul.firstElementChild); var first = ul.firstElementChild || ul.firstChild; first.style.background = 'red'; // -------------------------------- // 通过父级，获取最后一个子元素 // 父级.lastChild // 父级.lastElementChild var last = ul.lastElementChild || ul.lastChild; last.style.background = 'green'; // ---------------------------------- // 获取元素的下一个兄弟节点 // 元素.nextSibling // 元素.nextElementSibling var next = first.nextElementSibling || first.nextSibling; next.style.background = 'yellow'; // 某个元素的上一个兄弟节点 // 元素.previousSibling // 元素.previousElementSibling var prev = last.previousElementSibling || last.previousSibling; prev.style.background = 'pink';
6、属性操作
attribute可以操作自定义的属性（在标签上可见），也可以操作原生的属性
<p id="txt" title="我就是我，不一样的烟火" abc="小邓子">王老二</p>
var txt = document.getElementById('txt'); // 点的方式 console.log(txt.title); txt.title = '帅哥们举个手'; // 中括号 console.log(txt['title']); txt['title'] = '美女们举个手'; // 比点的形式强大，还可以接收变量 var t = 'title'; console.log(txt[t]); txt[t] = '再次升华'; // ------------------------------- // 点和中括号的形式，只能操作原生的属性，不能操作自定义的属性 console.log(txt.abc); // undefined // ----------------------------- // attribute可以操作自定义的属性（在标签上可见），也可以操作原生的属性 // 设置：元素.setAttribute(属性名, 值); // 获取：元素.getAttribute(属性名); // 删除：元素.removeAttribute(属性名); console.log(txt.getAttribute('abc')); txt.setAttribute('abc', '俊男靓女'); txt.removeAttribute('abc');
2、操作节点
1、创建节点
-
创建标签节点：document.createElement(标签名);
-
创建文本节点：document.createTextNode(文本);
2、添加节点
-
添加节点：父级.appendChild(子级); 将子级添加到父级的最后
var div = document.createElement('div'); // 创建div // var txt = document.createTextNode('我就是我'); // 创建文本 // div.appendChild(txt); // 文本添加到div中 // body.appendChild(div); // div添加到body中 var div = document.createElement('div'); // 创建div div.innerHTML = '我是新来的'; body.appendChild(div); // div添加到body中
案例：留言
3、插入节点
-
插入节点：父元素.insertBefore(要插入的节点, 参考的节点)
<ul> <li>吃饭</li> <li class="ab">睡觉</li> <li>打豆豆</li> </ul>
var ab = document.querySelector('.ab'); var li = document.createElement('li'); li.innerHTML = '刷牙'; ab.parentNode.insertBefore(li, ab);
4、删除节点
-
删除节点：父级.removeChild(被删除的元素);
<ul> <li>吃饭</li> <li>睡觉</li> <li>打豆豆</li> </ul>
var ul = document.getElementsByTagName('ul')[0]; var li = document.getElementsByTagName('li'); for (var i = 0; i < li.length; i++) { li[i].onclick = function () { ul.removeChild(this); // 删除 } }
5、替换节点
-
替换节点：父元素.replaceChild(新的节点, 被替换的节点);
<p>小邓</p> <button>替换</button> <div>老王</div>
var p = document.querySelector('p'); var button = document.querySelector('button'); var div = document.querySelector('div'); button.onclick = function () { document.body.replaceChild(p, div); }
6、复制节点(克隆)
-
复制节点：被复制的节点.cloneNode(是否克隆子孙节点);
<button>复制</button> <ul> <li>吃饭</li> <li>睡觉</li> <li>打豆豆</li> </ul>
window.onload = function () { var btn = document.querySelector('button'); var ul = document.querySelector('ul'); btn.onclick = function () { var o = ul.cloneNode(true); document.body.appendChild(o); } }
3、表格操作
DOM提供了可以简便快速获取表格元素的属性，先获取到表格table对象(oTab)，再通过table获取里面的元素，再通过 table 获取里面的元素
比如获取到了表格table为oTab：
thead-----oTab.tHead 一个
tfoot------oTab.tFoot 一个
Tbody----oTab.tBodies 一堆
tr----------oTab.rows 一堆
td----------oTab.tr.cells 一堆(必须通过tr来获取)
var box = document.getElementById('box'); var head = box.tHead; // 获取表格头 只有一个 head.style.backgroundColor = 'pink'; var foot = box.tFoot; // 获取表格尾 只有一个 foot.style.backgroundColor = 'green'; var body = box.tBodies; // 获取表格体 多个（一个组） // console.log(body); body[0].style.backgroundColor = '#ccc'; var tr = body[0].rows; // 获取表格行 多个（一个组） // console.log(tr); tr[0].style.backgroundColor = '#333'; var td = tr[0].cells; // 获取某一行下的单元格 多个（一个组） // console.log(td); td[1].style.backgroundColor = 'red';