1.什么是DOM
DOM：Document Object Model（文档对象模型）
2.节点和节点的关系
3.访问节点
1）使用getElement系列方法访问指定节点
getElementById() getElementsByName() getElementsByTagName()
2）根据层次关系访问节点
4.节点属性
parentNode 返回节点的父节点
childNodes 返回子节点集合，childNodes[i]
firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild 返回节点的最后一个子节点
nextSibling 下一个节点
previousSibling 上一个节点
5.Element属性
firstElementChild 返回节点的第一个子节点
lastElementChild 返回节点的最后一个子节点
nextElementSibling 下一个节点
previousElementSibling 上一个节点
oNext = oParent.nextElementSibling || oParent.nextSibling
oPre = oParent.previousElementSibling || oParent.previousSibling
oFirst = oParent. firstElementChild || oParent.firstChild
oLast = oParent.lastElementChild || oParent.lastChild
6.节点信息
1.nodeName:节点名称
元素节点显示标签名称
属性节点显示属性名称
文本节点显示#text
文档节点显示#document
2.nodeValue：节点值
显示对应的节点的值
3.nodeType ：节点类型
|
节点类型
|
NodeType值
|
|
元素element
|
1
|
|
属性attr
|
2
|
|
文本text
|
3
|
|
注释comments
|
8
|
|
文档document
|
9
|
7.操作节点的属性
getAttribute("属性名")
setAttribute("属性名","属性值")
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> <style> img{ align-content: center; } button{ margin-bottom: 10px; } </style> </title> </head> <body> <img src="4lkvx21fjro3sjq992f5tlb6z.jpg" id="pic" alt="哈哈" /><br /> <button onclick="fun()">修改图片</button> <script> function fun(){ var pic = document.getElementById("pic"); pic.setAttribute("src","3idlmlgkhszuqgrtccvfu30go.jpg"); pic.setAttribute("alt","我"); } </script> </body> </html>
8.创建和插入节点
createElement(tgName) 创建一个标签为tagName的新元素
A.appendChild(B) 把B节点追加至A节点的末尾
insertBefore(A,B) 把A节点插入到B节点之前
cloneNode(deep) 复制某个指定节点
deep的值有true和false
true是复制本身加所有子节点
false是只复制自己本身
|
名称
|
描述
|
|
createElement( tagName)
|
创建一个标签名为tagName的新元素节点
|
|
A.appendChild( B)
|
把B节点追加至A节点的末尾
|
|
insertBefore( A,B )
|
把A节点插入到B节点之前
|
|
cloneNode(deep)
|
复制某个指定的节点
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul id="list"> <li>苹果</li> <li>香蕉</li> <li>橘子</li> </ul> <input type="text" name="" id="text" /><br /> <button onclick="start()">第三个节点前插入</button> <button onclick="end()">结尾位置插入</button> <button onclick="copy()">复制第一个节点</button> <script> var oInput=document.getElementById("text"); var oList=document.getElementById("list"); var ListEnd=oList.lastElementChild || oList.lastChild; function start(){ console.log(oInput.value!=""); console.log(ListEnd); var nodeLi=document.createElement("li"); if(oInput.value!=""){ nodeLi.innerHTML = oInput.value; oInput.value=""; oList.insertBefore(nodeLi,ListEnd) } } function end(){ var nodeLi=document.createElement("li"); if(oInput.value!=""){ nodeLi.innerHTML=oInput.value; oInput.value=""; oList.appendChild(nodeLi) } } function copy(){ var firstNode=oList.firstElementChild||oList.firstChild; var copy=firstNode.cloneNode(true); oList.appendChild(copy) } </script> </body> </html>
firstChild和firstElementChild的区别？
它们的共同点都是获取父节点下第一个节点对象。
但是firstElementChild只会获取元素节点对象，从名称就可以看出来，firstChild则可以获取文本节点对象（当然也可以获取元素节点对象）
9.删除和替换节点
|
名称
|
描述
|
|
removeChild( node)
|
删除指定的节点
|
|
replaceChild( newNode, oldNode)
|
用其他的节点替换指定的节点
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul> <li> <img src="img/4lkvx21fjro3sjq992f5tlb6z.jpg" id="first" /> <p><input type="button" value="删除图片" onclick="del()"></p> </li> <li> <img src="img/3idlmlgkhszuqgrtccvfu30go.jpg" id="second" /> <p><input type="button" value="换张图片" onclick="change()"></p> </li> </ul> <script> function del(){ var delNode=document.getElementById("first"); delNode.parentNode.removeChild(delNode); } function change(){ var oldNode=document.getElementById("second"); var newNode=document.createElement("img"); newNode.setAttribute("src","img/69pk75euhgyxylafde4zmc0u9.jpg"); oldNode.parentNode.replaceChild(newNode,oldNode); } </script> </body> </html>
10. 操作节点样式
改变样式的属性
①改变style属性
语法：HTML元素.style.样式属性＝"值"
style属性：
|
类别
|
属性
|
|
背景
|
backgroundColor、backgroundImage、backgroundRepeat
|
|
文本
|
fontSize、fontWeight、textAlign、textDecoration、font、color
|
|
边距
|
padding、paddingTop 、paddingBottom、paddingLeft、paddingRight
|
|
边框
|
border、borderTop、borderBottom、borderLeft、borderRight
|
style事件：
|
名称 |
描述 |
|
onclick |
当用户单击某个对象时调用事件 |
|
onmouseover |
鼠标移到某元素之上 |
|
onmouseout |
鼠标从某元素移开 |
|
onmousedown |
鼠标按钮被按下 |
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>隔行变色</title> <style> * { padding: 0; margin: 0; text-align: center; } .wrap { width: 500px; margin: 10px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 500px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; cursor: pointer;; } .current { background-color: red!important; } </style> <script> window.onload = function () { var wrap = document.getElementById("wrap"); var table = wrap.firstElementChild || wrap.firstChild; var tbody = table.lastElementChild || table.lastChild; var trArr = tbody.children; for(var i=0;i<trArr.length;i++){ if(i%2==0){ trArr[i].style.backgroundColor = "#ccc"; }else{ trArr[i].style.backgroundColor = "#c0c0c0"; } } var color=""; for(var i=0;i<trArr.length;i++){ trArr[i].onmouseover=function(){ color =this.style.backgroundColor; this.style.backgroundColor="#fff"; } trArr[i].onmouseout=function(){ this.style.backgroundColor=color; } } } </script> </head> <body> <div class="wrap" id="wrap"> <table> <thead> <tr> <th>序号</th> <th>姓名</th> <th>课程</th> <th>成绩</th> </tr> </thead> <tbody id="target"> <tr> <td> 1 </td> <td>小环</td> <td>语文</td> <td>80</td> </tr> <tr> <td> 2 </td> <td>大明</td> <td>日语</td> <td>90</td> </tr> <tr> <td> 3 </td> <td>小溪</td> <td>数据结构</td> <td>86</td> </tr> <tr> <td> 4 </td> <td>吕尚</td> <td>数学</td> <td>99</td> </tr> <tr> <td> 5 </td> <td>小雉</td> <td>英语</td> <td>70</td> </tr> <tr> <td> 6 </td> <td>小超</td> <td>体育</td> <td>100</td> </tr> </tbody> </table> </div> </body> </html>
②改变className属性
语法：HTML元素.className="样式名称"
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>我的购物车</title> <link rel="stylesheet" href="css/shopping.css"> </head> <body> <section id="shopping"> <div id="cart" onmouseover="over()" onmouseout="out()">我的购物车<span>1</span></div> <div id="cartList"> <h2>最新加入的商品</h2> <ul> <li><img src="images/makeup.jpg"></li> <li>倩碧经典三部曲套装（液体皂200ml+明肌2号水200ml+润肤乳125ml）</li> <li>¥558.00×1<br/>删除</li> </ul> <div class="footer">共1件商品<span>共计¥558.00</span> <span>去购物车</span></div> </div> </section> <script> function over(){ document.getElementById("cart").className="cartOver"; document.getElementById("cartList").className="cartListOver"; } function out(){ document.getElementById("cart").className="cartOut"; document.getElementById("cartList").className="cartListOut"; } </script> </body>
11. 获取元素的样式
①语法：HTML元素.style.样式属性;
示例：
alert(document.getElementById("cartList").display);
语法：document.defaultView.getComputedStyle(元素,null).属性;
示例：
var cartList=document.getElementById("cartList");
alert(document.defaultView.getComputedStyle(cartList,null).display);
②语法：HTML元素. currentStyle.样式属性;
示例：
alert(document.getElementById("cartList").currentStyle.display); 【兼容IE浏览器】
12.获取元素位置：
元素属性应用：
|
属性
|
描述
|
|
offsetLeft
|
返回当前元素左边界到它上级元素的左边界的距离，只读属性
|
|
offsetTop
|
返回当前元素上边界到它上级元素的上边界的距离，只读属性
|
|
offsetHeight
|
返回元素的高度
|
|
offsetWidth
|
返回元素的宽度
|
|
offsetParent
|
返回元素的偏移容器，即对最近的动态定位的包含元素的引用
|
|
scrollTop
|
返回匹配元素的滚动条的垂直位置
|
|
scrollLeft
|
返回匹配元素的滚动条的水平位置
|
|
clientWidth
|
返回元素的可见宽度
|
|
clientHeight
|
返回元素的可见高度
|
语法：
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
【标准浏览器】
或者
document.body.scrollTop;
document.body.scrollLeft;
【Chrome】
为了兼容性：
var sTop=document.documentElement.scrollTop || document.body.scrollTop;
posted on
