开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第24天，点击查看活动详情
获取元素
一、通过ID获取元素
var id = document.getElementById("app"); //只获取一个元素
二、通过标签名获取元素
var tag = document.getElementsByTagName("tag-box");
//获取返回一个类数组，每个元素表示一个标签
三、通过class类名获取元素
通过类名获取，IE8及IE8以下不支持。
var c = document.getElementsByClassName("class-name");
// 获取的也是类数组，每个元素表示一个标签
四、查看节点树
获取到节点后，可以通过当前节点获取其他与之有关系的节点，下面代码中node表示选择到的一个节点。
- 1、查看父节点， l标签的父节点为 document
node.parentNode
- 2、查看子节点们
node.chileNode
选到node下面的所有元素节点，包含了空白文本节点、注释节点等。
<div>
<--! 注释 -->
<span></span>
</div>
var div = document.getElementsByTagName("div")[0];
//div.chileNode 包含 <--!注释--> 和空白节点
- 3、查看第一个子节点
node.firstChild //第一个节点为文本节点
- 4、查看最后一个子节点
node.lastChild //最后一个也为文本节点
- 5、下一个兄弟节点
node.nextSibling
//示例
<div></div>
<span></span>
document.getElementsByTagName("div")[0].nextSibling //选中span标签
五、基于元素节点的节点树
- 1、得到父节点（IE9以下不兼容）
node.parentElement
<html></html>是最高父节点
- 2、元素子节点
node.children
- 3、第一个元素子节点（IE9以下不兼容）
node.firstElementChild
4、最后一个元素子节点（IE9以下不兼容）
node.lastElementChild
5、上下兄弟元素节点（IE9以下不兼容）
node.nextElementSibling //下一个兄弟元素节点
node.previousElementSibling //上一个兄弟元素节点
6、得到子节点个数
node.childElementCount //等价于 node.children.length
六、节点的四个属性
1、nodeName
每个节点，包括文本节点都有nodeName属性
node.nodeName //标签的nodeName为大写的标签名
2、nodeValue 文本节点和注释节点才有
node.nodeValue;
node.nodeValue = "a"; //可读可写
3、nodeType 查看节点类型
node.nodeType //返回一个数值
数值代表的意思分别如下：
1: 元素节点
2: 属性节点
3: 文本节点
8: 注释节点
9: document
4、函数hasChildNodes()
判断node节点下有没有子节点（包括所有文本），只有完全空白才会为false
<div></div> //false
<div> </div> //true
二、创建节点
1、元素节点
var d = document.createElement('div');//创建节点，但并没有插入到文档中
2、创建文本节点
var textNode = document.createTextNode("文本");
3、创建注释节点
var com = document.createCommemt("注释");
4、插入节点到文档中
document.body.appendChild(节点名); //在body最尾添加节点
document.body.insertBefore(a,b); //在body末尾，先插入a标签，再插入b标签
三、删除节点
1、删除子节点
document.body.removeChild("子节点"); // 该函数返回删除的节点
2、删除自身
document.getElementById("id").remove(); //删除自身
四、更换节点
document.body.replaceChild(newNode,oldNode); // 用newNode替换oldNode
五、querySelector操作节点
querySelector是H5中新增的操作节点的方法，通过 querySelector ，传入的参数是 CSS选择器，CSS样式怎么选写，参数就怎么填。
IE7以及以下版本不能兼容。
获取Dom元素
querySelector只能获取单个元素，返回满足条件的第一个标签
//选择标签、类名、ID示例
document.querySelector("p")
document.querySelector(".red")
document.querySelector("#nav")
通过querySelectorAll可以获取所有满足条件的元素。返回一个数组
document.querySelectorAll(".red")[0] //获取节点数组中第一个元素
操作class
-
1、添加类
通过选择元素后使用 .classList.add("类名") 为选择的元素添加class，这种方法每次只能添加一个class，如果想添加多个class，需要写多个
// 添加class
document.querySelector("li").classList.add("red")
//添加多个class
document.querySelector("li").classList.add("red") document.querySelector("li").classList.add("big")
-
2、移除样式
通过选择元素后使用 .classList.remove("类名") 为选择的元素移除指定class
document.querySelector("li").classList.remove("red") //同理，一次也只能移除一个类
-
3、切换元素样式
通过选择元素后使用 .classList.toggle("类名") 为选择的元素切换指定class
document.querySelector("li").classList.toggle("red") // 有该样式时移除该样式，没有该样式时添加该样式
- 4、判断元素是否含有某类名
document.querySelector("li").classList.contains("red")
自定义属性
命名规则
以 data- 开头定义属性，data- 后面至少包含一个字符 使用 - 连接单词，不要出现大写字母和特殊符号 不要使用纯数字 实例： data-my-name data-sex
自定义属性取值 获取节点之后，通过dataset获取自定义属性的值，数组里面的值对应 data- 后面的名字，但是要把短线命名法改为驼峰命名法
document.querySelector('p').dataset["myName"]
document.querySelector('p').dataset["sex"]
