JavaScript之DOM_动力节点Java学院整理


Posted in Javascript onJuly 03, 2017

由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM。
始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作:

  1. 更新:更新该DOM节点的内容,相当于更新了该DOM节点表示的HTML的内容;
  2. 遍历:遍历该DOM节点下的子节点,以便进行进一步操作;
  3. 添加:在该DOM节点下新增一个子节点,相当于动态增加了一个HTML节点;
  4. 删除:将该节点从HTML中删除,相当于删掉了该DOM节点的内容以及它包含的所有子节点。

在操作一个DOM节点前,我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.getElementById()document.getElementsByTagName(),以及CSS选择器document.getElementsByClassName()

由于ID在HTML文档中是唯一的,所以document.getElementById()可以直接定位唯一的一个DOM节点。

document.getElementsByTagName()document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM,可以先定位父节点,再从父节点开始选择,以缩小范围。

例如:

// 返回ID为'test'的节点:
var test = document.getElementById('test');

// 先定位ID为'test-table'的节点,再返回其内部所有tr节点:
var trs = document.getElementById('test-table').getElementsByTagName('tr');

// 先定位ID为'test-div'的节点,再返回其内部所有class包含red的节点:
var reds = document.getElementById('test-div').getElementsByClassName('red');

// 获取节点test下的所有直属子节点:
var cs = test.children;

// 获取节点test下第一个、最后一个子节点:
var first = test.firstElementChild;
var last = test.lastElementChild;

第二种方法是使用querySelector()querySelectorAll(),需要了解selector语法,然后使用条件来获取节点,更加方便:

// 通过querySelector获取ID为q1的节点:
var q1 = document.querySelector('#q1');

// 通过querySelectorAll获取q1节点内的符合条件的所有节点:
var ps = q1.querySelectorAll('div.highlighted > p');

注意:低版本的IE<8不支持querySelectorquerySelectorAll。IE8仅有限支持。

严格地讲,我们这里的DOM节点是指Element,但是DOM节点实际上是Node,在HTML中,Node包括ElementCommentCDATA_SECTION等很多种,以及根节点Document类型,但是,绝大多数时候我们只关心Element,也就是实际控制页面结构的Node,其他类型的Node忽略即可。根节点Document已经自动绑定为全局变量document

练习

如下的HTML结构:

JavaScript
Java
Python
Ruby
Swift
Scheme
Haskell

<!-- HTML结构 -->
<div id="test-div">
<div class="c-red">
  <p id="test-p">JavaScript</p>
  <p>Java</p>
 </div>
 <div class="c-red c-green">
  <p>Python</p>
  <p>Ruby</p>
  <p>Swift</p>
 </div>
 <div class="c-green">
  <p>Scheme</p>
  <p>Haskell</p>
 </div>
</div>

请选择出指定条件的节点:

// 选择<p>JavaScript</p>:
var js = ???;
// 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>:
var arr = ???;
// 选择<p>Haskell</p>:
var haskell = ???;

Javascript 相关文章推荐
javascript实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
框架页面高度自动刷新的Javascript脚本
Nov 01 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 #Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 #Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 #Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 #Javascript
React组件生命周期详解
Jul 03 #Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 #Javascript
Swiper实现轮播图效果
Jul 03 #Javascript
You might like
初级的用php写的采集程序
2007/03/16 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
Python fileinput模块使用实例
2015/05/28 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
J2EE面试题大全
2016/08/06 面试题
土地转让协议书
2014/04/15 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
创业计划书之家教中心
2019/09/25 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL
python函数的两种嵌套方法使用
2022/04/02 Python
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL