JavaScript学习笔记之DOM基础操作实例小结


Posted in Javascript onJanuary 09, 2019

本文实例讲述了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>

JavaScript学习笔记之DOM基础操作实例小结

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>

JavaScript学习笔记之DOM基础操作实例小结

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>

JavaScript学习笔记之DOM基础操作实例小结

实例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>

JavaScript学习笔记之DOM基础操作实例小结

三、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.3water.com/code/HtmlJsRun测试上述代码运行结果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
用javascript将数据导入Excel示例代码
Sep 10 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
Vue SPA 首屏优化方案
Feb 26 Vue.js
如何解决webpack-dev-server代理常切换问题
Jan 09 #Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 #Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 #Javascript
Node.js的进程管理的深入理解
Jan 09 #Javascript
从vue源码看props的用法
Jan 09 #Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 #Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 #Javascript
You might like
PHP读写文件的方法(生成HTML)
2006/11/27 PHP
yii框架源码分析之创建controller代码
2011/06/28 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
深入理解PHP中的Session和Cookie
2013/06/21 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
javascript 冒号 使用说明
2009/06/06 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
Django的分页器实例(paginator)
2017/12/01 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
浅谈Python 参数与变量
2020/06/20 Python
Python同时迭代多个序列的方法
2020/07/28 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
文秘专业大学生求职信
2013/11/10 职场文书
2015年全国爱耳日活动总结
2015/02/27 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
证婚人致辞精选
2015/07/28 职场文书
房产遗嘱范本
2015/08/06 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
MySQL派生表联表查询实战过程
2022/03/20 MySQL