DOM：document object model 文档对象模型，提供一些属性和方法让我们可以操作DOM元素
获取DOM元素的方法
- document.getElementsById 一个元素
- [context].getElementsByTagName 元素集合
- [context].getElementsByClassName 元素集合
- document.getElementsByName 节点集合
- document.documentElement 获取整个HTML对象
- document.body 获取整个BODY对象
- document.head 获取整个HEAD对象
- [context].querySelector 一个元素对象 // 获取该模式匹配的第一个元素
- [context].querySelectorAll 获取元素集合
getElementsById
上下文只能是document，一个页面中的id理论上是唯一的，只有在document这个类上才有这个方法，所以只能用document的实例来获取
1、若有重复的，获取结果是第一个id对应的元素对象
2、IE7及以下版本，会把表单元素的name值当作id识别使用
3、若把JS放在结构的下面，可以直接使用id值来获取这个元素，会把页面中所有相同id的元素都获取到，不推荐
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div1"></div>
<script>
console.log(div1);
</script>
</body>
面试题：获取到所有id为div1的元素集合
// 方案一
console.log(div1);
// 方案二 通过通配符获取所有页面中的元素
var allList = document.getElementsByTagName('*'),
result = [];
for (let i = 0; i < allList.length; i++) {
var item = allList[i];
item.id === 'div1' ? result.push(item) : null;
}
// 方案三
document.querySelectorAll('#div1');
getElementsByTagName
上下文可以自己指定，获取到所有子孙元素标签名跟参数一致的一个集合，类数组集合
getElementsByClassName
同上 ，但在IE6-8不兼容
getElementsByName
通过name属性获取一组元素，是节点集合NodeList，上下文只能是document
IE浏览器只能识别表单元素的name属性，一般这个属性都用在表单元素上
querySelector/querySelectorAll
IE6-8不兼容，多用于移动端开发，一个方法具备上述所有方法的功能
DOM节点
浏览器会把一个HTML页面中的所有的内容都当做节点node
- 元素节点：HTML标签
- 文本节点：文字内容
- 注释节点：注释内容
- document文档节点
元素节点
nodeType：1
nodeName：大写标签名(在某些浏览器的怪异模式下会有不同)
nodeValue：null
[curEle].tagName：获取当前元素的标签名（一般都是大写）
文本节点
nodeType：3
nodeName：#text 高版本浏览器中换行，空格等也都算文本节点
nodeValue：文本内容
注释节点
nodeType：8
nodeName：#comment
nodeValue：注释内容
文档节点
nodeType：9
nodeName：#document
nodeValue：null
childNodes
获取当前元素所有的子节点集合，文本，注释节点都会包含
children
获取元素子节点（元素集合），IE6-8下会把注释节点也当作元素节点，其余不会
parentNode
获取当前元素的父节点（元素对象）
previousSibling nextSibling
获取当前节点的前一个兄弟节点（不一定是元素节点，文本注释等也可以），下一个兄弟节点
previousElementSibling nextElementSibling
获取当前节点的前一个兄弟节点（一定是元素节点），下一个兄弟节点，IE6-8不兼容
firstChild lastChild
当前元素所有子节点中的第/最后一个（不一定是元素节点，文本注释等也可以）
firstElementChild lastElementChild
当前元素所有子节点中的第/最后一个（一定是元素节点），IE6-8不兼容
DOM增删改查
document.createElement
在JS中动态创建一个HTML标签
appendChild
container.appendChild(newElement) 把新元素添加到容器末尾
insertBefore
container.insertBefore(newElement, oldElement) 把新元素添加到旧元素之前
removeChild
container.removeChild(element) 把当前元素中的某一个元素移除
replaceChild
container.replaceChild(newElement, oldElement) 把当前元素中的某一个元素用新元素替换
cloneNode
element.cloneNode(false/true) 克隆元素 false只克隆当前元素，true会克隆当前元素及其子孙元素，克隆只能克隆结构，不能克隆事件
set/get/removeAttribute
给当前元素设置/获取/移除属性，一般操作的都是自定义属性
element.setAttribute('myIndex', 0)
element.getAttribute('myIndex')
element.removeAttribute('myIndex')
使用element.myIndex = 0和element.setAttribute('myIndex', 0)设置自定义属性的区别
element.myIndex是把当前元素当作一个普通对象来设置新的属性名，和页面结构中的DOM元素没关系
element.setAttribute('myIndex', 0)当作特殊的元素对象处理，设置的自定义属性和页面结构中的DOM元素映射在一起的
元素对象的内置属性大部分都和页面标签存在映射关系
网友评论