今天简单整理了一下js三部曲之DOM部分的内容，二话不说先上笔记：

1.什么是DOM？
　　Document Object Model，即文档对象模型，它是让JavaScript能够操作html和xml的一系列编程接口

2.<html></html>标签代表的是文档的根标签而不是整个文档，document代表的才是整个文档

3.查看元素节点
　　document.getElementById() // 元素id在ie8以下的浏览器不区分大小写，而且也返回匹配name属性的元素。不过不常用，因为在开发的时候一般自己写的页面中只能出现一次或少数几次id，而这个id通常出现在页面顶层以作为后端抽取代码的接口
　　document.getElementsByTagName() // 生成的是一个类数组对象，包括之后所有DOM和BOM系统给我们生成的成组的东西都是类数组对象。还有这个获取元素的方法是最主流的用法，它没有什么兼容性的问题。需要注意的是可以写成document.getElementsByTagName('*')
　　document.getElementsByClassName() // ie8及以下的版本中没有这个方法
　　document.getElementsByName() // 只有部分标签才需要添加name属性用意提交数据（表单、表单元素、img、iframe），在之前的浏览器里面给div等元素添加name属性是不能被识别的，所以不常用
　　querySelector() // css选择器（在css中怎么选择，到了这里就可以怎么选择，比如.one>.two .three），在ie7及以下的版本中没有。因为选出来的元素不是实时的,所以在用法上及其受局限
　　querySelectorAll() // 同上

4.遍历节点树
　　parentNode // 父节点（最顶端的parentNode为#document，再向上返回null）
　　childNodes // 子节点们
　　firstChild
　　lastChild
　　nextSibling // 后一个兄弟节点
　　previousSibling // 前一个兄弟节点

5.节点的类型（nodeType）
　　元素节点 // 1
　　属性节点 // 2
　　文本节点 // 3
　　注释节点 // 8
　　document // 9
　　documentFragment // 11。这是一个DOM元素占位符，用于将其子元素插入HTML文档树

6.节点的四个属性
　　nodeName // 元素的标签名，以大写形式表示，只读
　　nodeValue // 只有文本节点和注释节点有，text节点或comment节点的文本内容，可读写
　　nodeType // 该节点的类型，只读
　　attributes // 节点的属性集合

7.节点的一个方法：.hasChildNodes() // 是否含有子节点

8.基于元素节点树的遍历
　　parentElement // 返回当前元素的父元素节点（ie9及以下不兼容）
　　children // 返回当前元素的元素子节点（ie4.5有兼容问题）
　　firstElementChild // 返回第一个子元素节点（ie9及以下不兼容）
　　lastElementChild // 返回最后一个子元素节点（ie9及以下不兼容）
　　nextElementSibling // 返回后一个兄弟元素节点（ie9及以下不兼容）
　　previousElementSibling // 返回前一个兄弟元素节点（ie9及以下不兼容）

9.DOM结构树
　　Node{
　　　　Document{
　　　　　　HTMLDocument
　　　　　　XMLDocument
　　　　}
　　　　CharacterData{
　　　　　　Text
　　　　　　Comment
　　　　}
　　　　Element{
　　　　　　HTMLElement{
　　　　　　　　HTMLHeadElement
　　　　　　　　HTMLBodyElement
　　　　　　　　HTMLTitleElement
　　　　　　　　HTMLParagraphElement
　　　　　　　　HTMLInputElement
　　　　　　　　HTMLTableElement
　　　　　　　　etc.
　　　　　　}
　　　　　　XMLElement
　　　　}
　　　　Attr
　　}

10.DOM结构树注意点
　　①getElementById方法定义在Document.prototype上，即Element节点上不能使用
　　②getElementsByName方法定义在HTMLDocument.prototype上，即非html中的document以外不能使用（XMLDocument，XHLElement）
　　③getElementsByTagName方法定义在Document.prototype和Element.prototype上，即既可以通过document.getElementsByTagName查找也可以通过div.getElementsByTagName查找
　　④HTMLDocument.prototype定义了一些常用的属性，document.body、document.head分别指代HTML文档中的<body><head>标签
　　⑤Document.prototype上定义了documentElement属性，指代文档的根元素，在HTML文档中，它总是指代<html>元素
　　⑥getElementsByClassName和querySelector、querySelectorAll在Document.prototype和Element.prototype上均有定义

11.增加节点的方法
　　document.createElement()
　　document.createTextNode()
　　document.createComment()
　　document.createDocumentFragment()

12.插入节点的方法
　　PARENTNODE.appendChild() // 把页面中的一个元素节点添加到另一个地方相当于剪切操作
　　PARENTNODE.insertBefore(a, b) // 在PARENTNODE里面insert a before b

13.删除节点的方法
　　PARENTNODE.removeChild() // 返回被remove的节点
　　SELFNODE.remove() // 返回被remove的节点

14.替换节点的方法
　　PARENTNODE.replaceChild(new, origin)

