DOM操作

2018-05-07 本文已影响0人苦瓜_6

主要内容： 一些常用的DOM操作：查询元素、创建元素并给元素添加/删除属性、添加/删除元素以及很常用的classList 方法。

查询元素常见方法

查询元素常见方法

getElementById()

返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。

getElementsByClassName()

getElementsByClassName方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
getElementsByClassName方法的参数，可以是多个空格分隔的class名字，返回同时具有这些节点的元素。

getElementsByTagName()

getElementsByTagName方法返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。

getElementsByName()

getElementsByName方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。

ES5的元素选择方法：

querySelector()

querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
querySelector方法无法选中CSS伪元素。

querySelectorAll()

querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。
querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素。

创建元素并给元素添加/删除属性

document.createElement() 可以创建元素。
createElement方法的参数为元素的标签名，即元素节点的tagName属性。如果传入大写的标签名，会被转为小写。如果参数带有尖括号（即<和>）或者是null，会报错。
element .setAttribute(name, value) 方法可以给元素设置属性。
setAttribute 实际上完成了两项操作：先创建这个属性，然后设置它的值；如果setAttribute 用在一个本身就有这个属性的元素节点上，这个属性的值就会被覆盖掉。该方法会将其属性名称（attribute name）参数小写化。 setAttribute做出的修改不会反映在文档本身的源代码里。
element.removeAttribute(attrName) 用于删除元素属性。

具体操作可以看下面的例子：

<div id="test">
    <a href="">my link</a>
    <h1 id="title">my title</h1>
</div>

<script>
    var newImg = document.createElement("img");  //创建一个新的img标签
    var newDiv = document.getElementById("test"); // 获取页面中id 为test 的元素
    newDiv.appendChild(newImg) ;  // 将新的img标签插入到id 为test的元素（此处为div）
    newImg.setAttribute("src","https://i.loli.net/2018/03/03/5a9a51803c9d1.jpg")  //为新建的img标签增加src属性
    newImg.setAttribute("alt","猫咪")
    newImg.removeAttribute("alt")   // 删除img 的alt属性
</script>

给页面元素添加/删除子元素

appendChild() 和 insertBefore() 都可以给页面元素添加子元素
removeChild()可以删除页面元素下的子元素

<div id="ct">
    <h1 id="remove">h1</h1>
</div>
<script>
    var container = document.getElementById("ct"); // 先定位父节点
    var insertedElement = document.createElement("nav");  
    container.insertBefore(insertedElement, container.firstChild); // 在h1前面添加我们刚刚创建的元素nav
    var appendedElement = document.createElement("p");  
    container.appendChild(appendedElement); // 在div的子元素列表末尾添加我们创建好的元素P
    var removedElement = document.getElementById("remove"); // 找到我们想要删除的元素
    container.removeChild(removedElement)  // 删除掉我们刚刚找到的元素 。最后我们可以在控制台看到div中只剩下nav和p标签
</script>

element.classList 方法

方法	描述
element.classList.add( String [, String] )	添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略
element.classList.remove(String [,String])	删除指定的类值
element.classList.contains(String)	检查元素的类属性中是否存在指定的类值
element.classList.toggle( String [, force] )	新增/删除切换