操作标签属性
- DOM想要直接获取或者操作标签中的属性，那么该属性必须要符合W3C规范才可以。如果想获取或者操作自定义的标签属性，那么就需要用到以下几个方法
-
元素.getAttribute("属性名")可以获取标签中的任何属性，包括符合规范和自定义的 -
元素.setAttribute("属性名","属性值")可以操作标签中的任何属性，包括符合规范和自定义的 -
元素.removeAttribute("属性名")可以删除标签中的任何属性，包括符合规范和自定义的 - 注意如果使用Attribute方法来操作标签，那么就相当于在标签中写，直接写对应属性和值就行
隔行变色案例注意点
- 隔行变色是通过遍历集合，偶数显示偶数对应的样式，奇数显示奇数对应的样式。但是这里要注意，在我们眼中，第一行是0，在页面中第一行是1，正好是相反的。所以需要反向赋值类名才行。
常用的节点属性
- 在页面所有的东西都是节点，根据标签嵌套关系又可以分为父节点，子节点，元素节点，属性节点，注释节点等。以下是几个常用的节点方法
-
元素.parentNode获取该元素的父节点，父节点一定是元素节点 -
元素.childNodes获取该元素下的所有子节点 -
元素.children只获取该元素下的子元素节点 -
元素.nextSibling获取该元素的下一个兄弟节点 -
元素.nextElementSibling获取该元素的下一个兄弟元素节点 -
元素.previousSibling获取该元素的上一个兄弟节点 -
元素.previousElementSibling获取该元素的上一个兄弟元素节点 -
元素.nodeType获取该节点的类型 -
元素.nodeValue获取该节点的值 -
元素.nodeName获取该节点的名称 -
元素.getAttributeNodes获取该元素的属性节点 -
元素.firstElementChild获取该元素内部的第一个元素节点 -
元素.appendChild(元素节点)在元素内部的最后插入参数节点 -
元素.insertBefore(元素节点，参照节点)在元素内部参照节点的前面插入参数节点 -
元素.lastChild获取元素内部的最后一个子节点 -
元素.removeChild(元素节点)在元素内部移除参数节点 -
元素.cloneNode(布尔值)克隆该元素，true是克隆元素以及它内部的所有节点，false是只克隆元素本身。注意：上面的插入和移除都是对元素直接进行操作，如果操作克隆的元素，则与原本元素没有任何关联。 - 获取标签节点value返回值是null
- 因为节点的知识点，多且比较杂，这里建议去看教案详细介绍
获取样式属性
-
元素.style.样式名通过元素的style属性可以获取到对应的样式值，但是这个只能获取到标签行内样式，返回的是样式具体值字符串。同理，使用style属性设置样式时，也是设置为行内样式，也是用字符串来赋值
动态创建HTML结构
- 使用之前说过的innerHTML方法可以给元素内添加html结构，但是要注意这样赋值会覆盖掉原有的html的结构，要保留建议使用+=的方式
- 另外大量创建html结构时，如果直接拼接非常消耗资源，所以建议使用以下两种方法：
- 数组join方法优化字符串拼接，所有结构拼接完毕后再赋值通过innerHTML来赋值。
- 使用
document.createElement("标签名")方法来创建，追加到元素节点内部。这个方法一次只能创建一个标签，所以如果是内部嵌套的标签结构，需要依次创建，并追加到上一级标签内部。直到最后结果完善了，再追击到元素节点内部。
indexOf方法
-
.indexOF(匹配值)是字符串的方法，它会根据传入的参数来匹配字符串，如果有就返回其位置，位置计数与数字相同是从0开始，另外传入的参数即可以是单个字符也可以组合字符，它会把它们看做一个整体来匹配 - 传入空字符默认匹配的位置是0，没有匹配项返回-1
几个DOM操作案例
- 代码较长这里不做记录，必须理解透彻所有案例的逻辑思路，然后多写几遍，加深印象
网友评论