15.Element节点的一些属性
　　innerHTML
　　innerText（老版本火狐不兼容）
　　textContent（老版ie不好使）

16.Element节点的一些方法
　　ELEMENT.setAttribute('name', 'value')
　　ELEMENT.getAttribute('name')
　　如果是想要修改或添加某个元素节点的class或id属性，那么可以简单的写作ELEMENT.className或是ELEMENT.id

　　以上是我的笔记。这些基本上是DOM中用的比较多的，同时给出了浏览器的兼容性问题，希望对读者在DOM这一块有所帮助。

　　如有错误或是不足，还请指出，我将尽快查证补漏！

DOM知识点总结的更多相关文章

  1. Javascript + Dom知识点总结

    Javascript + Dom知识点总结 1．用Javascript声明数组和字典的方式 // 数组声明 var arr = new Array(); arr["0"] = &q ...

  2. javasctipt之DOM知识点

    一:DOM节点 子节点:childNodes 父节点:parentNode offsetPrent 二:元素属性操作 方式一:xxx.style.xxx 方式二:xxx.style["xxx ...

  3. HTML DOM 知识点整理（一）—— Document对象

    一.DOM对象 DOM对象整体包括: HTML DOM Document对象 HTML DOM 元素对象 HTML DOM 属性对象 HTML DOM 事件对象 HTML DOM Console 对象 ...

  4. HTML DOM知识点补充：

    DOM Console 控制台对象提供了浏览器的debug的方法支持. 常用的:console.log(). ⚠️coffeescript中,这个方法不加括号. DOM Document 当一个HTM ...

  5. DOM 知识点梳理（笔记）

    1998年10月DOM1级规范成为了W3C的推荐标准,为基本的文档结构及查询提供了接口. 一.Node类型 每个节点都有个nodeType属性,表明了节点的类型.共有12种类型: 元素节点       ...

  6. 前端DOM知识点

    DOM即文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.DOM把网页和脚本 ...

  7. XML DOM 知识点

    第一部分[DOM基础] DOM介绍: 1.什么是 HTML DOM? HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法(接口). 2.什么是 XML DOM? XML DO ...

  8. 《对象及DOM知识点及其应用1》

    1.图片间的来回切换用if{}else{}; <超链接方式的切换图片(常用)>如:<a href="../images1/1-small.jpg" id=&quo ...

  9. JS DOM与BOM

    DOM知识点 [DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API).DOM代表着被加载到浏览器窗口里的当前网页:浏览器向我们提供了当前网页的地图(或者说模型),而我们可以通过js ...

随机推荐

  1. holer实现外网访问本地tomcat

    外网访问内网Tomcat 内网主机上安装了Tomcat,只能在局域网内访问,怎样从公网也能访问本地Tomcat? 本文将介绍使用holer实现的具体步骤. 1. 准备工作 1.1 安装Java 1.7 ...

  2. 大数据处理N!(21<N<2000)

    输入: 每行输入1个正整数n,(0<n<1000 000) 输出: 对于每个n,输出n!的(十进制)位数 digit, 和最高位数firstNum.(n!约等于 firstNum * 10 ...

  3. C++编程入门

    学习一门新的程序设计语言的最好方法就是练习编写程序. 每个C++程序都包含一个或多个函数,其中一个必须命名为main.操作系统通过调用main来运行C++程序. 一个函数定义包含四个部分:返回类型:函 ...

  4. jQuery图片自动添加水印插件

    JS脚本(jQuery)为图片加水印效果预览:http://hovertree.com/texiao/jquery/94/ 本功能使用HTML5实现,可为图片加上文字水印,可设置文字,设置颜色,位置等 ...

  5. CCF-Crontab-201712-3

    大概是CCf第三题中最麻烦的一个吧 我的思路其实我觉得还可以,模拟...可是超时了233 只有90分 [ 可是我看网上其他人也是模拟算法啊, 速度还是太慢了 120行, 1个半小时  大部分花在了de ...

  6. HDU 2176:取(m堆)石子游戏（Nim博弈）

    取(m堆)石子游戏 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  7. java 环境的安装、设置免密登陆、进行hadoop安装、关闭防火墙

    1.去这个网站下载对应的版本:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html我这 ...

  8. 自建yum仓库，分别为网络源和本地源

    配置本地源 建立本地源目录 [root@qingcheng-db lgp]#mkdir /mnt/cdrom [root@qingcheng-db lgp]#mkdir /yum 挂载Centos光盘 ...

  9. informix 随笔

    1.新建连接create new database connection 2.database Url:  jdbc:informix-sqli://119.84.39.35:29999/gps_pr ...

  10. 寒假作业 pta编程总结3

    实验代码: 某地老鼠成灾,现悬赏抓老鼠,每抓到一只奖励10元,于是开始跟老鼠斗智斗勇:每天在墙角可选择以下三个操作:放置一个带有一块奶酪的捕鼠夹(T),或者放置一块奶酪(C),或者什么也不放(X).捕 ...