DOM对象
来源：互联网 发布：胡琳 知乎 编辑：程序博客网 时间：2024/06/05 07:10
DOM就是DocumentObjectModel，文档对象模型。赋予JS操作节点的能力。当网页加载时，浏览器会创建页面的DOM。
查找HTML元素
1. document.getElementById(‘id’)，不建议使用id，后端开发人员使用
2. document.getElementsByTagName(‘tag’);
3. document.getElementsByClassName(‘.class’);
4. document.getElementsbyName(‘name’)
5. document.querySelector(‘selector’)/document.querySelectorAll(‘selector’);
JS可以根据获取到的对象，对HTML元素，属性，样式做出修改
DOM节点
1. childNodes 获取当前节点下的所有子节点
节点分为文本节点和元素节点两种
可以通过nodeType属性判断是那一种节点
2. children 和childNodes是一样的，但是不包含文本节点，兼容ie6~ie8
3. parentNode 获取父节点
DOM
获取第一个子元素
firstChild(IE), firstElementChild获取最后一个子元素
lastChild(IE), lastElementChild获取兄弟元素
nextSibling(IE), nextElementSibling，获取当前元素的下一个兄弟元素
previousSibling(IE), previousElementSibling，获取当前元素的上一个兄弟元素操作元素的属性
1 object.属性 = xxx
2 object.属性 = xxx
3 通过DOM的方式修改
object.setAttribute(‘属性’, ‘值’) 设置新的样式
object.getAttribute(‘属性’) 获取样式的内容
object.removeAttribute(‘属性’) 删除样式对DOM进行操作
- 创建元素：document.createElement(元素的名称)
- 在元素最后添加子节点：object.appendChild(元素对象)
- 创建文本节点：document.createTextNode(文本)也可以直接使用innerHTML赋值
- 在元素最前面插入子节点：object.inertBefore(插入的节点, 在那个节点前)
- 删除一个节点:父节点.removeChild(DOM里的节点);
- 添加子节点的优化：document.createDocumentFragment
如果是使用appendChild进行添加子节点，使用优化和不优化效率基本上是一致，如果使用insertBefore优化的情况效率大大的高于不优化
DOM操作
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>DOM操作</title> </head> <body> <div><input type="button" value="追加li" onclick="demo01()"/></div> <div> <input type="text" name="text1" /> <input type="button" value="追加li并添加文本" onclick="demo02()"/> </div> <div> <input type="text" name="text2" /> <input type="button" value="插入li" onclick="demo03()"/> </div> <ul id="ul"></ul> </body><script> /** * 创建li元素并添加到ul元素中 */ function demo01(){ // 如果需要创建div标签，把li替换为div，其它标签类同 var oLi = document.createElement('li'); // 获取到ul标签对象 var oUl = document.getElementById('ul'); // 把li添加到ul当中 oUl.appendChild(oLi); } /** * 创建文本节点添加到li中 */ function demo02(){ // 如果需要创建div标签，把li替换为div，其它标签类同 var oLi = document.createElement('li'); // 获取到ul标签对象 var oUl = document.getElementById('ul'); // 把li添加到ul当中 oUl.appendChild(oLi); // 从name=text1的文本框中获取内容 var text1 = document.getElementsByName('text1')[0] var text1Value = text1.value; /*// 创建一个文本节点 var textNode = document.createTextNode(text1Value); // 把文本节点添加到li oLi.appendChild(textNode);*/ // 除了创建文本节点，还可以通过innerHTML添加文本 oLi.innerHTML = text1Value; } function demo03(){ // 如果需要创建div标签，把li替换为div，其它标签类同 var oLi = document.createElement('li'); // 获取到ul标签对象 var oUl = document.getElementById('ul'); // 获取到ul里的任意一个节点，在这个节点之前插入新的节点 // 先得到ul下的所有节点 var oChildren = oUl.children; // 添加文本内容 oLi.innerHTML = document.getElementsByName('text2')[0].value; // 如果ul没有节点使用假加方式添加节点 if (oChildren.length == 0){ oUl.appendChild(oLi); }else{ // 如果ul有节点使用随机数决定在那个节点插入 //Math.random()//产生0~1之间的随机数 //Math.random() * children.length//可以得到0~长度之间的一个随机数 var pos = parseInt(Math.random() * oChildren.length);//根据数组的长度随机产生一个下标 // 把li添加到ul当中 oUl.insertBefore(oLi, oChildren[pos]); } }</script></html>删除节点
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>删除节点</title> </head> <body> <ul> <li><a href="#">删除1</a></li> <li><a href="#">删除2</a></li> <li><a href="#">删除3</a></li> <li><a href="#">删除4</a></li> <li><a href="#">删除5</a></li> </ul> </body><script>(function(){ var oAes = document.getElementsByTagName('a'); for(var i=0,length=oAes.length;i<length;i++){ oAes[i].onclick = function(){ // 通过a标签parentNode获取到它的父标签li var li = this.parentNode; // 获取到ul标签的对象 var ul = document.getElementsByTagName('ul')[0]; // 通过ul标签对象移除它里面的子标签li //li = document.createElement('li'); // 不能删除一个不在DOM结构里的节点 ul.removeChild(li); }; }})();</script></html>添加节点的优化
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>添加节点的优化</title> </head> <body> <ul id="ul1"></ul> <ul id="ul2"></ul> </body><script> // 添加10000个节点 var times = 10000; var start; var end; // 没有优化 function foo1(){ var ul = document.getElementById('ul1'); for (var i=0;i<times;i++){ var li = document.createElement('li'); var textNode = document.createTextNode('1'); // li.appendChild(textNode); // ul.appendChild(li); //添加时会修改DOM结构 var children = ul.children; if (children.length > 2){ ul.insertBefore(li, children[parseInt(Math.random() * children.length)]); }else{ ul.appendChild(li); //添加时会修改DOM结构 } } } // 优化节点的添加 function foo2(){ var ul = document.getElementById('ul2'); var cdf = document.createDocumentFragment(); for (var i=0;i<times;i++){ var li = document.createElement('li'); var textNode = document.createTextNode('1');// li.appendChild(textNode)// cdf.appendChild(li); // 添加没有修改DOM的结构 var children = ul.children; if (children.length > 2){ cdf.insertBefore(li, children[parseInt(Math.random() * children.length)]); }else{ cdf.appendChild(li); //添加时不会修改DOM结构，所以效率会更高 } } ul.appendChild(cdf); } start = new Date(); foo1(); end = new Date(); console.log('没有优化，共花费了' +(end.getTime() - start.getTime()) + '毫秒'); start = new Date(); foo2(); end = new Date(); console.log('优化后，共花费了' +(end.getTime() - start.getTime()) + '毫秒');</script></html>表格的操作
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表格的操作</title> </head> <body><div> 序号：<input type="text" name="id" /> 姓名：<input type="text" name="name" /> 年龄：<input type="text" name="age" /> <input type="button" value="添加" onclick="addData()" /></div> <table border="1" width="500"> <thead> <tr><th>序号</th><th>姓名</th><th>年龄</th><th>操作</th></tr> </thead> <tbody> <tr><td>1</td><td>张三</td><td>19</td><td></td></tr> <tr><td>2</td><td>李四</td><td>29</td><td></td></tr> <tr><td>3</td><td>王五</td><td>26</td><td></td></tr> <tr><td>4</td><td>赵六</td><td>20</td><td></td></tr> </tbody> <tfoot> <tr><td colspan="4">2017年4月21日制</td></tr> </tfoot></table> </body><script> var oTable = document.querySelector('table'); console.log('thead: '); console.log(oTable.tHead); // 格式里必须使用<thead>标签才可以获取这部分内容 console.log('bodies: '); console.log(oTable.tBodies); // <tbody>标签可以不写，得到的结果是一个数组 console.log('tfoot: '); console.log(oTable.tFoot); // 格式里必须使用<tfoot>标签才可以获取这部分内容 // 可以通过rows和cells获取td里的内容 // rows等同于tr // cells等同于td console.log('thead的第一个元素是：' + oTable.tHead.rows[0].cells[0].innerHTML); console.log('tbody的第二行第三个元素是：' + oTable.tBodies[0].rows[1].cells[2].innerHTML); // 隔行变色 function foo1(){ for (var i=0;i<oTable.tBodies[0].rows.length;i++){ if (i%2==0){ oTable.tBodies[0].rows[i].style.backgroundColor = 'lightblue'; }else{ oTable.tBodies[0].rows[i].style.backgroundColor = 'lightgreen'; } } } // 高光效果 function foo2(){ for (var i=0;i<oTable.tBodies[0].rows.length;i++){ var oldBGColor; oTable.tBodies[0].rows[i].onmouseover = function(){ // 记录原有的背景颜色 oldBGColor = this.style.backgroundColor; this.style.backgroundColor = 'lightpink'; }; oTable.tBodies[0].rows[i].onmouseout = function(){ this.style.backgroundColor = oldBGColor; }; } } /** * 把文本框输入的内容动态添加到表格里 */ function addData(){ // 1. 获取到所有的input标签 var oInputs = document.getElementsByTagName('input'); // 2. 拼接td var sTd = '<td>' + oInputs[0].value + '</td><td>' + oInputs[1].value + '</td><td>' + oInputs[2].value + '</td><td><a href="#">删除</a></td>'; // 3. 创建tr节点 var oTr = document.createElement('tr'); // 4. 把td字符添加到tr节点 oTr.innerHTML = sTd; // 5. 给删除添加事件 //console.log(oTr.children[3]); // oTr的第4个子节点是td，要给a标签绑定事件，需要继续获取td的子节点 oTr.children[3].children[0].onclick = function(){ //alert(1); deleteTr(this); }; // 3. 往todies里追加一行 oTable.tBodies[0].appendChild(oTr) foo1(); //颜色相间 foo2(); //高光效果 } /** * 从bodies里删除一行 * @param {Object} a 点击的a标签 */ function deleteTr(a){ var tr = a.parentNode.parentNode; oTable.tBodies[0].removeChild(tr); } foo1(); foo2();</script></html>DOM操作元素属性
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>DOM操作元素属性</title> </head> <body> <ul> <li></li> <!-- 点击后添加背景色 --> <li style="background-color:lightcyan"></li> <!-- 点击后修改背景色 --> <li style="background-color:lightsalmon;"></li> <!-- 点击后删除背景色 --> </ul> <input type="button" value="修改" id="button" /> </body><script> (function(){ // 1. 获取button，绑定一个点击事件 document.querySelector('#button').onclick = function(){ // 2. 获取到ul下的子元素 var oLies = document.querySelector('ul').children; // 3. 给第1个li添加背景色 oLies[0].setAttribute('style', 'background-color:lightcyan;'); // 4. 给第2个li修改背景色 oLies[1].setAttribute('style', 'background-color:lightsalmon'); // 5. 给第3个li删除背景色 console.log('第3个li的原背景色是：' + oLies[2].getAttribute('style')); oLies[2].removeAttribute('style'); }; })();</script></html>获取第一个或最后一个子元素
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>获取第一个或最后一个子元素</title> </head> <body> <ul> <li>第1行</li> <li>第2行</li> <li>第3行</li> <li>第4行</li> <li>第5行</li> </ul> </body><script> var oUl = document.querySelectorAll('ul')[0] // oUl.firstChild.style.backgroundColor = 'lightgray'; // oUl.firstElementChild.style.backgroundColor = 'lightgray'; //currentStyle //getComputedStyle() if (oUl.firstElementChild){ // 如果返回值不是undefined表示是一个非IE的浏览器 oUl.firstElementChild.style.backgroundColor = 'lightblue'; }else{ oUl.firstChild.style.backgroundColor = 'lightblue'; } if (oUl.lastElementChild){ // 非IE oUl.lastElementChild.style.backgroundColor = 'lightgreen'; }else{ oUl.lastChild.style.backgroundColor = 'lightgreen'; }</script></html>兄弟元素
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>兄弟元素</title> </head> <body> <ul> <li>第1行</li> <li>第2行</li> <li class="center">第3行</li> <li>第4行</li> <li>第5行</li> </ul> </body><script> var oCenterLi = document.querySelector('.center'); if(oCenterLi.nextElementSibling){ // 非IE oCenterLi.nextElementSibling.style.backgroundColor = 'lightcoral'; //第4行 oCenterLi.nextElementSibling.nextElementSibling.style.backgroundColor = 'lightcoral'; //第5行 }else{ oCenterLi.nextSibling.style.backgroundColor = 'lightcoral'; } if (oCenterLi.previousElementSibling){ oCenterLi.previousElementSibling.style.backgroundColor = 'lawngreen'; }else{ oCenterLi.previousSibling.style.backgroundColor = 'lawngreen'; }</script></html> 1 0
- DOM学习---DOM对象
- DOM对象
- DOM对象
- DOM对象
- DOM对象
- DOM对象
- dom对象
- DOM对象
- DOM 对象
- DOM对象
- DOM对象-
- DOM对象
- DOM对象
- DOM对象
- 对象dom
- DOM对象
- DOM对象
- DOM对象
- resource处理动态数据交互
- k8s安装
- 【laravel】laravel的下载&安装
- 算法/动态规划/LongestCommonSubstring最长公共子串问题
- 根据先序遍历和中序遍历，打印层序遍历
- DOM对象
- H5基础知识第六课时（CSS）1
- SSL 2289——庆功会
- Logback和Logstash的集成
- CentOS下升级Git1.7.1升级到Git2.2.1
- NSOJ 大数阶乘
- JavaScript之值类型和引用类型的区别
- 《我的Angular入坑记》——通过小例子看ng-repeat
- [bigdata-60]mysql的高可用主主同步复制及其在阿里云上的实践
