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

js获取当前dom

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

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

根据选择器获取元素： 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是要删除的节点

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";

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！