一、DOM（document object model文档对象模型）
1.1 概述
用来将标记型文档封装成对象，并将标记型文档中的所有的内容（标签、文本、属性等）都封装成对象。1.2 目的
为了更为方便的操作这些文档以及文档中的所有内容；因为对象的出现就可以有属性和行为被调用。1.3 文档对象模型
文档：标记型文档(html,xml)
对象：封装了属性和行为的实例，可以直接被调用
模型：所有标记型文档都具备一些共性的特征的一个体现
标记型文档：标签、属性、标签中封装的数据注意：只要是标记型文档，DOM这种技术都可以对其进行操作。
1.4 DOM这种技术是如何对标记型文档进行操作呢？
DOM技术的解析方式:将标记型文档解析一颗DOM树，并将树种的内容都封装成节点对象。【解析过程】根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成对象，如下：
①document对象：整个文档
②element对象：标签对象
③属性对象
④文本对象
【注意】Node对象：此对象是以上对象的父对象，如果在对象里面找不到想要的方法，此时，可到Node对象中找。
1.5 JavaScriptDOM能做什么???
JavaScript能够改变页面中的所有HTML元素
JavaScript能够改变页面中的所有HTML属性
JavaScript能够改变页面中的所有CSS样式全选案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- js --> <script type="text/javascript"> //封装ID获取 function $(id){ return document.getElementById(id); } //编写myAll点击事件函数 function myAll(){ //拿到全选框按钮的checked值即可 //拿到全选框 var alls =$('alls' ); // console.log(alls.checked); //获取其他三个复选框 var cks = document.getElementsByName("cks"); //遍历结果集 for(var i = 0;i<cks.length;i++){ // cks[i] 每一个复选框对象 cks[i].checked = alls.checked; } } //优化全选 //单独为每一个子复选框设置点击事件，当触发任意一个时，都要全盘判断是否没有选中的，但凡有一个没有选中，全选就取消 window.onload = function(){ //获取所有name为cks的复选框 var cks = document.getElementsByName("cks"); //遍历 for(var i = 0;i<cks.length;i++){ //为每一个子复选框设置对应的点击事件 cks[i].onclick = function(){ //alert(this.value); //判断当前的子复选框是否选中了并且一并判断后面的是否选中 var flag = true;//假设全部选中 for(var j = 0;j<cks.length;j++){ //判断只要有一个没有选中，全选就干掉。 if(cks[j].checked == false){ flag = false; break; } } $("alls").checked = flag; }; } }; </script> </head> <body> <h3>全选案例</h3> <table border="1" width="40%"> <tr> <td>全选|全不选<input id="alls" onclick="myAll();" type="checkbox"></td> <td>编号</td> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr> <td><input type="checkbox" name = "cks" value = "one"></td> <td>1</td> <td>nuonuo</td> <td>男</td> <td>18</td> </tr> <tr> <td><input type="checkbox" name = "cks" value = "two"></td> <td>1</td> <td>nuonuo</td> <td>男</td> <td>18</td> </tr> <tr> <td><input type="checkbox" name = "cks" value = "three"></td> <td>1</td> <td>nuonuo</td> <td>男</td> <td>18</td> </tr> </table> </body> </html>
二、 element对象
2.1 getAttribute('属性名称')：
获取属性里面的属性值
2.2 setAttribute('属性名','属性值')：设置属性的值
2.3 removeAttribute('属性名')：删除属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM编程之节点操作</title> <style type="text/css"> .oBox{ background-color: yellow; } </style> <script type="text/javascript"> //加载函数 window.onload = function(){ //获取obtn1按钮 var oBtn1 = document.getElementById("oBtn1"); oBtn1.onclick = function(){ //根据选择器获取元素（HTML5.0新增） var oImg = document.querySelector('.oImg'); console.log(oImg); //获取属性 var result = oImg.getAttribute("src"); alert(result);//相对路径 //通过标签本身只调用属性即可获取值 console.log(oImg.src);//绝对路径 }; //获取oBtn2按钮 var oBtn2 = document.getElementById("oBtn2"); oBtn2.onclick = function(){ //获取超链接 var oA = document.querySelector(".oA"); oA.setAttribute("href","http://www.4399.com"); //innerHTML 该属性是设置或获取标签的内容 oA.innerHTML = "4399小游戏官网"; }; //获取oBtn3按钮 var oBtn3 = document.getElementById("oBtn3"); oBtn3.onclick = function(){ //获取超链接 var oBox = document.querySelector(".oBox"); oBox.removeAttribute("class"); }; }; </script> </head> <body> <h2>关于DOM中的节点获取：节点获取时根据属性获取值</h2> <h3>1.getAttribute();获取标签属性的值</h3> <img class="oImg" src="img/1.png" alt="" width="200" height="200"> <button id="oBtn1">点击获取img中的src属性</button> <hr> <h3>2.setAttribute();重新设置值</h3> <a class="oA" href="http://www.baidu.com">百度一下</a> <button id="oBtn2">点击设置href属性</button> <h3>3.移除属性值removeAttribute</h3> <div class="oBox" style = "width: 100px;height: 100px;border: 1px solid red"> </div> <button id="oBtn3">点击移除</button> </body> </html>
三、 Node对象
根据层次关系查找节点
parentNode父节点
firstChild第一个子节点 （得到所有的子节点：childNodes，兼容性差）
lastChild最后一个子节点
nextSibling返回一个给定节点的下一个兄弟节点
previousSibling返回一个给定节点的上一个兄弟节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //加载函数 window.onload = function(){ //obtn1 var obtn1 = document.getElementById("obtn1"); //设置点击事件 obtn1.onclick = function(){ var oUl = document.getElementById("oUl"); //获取第一个节点（标签）中的内容，去掉空格 console.log(oUl.firstChild.innerHTML); //设置样式 oUl.firstChild.style.border = "1px solid red"; //筛选掉空格（文本节点） firstElementChild console.log(oUl.firstElementChild.innerHTML); //获取最后一个子节点 console.log(oUl.lastChild.innerHTML); console.log(oUl.lastElementChild.innerHTML); //根据父标签获取所有的子节点（li） console.log(oUl.childNodes.length);//包含空格 console.log(oUl.children.length);//不包含空格 //根据指定的子节点获取父节点 // oUl.firstElementChild 根据父节点获取第一个子节点 // oUl.firstElementChild.parentNode 通过得到的第一个子节点获取父节点 oUl.firstElementChild.parentNode.style.border = "1px solid red"; //获取oUl中第三个子节点 设置边框 oUl.children[2].style.border = "1px solid red" }; }; </script> </head> <body> <h2>DOM操作中的层级式元素获取</h2> <ul id="oUl"> <li>111111</li> <li>222222</li> <li>33333</li> <li>44444</li> <li>55555</li> <li>66666</li> </ul> <button id="obtn1">点击1</button> </body> </html>
四、 操作节点树（创建和添加节点）
createElement('标签名称')创建节点
createTextNode;创建文本节点
appendChild():末尾追加方式插入节点
insertBefore(newNode,oldNode):在指定节点前插入新节点（newNode:要插入的节点；oldNode:在谁之前插入）
cloneNode(boolean):复制节点，参数是判断是否赋值子节点
removeChild()：删除节点（通过父节点删除，不能自己删除自己）
replaceChild(newNode,oldNode)：替换节点(newNode:替换成的节点；oldNode：被替换的节点)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //需求1：在ul列表中通过js脚本的方式创建一个li存储item6 window.onload = function(){ //oBtn1 var oBtn1 = document.getElementById("oBtn1"); oBtn1.onclick = function(){ //li标签 //createElement 创建标签 var newLi = document.createElement("li"); //创建一个属性给newLi标签 var oid = document.createAttribute("id"); //设置属性 // console.log(typeof(oid)); //设置属性 newLi.setAttributeNode(oid); //设置id的属性值 在设置属性之后 newLi.id = "123" //创建一段文本 var text = document.createTextNode("item6"); //将文本内容追加到li的末尾 newLi.appendChild(text); //appendChild(); 向指定的标签末尾追加指定的节点（标签） //获取oUl var oUl = document.getElementById("oUl"); //向末尾追加一个已创建的li oUl.appendChild(newLi); }; var oBtn2 = document.getElementById("oBtn2"); oBtn2.onclick = function(){ //获取第一个子节点 var firstLi = document.getElementById("oUl").firstElementChild; //创建一个新节点li var newLi = document.createElement("li"); //创建新节点内容 var text = document.createTextNode("我是新节点"); //将内容追加到新节点的末尾 newLi.appendChild(text); //调用插入的方法 document.getElementById("oUl").insertBefore(newLi,firstLi); } var oBtn3 = document.getElementById("oBtn3"); oBtn3.onclick = function(){ //根据父节点获取第三个子节点 var threeLi = document.getElementById("oUl").children[2]; //创建一个p段落标签 var oP = document.createElement("p"); var oText = document.createTextNode("我是p段落"); oP.appendChild(oText); //根据父标签替换 document.getElementById("oUl").replaceChild(oP,threeLi); } var oBtn4 = document.getElementById("oBtn4"); oBtn4.onclick = function(){ //根据父节点获取第4个子节点 var threeLi = document.getElementById("oUl").children[3]; // console.log(threeLi.cloneNode(true)); // true 全部复制（标签和内容） false--复制标签不复制内容 var newLi = threeLi.cloneNode(false); // document.getElementById("oUl") document.getElementById("oUl").appendChild(newLi); } var oBtn5 = document.getElementById("oBtn5"); oBtn5.onclick = function(){ var lastLi = document.getElementById("oUl").children[4]; document.getElementById("oUl").removeChild(lastLi); } } </script> </head> <body> <!-- 节点创建功能 --> <ul id="oUl"> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> </ul> <button id="oBtn1">创建元素</button> <button id="oBtn2">插入元素（insertBefore）</button> <button id="oBtn3">替换（repalceChild）</button> <button id="oBtn4">复制（克隆）cloneNode</button> <button id="oBtn5">删除节点（removeChild）</button> <hr> <select name="" id="" multiple="multiple" style="width: 100px;height: 200px;"> <option value="">1111</option> <option value="">1111</option> <option value="">1111</option> <option value="">1111</option> <option value="">1111</option> <option value="">1111</option> <option value="">1111</option> </select> <select name="" id="" multiple="multiple" style="width: 100px;height: 200px;"> </select> </body> </html>
五、表格相关对象
1. table表格对象
属性：row[] 返回包含表格中所有行的一个数组
方法：
insertRow()从表格中插入一个新行
deleteRow()从表格中删除一行
2. tableRow表格行对象
属性：
cells():返回包含行中所有单元格的一个数组
rowIndex:返回该行在表中的位置
方法：
insertCell():在一行中的指定位置插入一个空的<td>标签
deleteCell()：删除行中指定的单元格
tableCell
单元格行对象
cellIndex
返回单元格在某行单元格集合中的位置
innerHTML设置或返回单元格的开始标签和结束标签之间的HTML
align设置或返回单元格内部数据的水平排列方式
className 设置或返回元素的class属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .title{ background-color: orange; text-align: center; font-weight: bold; } </style> <script type="text/javascript"> /* table对象中的属性 1.rows 求table标签中的行标签行数 2.insertRow(index); 插入新航 3.removeRow(index);移除行 */ window.onload = function(){ var oBtn = document.getElementById("oBtn1"); oBtn.onclick = function(){ //需求：在表格的末尾插入一个tr标签 //获取表格对象 var oTab = document.getElementById("oTab"); //获取表格的长度 var length = oTab.rows.length; //alert(length); //插入tr var oTr = oTab.insertRow(length); //1 var oTd1 = oTr.insertCell(0); oTd1.innerHTML = "1"; //2 var oTd2 = oTr.insertCell(1); oTd2.innerHTML = "兰博基尼"; //3 var oTd3 = oTr.insertCell(2); oTd3.innerHTML = "10000"; }; var oBtn2 = document.getElementById("oBtn2"); oBtn2.onclick = function(){ //获取表格对象 var oTab = document.getElementById("oTab"); //获取表格的长度 var length = oTab.rows.length; oTab.deleteRow(length-1); }; var oBtn3 = document.getElementById("oBtn3"); oBtn3.onclick = function(){ //className 获取指定的标签后可以通过className属性设置样式（来源与style中的选择器设置的） //获取表格对象 var oTab = document.getElementById("oTab"); //获取第一行 var firstTr = oTab.rows[0]; firstTr.className = "title"; // console.log(oTab.rows[0]); }; }; </script> </head> <body> <table id="oTab" border="1" width="50%" cellpadding="0" cellspacing="0"> <tr> <td>编号</td> <td>商品名称</td> <td>价格</td> </tr> </table> <br><br><br> <button id="oBtn1">点击新增行</button> <button id="oBtn2">移除最后一行</button> <button id="oBtn3">更新表头</button> </body> </html>
1707
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
