代码改变世界

DOM

2019-08-19 00:01  张海峰999  阅读(85)  评论(0)  编辑  收藏  举报

节点对象三大属性:

1.nodeType number
专门区分节点的类型：
9 document
1 element
2 attribute
3 text

2.nodeName 节点名 字符串
document #document
element 全大写的标签名
attribute 属性名
文本节点 #text

3.nodeValue 节点值
document null
element null
attribute 属性值
text 文本的内容

 

查找DOM树

三个元素不需要找，直接获得：

<html> document.documentElement
<head> document.head
<body> document.body

节点之间的关系

1.父子关系
node.parentNode 获得node的父节点
node.childNodes 获得node的所有子节点
node.firstChild   获得node下的第一个子节点

node.lastChild     后的node下最后一个子节点

2.兄弟关系

node.preivousSibling: 返回当前节点的前一个兄弟节点
node.nextSibling:返回当前节点的下一个兄弟节点

元素树

父子关系
elem.parentElement 返回一个父元素对象
elem.childen 返回子元素对象集合
elem.firstElementChild 返回第一个子元素对象
elem.lastElementChild 返回最后一个子元素

兄弟关系
返回当前节点的前一个兄弟元素
elem.preivousElementSibling
返回当前节点的下一个兄弟元素
elem.nextElementSibling

 

按HTML查找

1.id 只能用document调用  仅返回一个元素

document.getElementById

2.tagName   查找指定父元素下的指定标签元素 任何父元素都可以调用

document.getElementsByTagName

3.name属性查找  查找表单   只能用document调用    返回：动态数组

document.getElementsByName

4.按class属性查找  只能通过任意父元素上调用 查找的子代  只要标签中class属性值符合要求的就被选中

getElementsByClassName

 

按选择器查找

查找一个条件复杂的元素,既可以找一个元素,也可以找多个元素,selector可以写css中的选择器

var elem = parent.querySelector()

var elem = parent.querySeletorAll()

getElement 和Selector的差别

返回值：getElement 返回动态集合 Selector返回非动态集合

效率: getElement 首次查找效率高 Seletor首次查找效率低

易用性:selector更简单  getElement更繁琐

 

核心DOM:可以操作一切结构文档，访问标准的HTML属性

获取属性值:getAttribute

修改属性:setAttribute

移除属性:removeAttribute