1.文档对象模型,浏览器提供给js操作html文档的api
节点Node --构成HTML文档最基本的单元
分类:
文档节点:整个HTML文档
元素节点:HTML文档中的HTML标签
属性节点:元素的属性
文本节点:HTML标签中的文本内容
文档节点 | 元素节点 | 属性节点 | 文本节点 | |
nodeName | #document | 标签名 | 属性名 | #text |
nodeType | 9 | 1 | 2 | 3 |
nodeValue | null | null | 属性值 | 文本 |
2.Node.prototype(继承object根构造函数)
1)属性
获取父节点的子节点
1.element.childNodes 属性
-返回元素的一个子节点的数组(包括空白)
在ie8及以下的浏览器中,不识别空白
element.children 属性可以获取到当前元素的所有子元素(不包括空白文本)
element.childElementCount 子元素的数量,返回值和children.length值相等
2.element.firstChild 属性
-返回元素的第一个子节点
element.firstElementChild 获取当前元素的第一个子元素(不包括空白)
不支持在ie8及以下的浏览器
3.element.lastChild 属性
-返回的最后一个子元素
element.lastElementChild 最后一个孩子元素节点,不支持在ie8及以下的浏览器
获取父节点和兄弟节点,通过具体的节点调用
1.parentNode 属性
表示当前节点的父节点
2.previousSibling 属性
表示当前节点的前一个兄弟节点(也会获取到空白)
previousElementSibling
表示当前节点的前一个兄弟元素,ie8不支持
3.nextSibling 属性
表示当前节点的后一个兄弟节点
nextElementSibling
下一个兄弟元素节点,ie8不支持
2)方法
增删改(都要由父节点去调用)
1.appendChild()
-向一个父节点中添加一个新的子节点
语法:
父节点.appendChild(子节点)
2.insertBefore()
-在指定的子节点前前面插入新的子节点
语法:
父节点.insertBefore(新节点,旧节点)
3.replaceChild()
-可以使用指定的子节点替换已有的子节点
语法:
父节点.replaceChild(新节点,旧节点)
4.removeChild()
-可以删除一个子节点
语法:
父节点.removeChild(子节点)
其他方法
1.cloneNode()
可以复制一个调用他的节点,默认为浅复制
语法:调用它的节点.cloneNode(参数)
可以接收一个参数,参数为true时,为深复制,即复制节点以及整个子节点数
参数为false时,为浅复制,仅复制该节点,不包括其他的一切
2.normalize()
处理文档树中的文本节点,由于解析器的实现或DOM操作等原因,可能会出现文本节点不包含文本,
或者接连出现两个文本节点,当在某个节点上调用了该方法,会删除空白节点,
会找到相邻的两个文本节点,并将他们合并为一个文本节点。
3.Document.prototype
都可以继承Node中的所有属性和方法
1)属性
documentElement 始终指向HTML页面中的<html>元素。
body 直接指向<body>元素
doctype 访问<!DOCTYPE>, 浏览器支持不一致,很少使用
title 获取文档的标题
URL 取得完整的URL
domain 取得域名,并且可以进行设置,在跨域访问中经常会用到。服务器测
referrer 取得链接到当前页面的那个页面的URL,即来源页面的URL。
images 获取所有的img对象,返回HTMLCollection类数组对象
forms 获取所有的form对象,返回HTMLCollection类数组对象
links 获取文档中所有带href属性的<a>元素
2)方法
获取文档元素节点,通过document对象调用
document.getElementById()
-通过id属性获取一个元素节点对象
document.getElementsByTagName()
-通过标签名获取一组元素节点对象
这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中
即使查询到的元素只有一个,也会封装到数组中
document.getElementsByName()
-通过name属性(表单项)获取一组元素节点对象
innerHTML用于获取元素内部的HTML代码,对于input这种自结束标签,这个属性没有意义
如果需要读取元素节点属性,直接使用 元素.属性名
class属性不能采用这种方式
读取class属性时需要使用 元素.className
对象.innerHTML 通过这个属性可以获取到元素内的html代码
对象.innerText 该属性可以获取到元素内部的文本内容
它和innerHTML类似,但它会将html标签去除
对象.textContent 元素内部的文本,不去除空格和回车
document.getElementsByClassName()
-可以根据class属性值获取一组元素节点对象,
但是该方法不支持ie8及以下浏览器
document.querySelector()
-需要一个选择器的字符串作为参数,可以根据一个css选择器来查询一个元素节点对象
-虽然ie8中没有getElementsByTagName();但是可以使用querySelector()
-使用该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么他只会返回第一个
document.querySelectorAll()
-该方法会返回所有符合条件的元素,将其封装到数组中
-即使符合条件的元素只有一个,也会返回数组
创建元素节点
document.createElement()
-用于创建一个元素节点对象
document.createTextNode()
-用来创建一个文本节点对象
4.Element.prototype
element 获取元素节点的子节点,通过具体的元素节点调用
1)属性
id 元素在文档中的唯一标识符
title 有关元素的附加说明信息
className 与元素class特性对应
src img元素具有的属性
alt img元素具有的属性
lang 元素内容的语言代码,很少使用!
dir 语言方向,ltr,rtl 左到右,右到左、
2)方法
1.element.getElementsByTagName() 方法
-返回指定标签名的所有子元素集合。
2.element.setAttribute('','')
-创建一个自定义属性
两个参数,第一个参数为要设置的特性名,第二个参数为对应的值。
如果该值存在,替换
3.element.getAttribute('')
-获取自定义属性
参数为实际元素的属性名
通过getAttribute()访问对象的style属性,返回的是CSS文本(字符串)
访问onclick属性,返回的是一个函数
通过属性访问style返回的是相应代码字符串,onclick返回的是一个函数
4.element.removeAttribute('')
-移除指定的特性
参数为实际元素的属性名
document.createElement()
参数为要创建元素的标签名。该标签名在HTML中不区分大小写,但是在XML中区分大小写
特殊属性
style 通过getAttribute()访问时,返回的style特性值中包含的是CSS文本,而通过属性来访问返回一个对象,由于style属性是用于以编程方式访问元素样式的,因此并没有直接映射到style特性
onclick 类似的事件处理程序,通过getAttribute()访问时,返回相应代码字符串;访问onclick属性时,返回一个javascript函数
元素内容
innerHTML 返回元素内容,包括html标签
innerText 元素内部的文本,去除回车和换行
textContent 元素内部的文本,不去除空格和回车
作为文档树的文档
将文档看做是Element对象树,忽略文档Text,Comment节点。Element中的属性
children 类似于childNodes,返回NodeList对象,但是该对象中仅包含Element对象
firstElementChild 第一个孩子元素节点
lastElementChild 最后一个孩子元素节点
nextElementSibling 下一个兄弟元素节点
previousElementSibling 上一个兄弟元素节点
childElementCount 子元素的数量,返回值和children.length值相等
5.text 文本类型
1)属性
length //文本长度
2)方法
appendData(text) //追加文本
deleteData(beginIndex,count) //删除文本
insertData(beginIndex,text) //插入文本
replaceData(beginIndex,count,text) //替换文本
splitText(beginIndex) //从beginIndex位置将当前文本节点分成两个文本节点
document.createTextNode(text) / /创建文本节点,参数为要插入节点中的文本
substringData(beginIndex,count) //从beginIndex开始提取count个子字符串