文章目录
一、DOM文档对象模型(Document Object Model)
是W3C制定的一套规范,提供了一组操作HTML和XML文档的API,即提供一套属性、方法和事件 。
说的直白一点就是文档对JS提供了一些操作页面元素的接口,使得JS语言可以动态的控制页面内容。
DOM作用
DOM作用
DOM的作用就是关于对页面中元素和内容的访问和控制。
获取页面中的元素
获取/设置元素的属性
获取/设置元素的样式
添加/删除元素
绑定事件—触发响应
document对象
document对象表示页面文档,对应的就是磁盘中的.html文件(也可能是.xml文件)。
属性
document.title:访问当前文档的标题
document.body:访问当前文档的body元素
方法
write(): 在当前页面中输出内容
getElementById(): 返回指定id的第一个对象的引用
getElementsByName(): 返回带有指定名称的对象的集合
getElementsByTagName(): 返回带有指定标签名的对象的集合
不仅document对象具有此方法,其他DOM对象同样具有,用来在元素内部根据标签名查找
DOM对象的属性
DOM对象的属性和HTML标签的属性几乎是一样的,因为DOM对象本身就是对页面中内容的封装。
语法:DOM对象名.属性名。
获取/设置标签中内容的属性
DOM对象允许JS语言操作元素的内容,其中包括文本内容和元素内容。也就是说JS可以不仅仅可以修改元素本身就连元素的子级内容都可以修改。
想要修改标签中的内容阔使用如下两个属性:
innerText:访问元素的文本内容,只会把内容当成纯文本。
innerHTML:访问元素的子级内容,可以把内容当成纯文本也可以解析到DOM树中。
DOM相关类型
DOM对象会有一些类型的区分,DOM中会把元素、属性和文本这样的内容称之为:node(节点),所以就有了元素节点(element类型),文本节点(text类型)等等,下DOM类型的种类如下:
Document:文档
Element:元素
Text:文本
Attr:属性
Nodelist:节点列表的集合
NamedNodeMap:属性映射集合
document类型
表示DOM树中的最顶层节点,对应HTML文档。
属性
childNodes:子节点列表
documentElement:文档根元素
nodeType:访问节点的类型
1表示元素节点
2表示属性节点
3表示文本节点
[具体参考请访问:http://www.w3school.com.cn/jsref/prop_node_nodetype.asp](http://www.w3school.com.cn/jsref/prop_node_nodetype.asp)
方法
createElement (元素名) :创建元素节点
createTextNode (文本内容) :创建文本节点
appendChild(子节点):添加子节点,主要添加根元素
createDocumentFragment():创建文档碎片
element类型
表示HTML文档中的元素。
属性
nodeName/nodeType:节点名称/节点类型
childNodes:返回子节点集合,NodeList类型
attributes:返回属性集合,NamedNodeMap类型
firstChild/lastChild:第一个/最后一个子节点
parentNode:返回元素的父节点
方法
appendChild():添加子节点,包括子元素、文本节点等
getAttribute():获取指定属性的值
setAttribute():添加/修改属性
text类型
表示HTML文档中的文本节点。
属性
data:文本数据
length:数据长度
方法
appendData:向节点追加数据
deleteData:从节点删除数据
insertData:向节点中插入数据
replaceData:替换节点中的数据
DOM基本操作
关于DOM的基本操作非常简单,具体的操作如下:
写入操作:parent.appendChild(要插入的节点)
插入操作:parent.insertBefore(新的节点,已经存在的节点)
删除操作:parent.removeChild(要删除的节点)
替换操作:parent.replaceChild(新的节点,被替换的节点)
克隆操作:node.cloneNode(true|false是否包括内容)