操作节点，先得选择节点，就得知道节点选择器与DOM节点查找
DOM节点选择器
W3C提供了比较方便的定位节点的方法和属性
getElementById()
一个参数:元素标签的ID
getElementsByTagName()
一个参数:元素标签名
getElementsByName()
一个参数:name属性名
getElementsByClassName()
一个参数:包含一个或多个类名的字符串
querySelector()
接收CSS选择符，返回匹配到的第一个元素，没有则null
querySelectorAll()
接收CSS选择符，返回一个数组，没有则返回[]
DOM节点关系与节点查找
遍历节点树，所涉及发方法
hasChildNodes()
包含一个或多个节点时返回true
contains()
如果是后代节点返回true
isEqualNode()
两个节点引用的是同一个对象:传入节点与引用节点的引用为同一个对象返回true
isSameNode()
指的是两个节点是否是同一类型，具有相等attributes/childNodes等
compareDocumentPostion()
确定节点之间的各种关系
parentNode
父节点
parentElement
父节点标签元素
childNodes
所有子节点
children
第一层子节点
firstChild
第一个子节点，Node 对象形式
firstElementChild
第一个子标签元素
lastChild
最后一个子节点
lastElementChild
最后一个子标签元素
previousSibling
上一个兄弟节点
previousElementSibling
上一个兄弟标签元素
nextSibling
下一个兄弟节点
nextElementSibling
下一个兄弟标签元素
childElementCount
第一层子元素的个数(不包括文本节点和注释)
ownerDocument
指向整个文档的文档节点
node与element的区别
-
element是包含在node里的，它的nodeType是1
-
parentElement匹配的是parent为element的情况，而parentNode匹配的则是parent为node的情况。
-
当父节点的nodeType不是1，即不是element节点的话，它的parentElement就会是null
节点关系图如下
DOM节点样式操作
DOM节点样式操作，可以设置class，设置样式
操作className
className:返回节点样式，可以设置 className="demo1 class2"
classList :返回所有类名的数组
-
add （添加）
-
contains （是否存在某个class，存在返回true,否则返回false）
-
remove（删除）
-
toggle（存在则删除，否则添加）
操作style方法
style.cssText
可对style中的代码进行读写
style.item()
返回给定位置的CSS属性的名称
style.length
style代码块中参数个数
style.getPropertyValue()
返回给定属性的字符串值
style.getPropertyPriority()
检测给定属性是否设置了!important，设置了返回"important";否则返回空字符串
style.removeProperty()
删除指定属性
style.setProperty()
设置属性，可三个参数:设置属性名，设置属性值，是否设置为"important"(可不写或写"")
DOM内容操作
文本节点TEXT
innerText
所有的纯文本内容，包括子标签中的文本
outerText
与innerText类似
innerHTML
所有子节点(包括元素、注释和文本节点)
outerHTML
返回自身节点与所有子节点
textContent
与innerText类似，返回的内容带样式
data
文本内容
length
文本长度
createTextNode()
创建文本
normalize()
删除文本与文本之间的空白
splitText()
分割
appendData()
追加
deleteData(offset,count)
从offset指定的位置开始删除count个字符
insertData(offset,text)
在offset指定的位置插入text
replaceData(offset,count,text)
替换，从offset开始到offscount处的文本被text替换
substringData(offset,count)
提取从ffset开始到offscount处的文本
innerText、innerHTML、outerHTML、outerText
-
innerText: 表示起始标签和结束标签之间的文本
-
innerHTML: 表示元素的所有元素和文本的HTML代码
-
outerText: 与前者的区别是替换的是整个目标节点，问题返回和innerText一样的内容
-
outerHTML: 与前者的区别是替换的是整个目标节点，返回元素完整的HTML代码，包括元素本身
文档节点 Document
document.documentElement
代表页面中的元素
document.body
代表页面中的元素
document.doctype
代表标签
document.head
代表页面中的元素
document.title
代表元素的文本，可修改
document.URL
当前页面的URL地址
document.domain
当前页面的域名
document.charset
当前页面使用的字符集
document.defaultView
返回当前 document对象所关联的 window 对象，没有返回 null
document.anchors
文档中所有带name属性的元素
document.links
document.forms
文档中所有的
元素document.images
文档中所有的元素
document.readyState
两个值:loading(正在加载文档)、complete(已经加载完文档)
document.compatMode
两个值：BackCompat：标准兼容模式关闭、CSS1Compat：标准兼容模式开启
write()、writeln()、
open()、close()
write()文本原样输出到屏幕、writeln()输出后加换行符、
open()清空内容并打开新文档、close()关闭当前文档，下次写是新文档
DOM基本操作思维导图
参考文章：
ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）www.cnblogs.com/best/p/8028…
JavaScript学习总结（三）BOM和DOM详解 segmentfault.com/a/119000000…
Javascript操作BOM和DOM详解（1） blog.csdn.net/openbox2008…
JavaWeb学习总结：JavaScript（BOM和DOM） blog.csdn.net/weixin\_423…
HTML DOM Event 对象 www.w3school.com.cn/jsref/dom_o…
XML DOM - Element 对象 www.w3school.com.cn/xmldom/dom_…
JAVAScript中DOM与BOM的差异分析 www.cnblogs.com/fjner/p/589…
转载本站文章《再谈BOM和DOM(3):DOM节点操作-元素样式修改及DOM内容增删改查》,
请注明出处：www.zhoulujun.cn/html/webfro…
