DOM知识点总结
今天简单整理了一下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这一块有所帮助。
如有错误或是不足,还请指出,我将尽快查证补漏!
最新文章
- Redis-cluster集群【第一篇】:redis安装及redis数据类型
- [BS-02] iOS数组、字典、NSNumber 新写法—— @[]、@{}
- POJ1979 Red and Black (简单DFS)
- sqoop的job工具
- linux入门教程(七) linux系统用户以及用户组管理
- [转载]如何查看某个查询使用了多少TempDB空间
- 资源回收 left
- UVA - 11986 Save from Radiation
- Windows下根据端口号查找进程并关闭
- Python【第三篇】文件操作、字符编码
- HTML prefetch 预加载无效的记录
- nice coding (与其亡羊补牢,不如未雨绸缪)
- 排错-Loadrunner录制打不开浏览器解决方法
- js和jquery获取当前元素的内容
- js screen
- ubuntu的一些常用命令及疑难杂症
- mysql Lock wait timeout exceeded; try restarting transaction解决
- Linux命令(八)Linux系统信息相关命令
- BZOJ - 3196 Tyvj 1730 二逼平衡树 (线段树套treap)
- windows + myeclipse 调试 linux + tomcat 的java web服务 配置方式
热门文章
- 2018-4-25 初识html
- 关于shell命令的一些用法和技巧
- SpringBoot的学习【7.引入配置文件】
- linux下centos解压时报错: gzip: stdin: not in gzip format tar: Child returned status 1 tar: Error is not recoverable: exiting now
- spring cloud gateway的stripPrefix配置
- SQLI DUMB SERIES-15
- 脚手架方式搭建vue项目
- MATLAB 进行五种边缘检测
- js&#183;逻辑运算
- CSS 关于权重的另类解说