1.以元素名获取

//通过标签名获取元素节点（获取0到多个节点）
//书写格式：
//document.getElementsByTagName("元素名")
let divEle = document.getElementsByTagName("div");
注：获取到的是一个类数组
console.log(divEle[0]);

 

2.通过name属性值获取元素节点（获取0到多个节点）

//书写格式：document.getElementsByName("name值")

let spanEle = document.getElementsByName("f74");

console.log(spanEle[0]);

3.通过类名获取元素节点（获取0到多个节点）

//书写格式：document.getElementsByClassName("类名")
 let secEle = document.getElementsByClassName("box");
 console.log(secEle[0]);

4.通过ID值获取元素节点（获取0到1个节点）

//书写格式：document.getElementById("ID值")
let asideEle = document.getElementById("xiaobai");
console.log(asideEle);

5.ES6获取元素节点的方法

//ES6 querySelector，querySelectorAll
//功能：可以通过CSS选择器的方式获取元素节点
/**
 * 缺点：
 * 1、IE8以下支持（包括IE8）
 * 2、不会返回实时的节点内容（不是实时数据，不会实时更新）
 *    注1：节点发生改变时（返回值不会发生改变）
 *    注2：即删除、修改、新增等操作，返回值不会同步发生改变
 */
例如：
// querySelector获取元素节点（返回第一个满足条件的节点）
 let ele = document.querySelector(".box2");
 console.log(ele);
//querySelectorAll获取元素节点（返回所有满足条件的节点）
 ele = document.querySelectorAll(".box2");
 console.log(ele[0]);
 console.log(ele[1]);

6.获取父元素节点

//书写格式：子元素节点.parentElement
例如：
 let navEle = document.getElementsByTagName("nav");
 console.log(navEle[0]);
 let fatherEle = navEle[0].parentElement;
 console.log(fatherEle);
 fatherEle = navEle[0].parentNode;
 console.log(fatherEle);

7.获取兄弟元素节点

 let spanEle = document.getElementsByName("f74");

//前一个兄弟元素节点
//书写格式：元素节点.previousElementSibling;
let preEle = spanEle[0].previousElementSibling;
console.log(preEle);

//后一个兄弟元素节点
//书写格式：元素节点.nextElementSibling;
 let nextEle = spanEle[0].nextElementSibling;
 console.log(nextEle);

8.批量获取子节点

// //获取所有的子元素节点
 console.log(test2.children);
// 批量获取所有子节点
 console.log(test2.childNodes);
注：test2为元素节点Id名