DOM基础

2019-07-07 本文已影响0人没了提心吊胆的稗子

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元素映射在一起的
元素对象的内置属性大部分都和页面标签存在映射关系

DOM基础

获取DOM元素的方法

DOM节点

DOM增删改查

猜你喜欢

热点阅读