JavaScript初探系列(八)——DOM
DOM(文档对象模型)是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加、删除和修改页面的某一部分。
HTML DOM 树形结构如下:
一、Node方面
(一)、节点类型
节点类型(nodeName) | 数值常量(nodeValue) |
元素节点 | 1 |
属性节点 | 2 |
文本节点 | 3 |
注释节点 | 8 |
文档节点 | 9 |
文档碎片节点 | 11 |
确定节点类型,兼容的方法是将nodeType属性与数字值进行比较,如下所示:
if(someNode.nodeType==){
alert("Node is an element");
}
(二)、节点关系
每一个节点都有一个childNodes属性,其中保存着一个NodeList对象。NodeList是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点。
(三)、节点操作
注意事项
a. 注意appendChild的用法:
1.添加功能:像childNodes列表的末尾添加一个节点,添加节点后,childNodes的新增节点,父节点以及以前的最后一个子节点的关系指针都会得到相应更新。
var returnedNode=someNode.appendChild(newNode);
alert(returnedNode==newNode)//true
2.移位功能:如果传入到appendChild()中的节点已经是文档的一部分,那么结果就是将该节点从原来的位置转移到新的位置。
var returnedNode=someNode.appendChild(someNode.firstChild);
alert(returnedNode==someNode.firstChild)//false
alert(returnedNode==someNode.lastChild)//true
3.与insertBefore区别:后者是把节点放在childNodes某个特定的位置上,而不是放在末尾,该方法有两个参数:要插入的节点和作为参照点的节点。
//输入后成为最后一个子节点
var returnedNode=someNode.insertBefore(newNode,null);
alert(returnedNode==someNode.lastChild)//true //输入后成为第一个子节点
var returnedNode=someNode.insertBefore(newNode,firstChild);
alert(returnedNode==someNode.firstChild)//true
b. 注意replaceChlid用法
前面的appendChild和insertBefore都是插入节点,不会移除节点。而replace方法接受2个参数:要插入的节点和要替换的节点,要替换的节点将会从文档中被移除,同时由要插入的节点占据其位置。从技术上讲:被替换的节点还在文档中,但是没有位置。
c. 注意cloneChild用法
cloneChild方法接受一个布尔值参数,表示是否执行深复制。
- true:深复制,复制节点及其整个子节点树。
- false:浅复制,只复制节点本身。、
二、Document类型
Document类型可以表示HTML页面或者其他基于xml的文档。作为HTMLDocument的一个实例,document对象还有一些标准的Document对象所没有的属性,例如和网页请求有关的3个属性是:URL,domain,referrer,应用最多的是在查找元素方面:
三、Element类型
该类型提供了对元素标签名,子节点及特性的访问。所有的HTML元素都是由HTMLElement类型表示,HTMLElement类型直接继承自element并添加了一些属性:id,title,lang,dir,className.
注意事项
1.对id或lang的修改对用户而言是透明不可见的(假设没有基于透明的值设置的css样式)
2.title的修改只会体现在鼠标移动到这个元素上时会显示出来。
3.对dir的修改只会体现在属性被重写的那一刻,立刻影响页面中文本的左右对齐方式。
4.修改className时,如果新类型关联了与此前不同的css样式,那么就会立刻应用新的样式。
四、Attr类型
五、Text类型
六、DOM扩展
1.Selectors API扩展:querySelector()方法和querySelectorAll()方法
注意事项
querySelector只返回匹配的第一个元素,如果没有匹配项,返回null。
querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组)。 并且返回的结果是静态的,之后对document结构的改变不会影响到之前取到的结果。
目前IE8+,ff,chrome都支持此api(IE8中的selector string只支持css2.1的)。
关于两者的详细区别,我前面看过一篇博客:http://www.cnblogs.com/QingFlye/p/4006484.html
2.HTML5扩展:新增getElementByClassName方法
参考资料:https://www.cnblogs.com/ljk001/p/8011952.html
JavaScript初探系列(八)——DOM的更多相关文章
- JavaScript初探系列目录
一 系列导航 结合各方面的参考资料,整理出来以下主要目录,供方便浏览查看 (一)初探系列 JavaScript初探系列(1)——基本概念 JavaScript初探系列(2)——数 ...
- JavaScript初探系列之Ajax应用
一 什么是Ajax Ajax是(Asynchronous JavaScript And XML)是异步的JavaScript和xml.也就是异步请求更新技术.Ajax是一种对现有技术的一种新的应用,不 ...
- JavaScript初探系列之基本概念
JavaScript的核心语言特性在ECMA-262中是以名为ECMAScript(ECMA, EuropeanComputer Manufacturers Association )的伪语言的形式来 ...
- JavaScript初探系列(十)——Event
一.绑定事件的两种方式 (一).方式一:onclick 举例: <body> <button>点我</button> <script> var btn ...
- JavaScript初探系列(五)——this指向
一.涵义 this关键字是一个非常重要的语法点.毫不夸张地说,不理解它的含义,大部分开发任务都无法完成.this可以用在构造函数之中,表示实例对象.除此之外,this还可以用在别的场合.但不管是什么场 ...
- JavaScript初探系列之日期对象
时间对象是一个我们经常要用到的对象,无论是做时间输出.时间判断等操作时都与这个对象离不开.它是一个内置对象——而不是其它对象的属性,允许用户执行各种使用日期和时间的过程. 一 Date 日期对象 ...
- JavaScript初探系列之面向对象
面向对象的语言有一个标志,即拥有类的概念,抽象实例对象的公共属性与方法,基于类可以创建任意多个实例对象,一般具有封装.继承.多态的特性!但JS中对象与纯面向对象语言中的对象是不同的,ECMA标准定义J ...
- JavaScript初探系列之数组的基本操作
在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只 ...
- JavaScript初探系列之String的基本操作
1.字符串转换 字符串转换是最基础的要求和工作,你可以将任何类型的数据都转换为字符串,你可以用下面三种方法的任何一种: var myStr = num.toString(); // "19& ...
随机推荐
- 上传文件至Github仓库
Github的使用 创建一个本地的版本库(也就是一个文件夹) 新建文件夹,或使用Git bash命令行窗口创建 $ mkdir test $ cd test 在命令行中输入 git init把这个文件 ...
- Java 之 Scanner 类
一.Scanner 类 Scanner 是一个可以解析基本类型和字符串的简单文本扫描器. Demo: Scanner sc = new Scanner(System.in); int i = sc.n ...
- 常用Windows命令、常用 Cmd命令(补充)
常用的Windows 命令使用能够提升工作效率以及快捷处理事项. 下面为平时常用的Windows 命令/cmd 命令. 一.以下命令无需打开cmd 窗口即可操作(输入完毕 打个 回车,即可执行). 1 ...
- idea 端口被占用
打开你的DOS命令首先输入 netstat -ano|findstr 8088 (8088即为被占用的端口号) 再输入taskkill /pid 7348 /f (7348即为上 ...
- Python使用Thrift
2019年07月30日 14:59:29 Shower稻草人 阅读数 25更多 分类专栏: Python 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接 ...
- iodine dig A
(base) bonelee@bonelee-VirtualBox:~/Desktop$ dig paeadgpy.abc.com @45.32.247.94 ; <<>> D ...
- php单例型(singleton pattern)
搞定,吃饭 <?php /* The purpose of singleton pattern is to restrict instantiation of class to a single ...
- Win10系统如何关闭自动更新?
现在很多电脑的系统都升级到了win10了,win10已经渐渐普及到每个人的电脑中,但是,win10系统有一个功能特别讨人厌,我自认为挺讨厌这个功能的,它就是“自动更新”功能,你可能会说,自动更新不是挺 ...
- eclipse解决中文字体太小问题(转载)
最近新装了Win7,打开eclipse3.7中文字体很小,简直难以辨认.在网上搜索发现这是由于Eclipse 3.7 用的字体是 Consolas,显示中文的时候默认太小了. 解决方式有两种:一. ...
- 《快活帮》第八次团队作业:Alpha冲刺
项目 内容 这个作业属于哪个课程 2016计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 实验十二 团队作业8-软件测试与ALPHA冲刺 团队名称 快活帮 作业学习目标 (1)掌握 ...