js 获取DOM元素的一些方法

1， js 获取 DOM 元素的方法

注：上下文必须是document

1.1，通过ID获取（getElementById）

// 必须传参数，参数是string类型，是获取元素的id。
// 返回值只获取到一个元素，没有找到返回null
document.getElementById('id'); //通过id获取元素

1.2，通过name属性（getElementsByName）

// 必须传参数，参数是是获取元素的name属性。
// 返回值是一个类数组，没有找到返回空数组。
document.getElementsByName('name'); //通过name属性获取元素

1.3，通过标签名（getElementsByTagName）

// 参数是是获取元素的标签名属性，不区分大小写。
// 返回值是一个类数组，没有找到返回空数组
document.getElementsByTagName('name'); //通过name属性获取元素
var obj = document.getElementsByTagName('div');
for(let i = 0; i

1.4，通过类名（getElementsByClassName）

// 参数是元素的类名。
// 返回值是一个类数组，没有找到返回空数组。
document.getElementsByClassName('animated')

1.5，通过选择器获取一个元素（querySelector）

//上下文可以是document，也可以是一个元素。
//参数是选择器，如：”div .className”。
//返回值只获取到第一个元素。
document.querySelector('.cnblogs_code');//获取文档中类为cnblogs_code的第一个元素

1.6，通过选择器获取一组元素（querySelectorAll）

//上下文可以是document，也可以是一个元素。
//参数是选择器，如：”div .className”。
//返回值是一个类数组。
document.querySelectorAll('div.animated')；//获取所有div类为animated的元素
document.querySelector("html").classList.add("noscroll");//给元素添加类名
document.querySelector("html").classList.remove("noscroll");//给元素删除类

1.7，获取body的方法(document.body)：这里获取的是body标签
1.8，document.documentElement是专门获取html这个标签的

 // 这里获取的是三个标签
   
   

1.9，parentNode：获取父节点

var test = document.getElementById("test").parentNode; // 获取test的父节点

1.10，childNodes：获取全部子节点

var test = document.getElementById("test").childNodes; // 获取test的下面全部的子节点

1.11，firstChild：获取第一个子节点

var test = document.getElementById("test").firstChild; // 获取test下面的第一个子节点

1.12，lastChile：获取最后一个子节点

var test = document.getElementById("test").lastChile; // 获取test下面的最后一个子节点

1.13，previousSibling：获取上一个兄弟节点

var test = document.getElementById("test").previousSibling; // 获取test上一个兄弟节点

1.14，nextSibling：获取下一个兄弟节点

var test = document.getElementById("test").nextSibling; // 获取test下一个兄弟节点

1.15，cloneNode()：拷贝一个列表项到另外一个列表

var test = document.getElementById("test").cloneNode(); // 获取test下一个兄弟节点

2，js 获取元素的属性：

2.1，element.getAttribute(“属性”); 这种是原生的方法

let height = document.getElementById("div1").getAttribute("height");
//获取元素的高度属性

2.2， jqObj.attr("属性") ：这种是jquery方法

$("#compman").attr('name')

3，js 设置元素的属性：

3.1，element.setAttribute("属性","值") ; 这种是原生的方法

let height = document.getElementById("div1").getAttribute("height");
//获取元素的高度属性

3.2， jqObj.attr("属性"，“值”) ：这种是jquery方法

$("#compman").attr('name'，'小屋')

4，获取 DOM 的增删改等方法

4.1，document.createElement()； DOM 增一个元素

var btn = document.createElement("div");

4.2，element.appendChild()；为元素添加一个新的子元素
document.createTextNode("Water")；创建一个文本节点名（水）

Coffee
Tea
点我

4.3，element.prepend()；：增加到一个容器的末头
4.4，element.insertBefore(newItem,existingItem)； 现有的子元素之前插入一个新的子元素
注：newItem：要插入的节点对象；existingItem：要添加新的节点前的子节点。

Coffee
Tea
点我

4.5，element.replaceChild(newnode,oldnode)：替换一个子元素
注：newItem：要插入的节点对象；existingItem：要添加新的节点前的子节点。

Coffee
Tea
点我

4.6，element.removeChild() : 删除一个子节点

Coffee
Tea
Milk
点我

get/set/removeAttribute

4.7，element.removeAttribute(): 从元素中删除指定的属性

Hello World
点我