JavaScript学习笔记之DOM基础操作实例小结
本文实例讲述了JavaScript DOM基础操作。分享给大家供大家参考，具体如下：
一、子节点
1、元素节点、文本节点
实例01
html
<body> <ulid="ul1"> 文本节点1 <li></li> 文本节点2<li></li> 文本节点3<li></li> 文本节点4<li></li> 文本节点5<li></li> 文本节点6</ul> <!--文本节点adsasda--> <!--<span>元素节点 qeqweq</span>--> </body>
javascript
<script>
window.onload=function(){
varoUl=document.getElementById('ul1');
alert(oUl.childNodes.length);
};
</script>
2、nodeType属性
| 常见节点 | nodeType值 |
| 元素节点 | 1 |
| 属性节点 | 2 |
| 文本节点 | 3 |
实例02
<script>
window.onload=function(){
varoUl=document.getElementById('ul1');
for(vari=0;i<oUl.childNodes.length;i++){
if(oUl.childNodes[i].nodeType==1){
oUl.childNodes[i].style.background='red';
}
}
};
</script>
3、children获取元素节点
实例03
html代码
<ulid="ul1"> <li> <!--子节点只算第一层的，在这里span是li的子节点，而不是ul的子节点--> <span>子节点</span> </li> <li></li> </ul>
javascript代码
<script>
window.onload=function(){
varoUl=document.getElementById('ul1');
//children获取元素节点
//alert(oUl.children.length);
for(vari=0;i<oUl.children.length;i++){
oUl.children[i].style.background='red';
}
};
</script>
二、父节点
实例04
html代码
<script>
window.onload=function(){
varoUl=document.getElementById('ul1');
alert(oUl.parentNode);
};
</script>
javascript代码
<script>
window.onload=function(){
varoUl=document.getElementById('ul1');
alert(oUl.parentNode);
};
</script>
实例05 父节点的应用
html代码
<ulid="ul1"> <li>父节点1<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隐藏</a></li> <li>父节点2<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隐藏</a></li> <li>父节点3<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隐藏</a></li> <li>父节点4<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隐藏</a></li> <li>父节点5<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隐藏</a></li> <li>父节点6<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隐藏</a></li> <li>父节点7<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隐藏</a></li> </ul>
javascript代码
<script>
/*window.onload=function(){
varoUl=document.getElementById('ul1');
alert(oUl.parentNode);
};*/
window.onload=function(){
varoA=document.getElementsByTagName('a');
for(vari=0;i<oA.length;i++){
oA[i].onclick=function(){
this.parentNode.style.display='none';
};
}
};
</script>
三、firstChild
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
<script>
window.onload=function(){
varoUl=document.getElementById('ou1');
//IE6-8
//oUl.firstChild.style.background='red';
//高级浏览器
//oUl.firstElementChild.style.background='red';
//兼容
if(oUl.firstElementChild){
oUl.firstElementChild.style.background='red';
}
else{
oUl.firstChild.style.background='red';
}
};
</script>
</head>
<body>
<ulid="ou1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
四、通过class类获取元素、以及函数封装
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
<script>
functiongetByClass(oParent,sClass){
varaResult=[];
varaEle=oParent.getElementsByTagName('*');
for(vari=0;i<aEle.length;i++){
if(aEle[i].className==sClass){
aResult.push(aEle[i]);
}
}
returnaResult;
}
window.onload=function(){
varoUL=document.getElementById('ul1');
varaBox=getByClass(oUL,'box');
for(vari=0;i<aBox.length;i++){
aBox[i].style.background='red';
}
};
</script>
</head>
<body>
<ulid="ul1">
<liclass="box"></li>
<liclass="box"></li>
<li></li>
<li></li>
<liclass="box"></li>
<li></li>
</ul>
</body>
</html>
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行结果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
JavaScript遍历DOM元素的常见方式示例
本文实例讲述了JavaScript遍历DOM元素的常见方式.分享给大家供大家参考,具体如下: 对于元素之间的空格,IE9以及之前的版本不会返回文本节点,,其他的浏览器会返回文本节点,所以我们在使用firstChild,lastChild时会导致行为不一致. DOM中为元素新增了下面几个属性: childElementCount:返回子元素(不包括文本节点和注释)的数量: firstElementChild:firstChild的元素版: lastElementChild:lastChild的元素
-
了解javascript中的Dom操作
DOM(Document Object Model): 结点的概念:整个文档就是由层次不同的多个节点组成,可以说结点代表了全部内容. 结点类型 1.元素结点 2.属性结点 3.文本结点 结点的注意点: 1.文本节点和属性结点都看作元素结点的子结点 2.我们一般所说的结点指的就是元素结点,将html标签看作是一个对象,并用"结点"称呼它 3.结点的关系有:父子关系.兄弟关系 1.获取元素结点 1)直接获取 ① document.getElementById() ② document.ge
-
JavaScript学习笔记之DOM操作实例分析
本文实例讲述了JavaScript学习笔记之DOM操作.分享给大家供大家参考,具体如下: 一.DOM概念 1. "D":Docment,指的是文档 2. "O":Object,指的是对象,在javascript有三种对象:用户定义对象.内建对象(JavaScript语言对象.如Math,Array).宿主对象(浏览器对象) 3. "M":Model,值得是Model,某种事物的表现形式 二.节点 1. 元素节点 :<body> <
-
浅谈JavaScript_DOM学习篇_图片切换小案例
今天开始学习DOM操作,下面写一个小案例来巩固下知识点. DOM: document object model (文档对象模型) 根据id获取页面元素 : 如: var xx = document.getElementById("id"); 根据标签获取元素: 如: var xx = document.getElementsByTagName("div"); <!DOCTYPE html> <html lang="en">
-
JavaScript学习笔记之DOM基础操作实例小结
本文实例讲述了JavaScript DOM基础操作.分享给大家供大家参考,具体如下: 一.子节点 1.元素节点.文本节点 实例01 html <body> <ulid="ul1"> 文本节点1 <li></li> 文本节点2<li></li> 文本节点3<li></li> 文本节点4<li></li> 文本节点5<li></li> 文本节点6&
-
JavaScript学习笔记之DOM基础 2.4
DOM的发展,与WEB标准化的大趋势相关甚密.只有基于正确的语义逻辑,DOM才能正确地发挥其功用.如今,正确的语义结构.表现与内容分离等要求,都已经成为网页设计中的基本要求.因此,在网页前端开发中,DOM的存在,无疑是为表现层.行为层甚至内容层面的连接提供了一个绝佳的API,成为热门的Ajax应用中不可或缺的组成部分. 一.平稳退化 1.概念 早期,在未使用JavaScript之前,网页中的内容可以正常显示出来,用户可以通过外设(如鼠标)操控浏览到相关内容,这种浏览体验对用户而言可能并不理想.
-
javascript性能优化之DOM交互操作实例分析
本文实例讲述了javascript性能优化之DOM交互操作技巧.分享给大家供大家参考,具体如下: 在javascript各个方面,DOM毫无疑问是最慢的一部分.DOM操作与交互要耗费大量时间,因为它们往往需要重新渲染整个页面或者某一部分.理解如何优化与DOM的交互可以极大提高脚本完成的速度. 1.最小化DOM更新 看下面例子: var list = document.getElementById("ul"); for (var i=0; i < 10; i++){ var ite
-
jQuery中DOM常见操作实例小结
本文实例讲述了jQuery中DOM常见操作.分享给大家供大家参考,具体如下: DOM属性操作 属性列表 属性 版本 说明 attr() 1.0 设置或返回文档节点的属性. removeAttr() 1.0 移除文档节点的属性. prop() 1.6 设置或返回DOM元素的属性. removeProp() 1.6 移除每个匹配元素的属性. addClass() 1.0 添加CSS类名. removeClass() 1.0 移除CSS类名. toggleClass() 1.2 切换CSS类名(存在就
-
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
本文实例讲述了JavaScript DOM节点操作方法.分享给大家供大家参考,具体如下: 使用DOM可以新建HTML元素,也可以删除已有的HTML元素. (一)新建元素: <script> //创建新的 <p> 元素 var newEle=document.createElement("p"); //创建文本节点 var node=document.createTextNode("这是使用Javascript创建的新段落."); //将文本节
-
javascript学习笔记_浅谈基础语法,类型,变量
基础语法.类型.变量 非数字值的判断方法:(因为Infinity和NaN他们不等于任何值,包括自身) 1.用x != x ,当x为NaN时才返回true; 2.用isNaN(x) ,当x为NaN或非数字值时,返回true; 3.用isFinity(x),在x不是NaN.Infinity.-Infinity时返回true; 虽然(字符串.数字.布尔值)不是对象,他们的属性是只读的,但也可以像操作对象一样来引用他们的属性和方法,原理: javascript构造一个(String.Number.Boo
-
JavaScript学习笔记整理_setTimeout的应用
setTimeou的t应用 var ids = []; function foo1(i) { this.i = i; console.log('i = '+i); ids[0] = setTimeout((function () { foo1(i); }),1000); } function foo2(j) { this.j = j; console.log('j = '+j); ids[1] = setTimeout((function () { foo2(j); }),1000); } fo
-
javascript学习笔记（四）function函数部分
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. Jscript 支持两种函数:一类是语言内部的函数(如eval() ),另一类是自己创建的. 在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它.(该变量的作用域是局部的). 您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量. 函数的调用方式 1.普通调用:functionName(实际参数...) 2.通过指向函数的变量去调用: var myVar
-
JavaScript学习笔记之数组的增、删、改、查
在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. 数组是JavaScript中常见的一个对象,它有一些经典的操作,比如数组的增.删.改.查.在这篇文章中主要整理这方面的相关操作方法. 增