深入JavaScript之DOM应用
什么是DOM :
document ,节点! 其实说的都是一个东西, CSS时管叫标签, JS时管叫元素,DOM时,管叫节点;
浏览器支持情况
IE:10% Chrome:60% FF:99% 支持
DOM节点
childNodes:子节点
nodeType:节点的类型
nodeType == 3 -> 文本节点
nodeType == 1 -> 元素节点
childNodes 和 nodeType配合使用
<head> <meta charset="UTF-8"> <title>01-DOM基础</title> <script> window.onload = function () { // ul的子节点为li var oUl = document.getElementById('ul1'); for(var i=0;i<oUl.childNodes.length;i++){ //由于在不同的浏览器下,获取到的oUl.childNodes是不一样的;IE6-8会将文本节点也算进去; //故若想给元素节点修改样式,可以通过 oUl.childNodes[i].nodeType == 1 来获取元素节点,并修改样式; //nodeType==3 -> 文本节点 //nodeType==1 -> 元素节点 //给所有的li设置背景颜色 if(oUl.childNodes[i].nodeType == 1){ oUl.childNodes[i].style.background = 'red'; } } } </script></head><body><ul id="ul1"> <li></li> <li></li> <li></li> <li></li> <li></li></ul>abcdefg //文本节点<span>abcdefg</span> //元素节点</body></html>
获取子节点
children:他只包括元素,不包含文本,兼容所有浏览器
故上面的例子可以这样写,简单粗暴!!!
for (var i=0;i<oUl.children.length;i++){ oUl.children[i].style.background = 'red'; }
parentNode:父节点
例子:点击链接,隐藏整个li
parentNode示例:
<html lang="en"><head> <meta charset="UTF-8"> <title>02-parentNode</title> <script> window.onload = function () { var aA = document.getElementsByTagName('a'); for(var i=0;i<aA.length;i++){ aA[i].onclick = function () { this.parentNode.style.display = 'none'; } } } </script></head><body><ul> <li>11111<a href="javaScript:;">隐藏</a></li> <li>22222<a href="javaScript:;">隐藏</a></li> <li>33333<a href="javaScript:;">隐藏</a></li> <li>44444<a href="javaScript:;">隐藏</a></li></ul></body></html>
offsetParent
例子:获取元素在页面上的实际位置
主要用作定位时,获取元素的实际父节点.
示例一:给第二个div2设置绝对定位,给div2的父节点div1什么也不设置,那么div2的offsetParent为body.
<html lang="en"> <head> <meta charset="UTF-8"> <title>offsetParent</title> <style> #div1{width: 200px;height: 200px;background: #ccc;margin-left: 100px;} #div2{width: 100px;height: 100px;background: red;position: absolute;left: 10px;} </style> <script> window.onload = function () { oDiv2 = document.getElementById('div2'); alert(oDiv2.offsetParent); //结果:[object HTMLBodyElement] 父节点为body; } </script> </head> <body> <div id="div1"> <div id="div2"></div> </div> </body> </html>
示例二:给第二个div2设置绝对定位,给div2的父节点div1设置相对定位,那么div2的offsetParent为div1.
<html lang="en"> <head> <meta charset="UTF-8"> <title>offsetParent</title> <style> #div1{width: 200px;height: 200px;background: #ccc;margin-left: 100px; position: relative;} #div2{width: 100px;height: 100px;background: red;position: absolute;left: 10px;} </style> <script> window.onload = function () { oDiv2 = document.getElementById('div2'); alert(oDiv2.offsetParent); //结果:[object HTMLDivElement] 父节点为div; } </script> </head> <body> <div id="div1"> <div id="div2"></div> </div> </body> </html>
2.DOM节点(2)
首尾子节点
有兼容性问题
firstChild、firstElementChild lastChild 、lastElementChild //IE6-8 //oUl.firstChild.style.background='red'; //高级浏览器 //oUl.firstElementChild.style.background='red';
<html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){ var oUl=document.getElementById('ul1'); //IE6-8 //oUl.firstChild.style.background='red'; //高级浏览器 //oUl.firstElementChild.style.background='red'; //给第一个li设置红色背景:由于兼容问题,故需判断下 if(oUl.firstElementChild) { oUl.firstElementChild.style.background='red'; } else { oUl.firstChild.style.background='red'; } };</script></head><body><ul id="ul1"> <li>1</li> <li>2</li> <li>3</li></ul></body></html>
兄弟节点 (使用同上)
有兼容性问题
nextSibling、nextElementSibling
previousSibling、previousElementSibling
3.操纵元素属性
元素属性操作
第一种:oDiv.style.display='block';
第二种:oDiv.style['display']='block';
第三种:Dom方式: oDiv2.setAttribute('display','none');
DOM方式操作元素属性
获取:getAttribute(名称)
设置:setAttribute(名称, 值)
删除:removeAttribute(名称)
4.用className选择元素
如何用className选择元素
选出所有元素
通过className条件筛选
初级用法
<html><head> <meta charset="utf-8"> <title>无标题文档</title> <script> window.onload=function () { var oUl=document.getElementById('ul1'); var aLi=oUl.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++) { if(aLi[i].className=='box') { aLi[i].style.background='red'; } } }; </script></head><body><ul id="ul1"> <li class="box"></li> <li class="box"></li> <li></li> <li></li> <li></li> <li class="box"></li> <li></li></ul></body></html>
封装成函数
高级用法
<script> //封装成函数 function getByClass(oParent, sClass) { var aResult=[]; var aEle=oParent.getElementsByTagName('*');//*通配符,获取oParent下面所有的节点 for(var i=0;i<aEle.length;i++) { if(aEle[i].className==sClass) { aResult.push(aEle[i]); } } return aResult; } window.onload=function () { var oUl=document.getElementById('ul1'); var aBox=getByClass(oUl, 'box'); for(var i=0;i<aBox.length;i++) { aBox[i].style.background='red'; } }; </script> <body> <ul id="ul1"> <li class="box"></li> <li class="box"></li> <li></li> <li></li> <li></li> <li class="box"></li> <li></li> </ul></body>
5.创建、插入和删除元素
创建DOM元素
createElement(标签名) 创建一个节点 appendChild(节点) 追加一个节点
注意:appendChild(节点) 有两个作用:
(一)如果这个元素是通过createElement(标签名)创建出来的,那么它可以直接添加到新的父级;
(二).如果这个元素有父级, 那么1.先把元素从原有父级上删除;2.再添加到新的父级.
例子:为ul插入li
<html><head> <meta charset="utf-8"> <title>无标题文档</title> <script> window.onload=function () { var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); var oTxt=document.getElementById('txt1'); oBtn.onclick=function () { //创建节点 var oLi=document.createElement('li'); oLi.innerHTML=oTxt.value; //添加节点 父级.appendChild(子节点); oUl.appendChild(oLi); }; }; </script></head><body><input id="txt1" type="text"/><input id="btn1" type="button" value="创建li"/><ul id="ul1"></ul></body></html>
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
以上就是深入JavaScript之DOM应用的详细内容,更多请关注其它相关文章!
推荐阅读
-
JavaScript之深入对象(一)
-
深入理解JavaScript系列(29):设计模式之装饰者模式详解_javascript技巧
-
JavaScript学习总结之正则的元字符和一些简单的应用
-
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史_javascript技巧
-
Javascript新手入门之字符串拼接与变量的应用
-
javascript dom操作之cloneNode文本节点克隆使用技巧_javascript技巧
-
深入JavaScript之基础应用
-
js加载之使用DOM方法动态加载Javascript文件_javascript技巧
-
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
-
JavaScript学习笔记之DOM基础操作实例小结