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 相关文章推荐
srcElement表格样式
Sep 03 Javascript
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 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/01/02 PHP
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
php实现的发送带附件邮件类实例
2014/09/22 PHP
PHP线程的内存回收问题
2016/07/08 PHP
javascript 闭包疑问
2010/12/30 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
python中assert用法实例分析
2015/04/30 Python
Python下载懒人图库JavaScript特效
2015/05/28 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
Django 连接sql server数据库的方法
2018/06/30 Python
python读取文件名并改名字的实例
2019/01/07 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
如何在Python对Excel进行读取
2020/06/04 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
计算机应用专业推荐信
2013/11/13 职场文书
园林设计专业毕业生求职信
2014/03/23 职场文书
培训协议书范本
2014/04/22 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
学生党员检讨书范文
2014/12/27 职场文书
校园广播站开场白
2015/06/01 职场文书
时尚女魔头观后感
2015/06/04 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python