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的更多相关文章

  1. JavaScript初探系列目录

    一  系列导航 结合各方面的参考资料,整理出来以下主要目录,供方便浏览查看 (一)初探系列           JavaScript初探系列(1)——基本概念 JavaScript初探系列(2)——数 ...

  2. JavaScript初探系列之Ajax应用

    一 什么是Ajax Ajax是(Asynchronous JavaScript And XML)是异步的JavaScript和xml.也就是异步请求更新技术.Ajax是一种对现有技术的一种新的应用,不 ...

  3. JavaScript初探系列之基本概念

    JavaScript的核心语言特性在ECMA-262中是以名为ECMAScript(ECMA, EuropeanComputer Manufacturers Association )的伪语言的形式来 ...

  4. JavaScript初探系列(十)——Event

    一.绑定事件的两种方式 (一).方式一:onclick 举例: <body> <button>点我</button> <script> var btn ...

  5. JavaScript初探系列(五)——this指向

    一.涵义 this关键字是一个非常重要的语法点.毫不夸张地说,不理解它的含义,大部分开发任务都无法完成.this可以用在构造函数之中,表示实例对象.除此之外,this还可以用在别的场合.但不管是什么场 ...

  6. JavaScript初探系列之日期对象

    时间对象是一个我们经常要用到的对象,无论是做时间输出.时间判断等操作时都与这个对象离不开.它是一个内置对象——而不是其它对象的属性,允许用户执行各种使用日期和时间的过程. 一   Date 日期对象 ...

  7. JavaScript初探系列之面向对象

    面向对象的语言有一个标志,即拥有类的概念,抽象实例对象的公共属性与方法,基于类可以创建任意多个实例对象,一般具有封装.继承.多态的特性!但JS中对象与纯面向对象语言中的对象是不同的,ECMA标准定义J ...

  8. JavaScript初探系列之数组的基本操作

    在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只 ...

  9. JavaScript初探系列之String的基本操作

    1.字符串转换 字符串转换是最基础的要求和工作,你可以将任何类型的数据都转换为字符串,你可以用下面三种方法的任何一种: var myStr = num.toString(); // "19& ...

随机推荐

  1. 【转载】如何删除Windows远程桌面保存的账号密码数据

    在Windows系统中,无论是win7.win8还是win10系统,都可使用Windows系统自带的远程桌面连接工具来远程服务器,很多时候Windows远程桌面在连接一次后会自动保存连接的账号密码等信 ...

  2. [摘录] 当页[ModalRoute.of(context)]路由属性详解

    ModalRoute.of(context) API可以获取当前路由对象,通过它我们可以获取关于当前页面的所有属性: 属性: isActive 当前路由是都位于navigator中:如果该路由acti ...

  3. CSS揭秘-半透明边框与多重边框

    场景一: 实现半透明边框: 由于CSS样式的默认行为,背景色的渲染范围是 content+padding+border. 半透明边框被主调色影响, 实现的效果为   解决方案: 使用backgroun ...

  4. FreeRTOS 任务通知模拟事件标志组

    实验 //设置事件位的任务 void eventsetbit_task(void *pvParameters) { u8 key; while(1) { if(EventGroupTask_Handl ...

  5. Pandas 之 描述性统计案例

    认识 jupyter地址: https://nbviewer.jupyter.org/github/chenjieyouge/jupyter_share/blob/master/share/panda ...

  6. MySQL Config--参数innodb_flush_method

    延迟写 传统的UNIX实现在内核中设有缓冲区高速缓存或页面高速缓存,大多数磁盘I/O都通过缓冲进行.当将数据写入文件时,内核通常先将该数据复制到其中一个缓冲区中,如果该缓冲区尚未写满,则并不将其排入输 ...

  7. Buuctf-------WEB之admin

    1.抓包扫描一把梭,无事发生地说 注释里发现 万能密码试试,报错 用的flask,pythonweb 后面发现报错页面可以调试,嘿嘿嘿 康康我们发现了什么 拿去破解,无果 于是打算代码拿下来康康,em ...

  8. BitMap 图片格式与Base64Image格式互转方法

    BitMap 图片格式与Base64Image格式互转方法 /// <summary> /// 图片转为base64编码的字符串 /// </summary> /// < ...

  9. 2019年杭电多校第二场 1008题Harmonious Army(HDU6598+最小割+建图)

    题目链接 传送门 题意 有\(n\)个士兵,要你给他们分配职业.有\(m\)对关系,对于某一对关系\(u,v\),如果同为勇士则总能力增加\(a\),同法师则增加\(c\),一个勇士一个法师增加\(\ ...

  10. MyBatis-plus的入门学习

    MyBatis优势: Sql简单语句可以自由控制,更灵活,性能更高.. sql与代码分离,易于阅读和维护 提供xml标签,支持编写动态sql语句. 劣势: 简单crud操作还是写SQL 语句 xml中 ...