DOM基础
•什么是DOM
•浏览器支持情况
lDOM节点
•childNodes nodeType
–获取子节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> window.onload=function () { alert(document.body.childNodes[1].nodeType); } </script> </head> <body> aaafsa <span>fff</span> </body> </html
–children
•parentNode
PE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> window.onload=function () { //获取oul var oUl=document.getElementById('ul1'); var i=0; //oul的弟节点 for(i=0;i<oUl.childNodes.length;i++) { //的返回类型是真 if(oUl.childNodes[i].nodeType==1) { //背景设置红色 oUl.childNodes[i].style.background='red'; } } } </script> </head> <body> <ul id="ul1"> <li></li> <li></li> <li></li> </ul> </body> </ht
–例子：点击链接，隐藏整个li
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>parentNode</title> <script> window.onload=function() { //获取a数组节点 var aA=document.getElementsByTagName('a'); var i=0; //循环a[index]数组 for(i=0; i<aA.length; i++) { aA[i].onclick=function() { //获取a数组的父节点li设置属性为隐藏！ this.parentNode.style.display='none'; } } } </script> </head> <body><ul> <li>aass <a href="javascript:;">隐藏</a></li> <li>5453 <a href="javascript:;">隐藏</a></li> <li>cvxc <a href="javascript:;">隐藏</a></li> <li>ertert <a href="javascript:;">隐藏</a></li> </ul> </body> </html>
•offsetParent
–例子：获取元素在页面上的实际位置
DOM节点
•首尾子节点
有兼容性问题
firstChild、firstElementChild
lastChild 、lastElementChild
•兄弟节点
–有兼容性问题
nextSibling、nextElementSibling
previousSibling、previousElementSibling
操作元素属性
元素属性操作
•第一种：oDiv.style.display=“block”;
•第二种：oDiv.style[“display”]=“block”;
•第三种：Dom方式
DOM方式操作元素属性
•获取：getAttribute(名称)
•设置：setAttribute(名称, 值)
•删除：removeAttribute(名称)
DoM元素灵活查找
用className选择元素
•
–通过className条件筛选
•如何用className选择元素
–选出所有元素
•封装成函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> </style> <title>用class选择元素</title> <script> function getByClass(oParent, sClass) { //获取obj的所有节点 var aEle=oParent.getElementsByTagName('*'); var aResult=[]; var i=0; //循环obj[index]; for(i=0; i<aEle.length; i++) { //判断obj的元素属性是否等于sclass if(aEle[i].className==sClass) { //添加到数组aresult里 aResult.push(aEle[i]); } } //返回值给这个函数 return aResult; } window.onload=function() { //获取ul1 var oUl=document.getElementById('ul1'); //启动函数 var aBox=getByClass(oUl, 'box'); var i=0; for(i=0; i<aBox.length; i++) { //循环class等于box的元素index的背景设置成黄色 aBox[i].style.background='yellow'; } } </script> </head> <body> <ul id="ul1"> <li></li> <li></li> <li></li> <li class="box"></li> <li></li> <li class="box"></li> <li class="box"></li> <li></li> <li></li> <li></li> </ul> </body> </html>
知识点
DOM节点：parentNode、childNodes、nodeType、children
元素属性：getAttribute、setAttribute、removeAttribute
用class选取元素