js获取当前元素的属性和设置当前元素的属性_js 获取元素属性

js获取当前dom

根据id名获取元素：getElementById; 
根据标签名获取元素：document.getElementsByTagName(“标签的名字”)；
根据类名获取元素：document.getElementsByClassName(“类样式的名字”);
根据name属性值获取元素：document.getElementsByName(“name属性的值”)；
1
2
3
4

以上返回值：是一个伪数组，所以页面上没有对应标签的时候返回空数组

根据选择器获取元素： document.querySelector(“选择器”);：获取一个元素，推荐使用 用法类似写css；
document.querySelectorAll(“选择器”)：返回一个元素数组。

通过父节点获取：

 parentObj.firstChild： 获取父节点下的第一个子节点（会将空格和换行计入），这个属性是可以递归使用的，即支持 parentObj.firstChild.firstChild...的形式，如此就可以获得更深层次的节点。

parentObj.firstElementChild：获取父节点下的第一个子元素节点

parentObj.lastChild： 获取父节点下的最后一个子节点（会将空格和换行计入）与firstChild一样，它也可以递归使用

parentObj.lastElementChild： 获取父节点下的最后一个子元素节点

parentObj.childNodes：获取父节点下的所有直接子节点（会将空格和                                                   换行计入）

parentObj.children： 获取父节点下的直接子元素节点。

parentObj.getElementsByTagName("tagName")

parentObj.getElementsByClassName("className")

1.3 通过子节点获取： childObj.parentNode :                                            获取子节点的直接父节点。w3c标准

childObj.parentElement :  获取子节点的直接父节点。IE标准

1.4 通过兄弟节点获取： neighbourObj.parentNode.children[..] :通过父节点间接获取已知节点的兄弟节点

neighbourObj.previousSibling：   获取已知节点的上一个兄弟节点（会将空格和换行计入）

neighbourObj.previousElementSibling: 获取已知节点的上一个兄弟元素节点

neighbourObj.nextSibling： 获取已知节点的下一个兄弟节点（会将空格和换行计入）

neighbourObj.nextElementSibling:    获取已知节点的下一个兄弟元素节点

2.创建节点/属性 document.createElement(eName);　//创建一个节点

document.createAttribute(attrName); //对某个节点创建属性

document.createTextNode(text); //创建文本节点

3.添加节点 document.insertBefore(newNode,referenceNode)//在某个节点前插入节点

parentNode.appendChild(newNode);//给某个节点添加子节点

4.复制节点 cloneNode(true | false);//复制某个节点  参数：是否复制原节点的所有属性true深拷贝，false浅拷贝

5.删除节点 remove()   //删除父节点上的所有元素，包括所有文本和子节点。

parentNode.removeChild(node);//删除某个节点的子节点 node是要删除的节点
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

js设置dom属性

1、修改属性： dom.setAttribute("属性名","属性值")
2、获取属性：dom.getAttribute("属性名")
3、检查属性是否存在：dom.hasAttribute("属性名")  //true false
4、删除DOM结点中的自定义属性：removeAttribute("属性名")
5、获取dom的class dom.classList 返回元素的class 列表
<div class="box content"></div>
返回的是数组形式['box','content']
6、添加dom的class:dom.classList.add("date");
7、判断当前dom有没有该class名：dom.classList.contains("box")
8、删除class: dom.classList.remove("date");
9、设置class样式 dom.style.属性名="属性值" dom.style.width="200px";
1
2
3
4
5
6
7
8
9
10
11