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<obj.length; i++){
obj[i].onclick = function(e){
console.log(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这个标签的
<html> // 这里获取的是三个标签
<head></head>
<body></body>
</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")；创建一个文本节点名（水）
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var node = document.createElement("LI");
var textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
</script>
4.3，element.prepend()；：增加到一个容器的末头
4.4，element.insertBefore(newItem,existingItem)； 现有的子元素之前插入一个新的子元素
注：newItem：要插入的节点对象；existingItem：要添加新的节点前的子节点。
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var newItem = document.createElement("LI")
var textnode = document.createTextNode("Water")
newItem.appendChild(textnode)
var list = document.getElementById("myList")
list.insertBefore(newItem,list.childNodes[0]);
}
</script>
4.5，element.replaceChild(newnode,oldnode)：替换一个子元素
注：newItem：要插入的节点对象；existingItem：要添加新的节点前的子节点。
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var textnode = document.createTextNode("Water");
var item = document.getElementById("myList").childNodes[0];
item.replaceChild(textnode,item.childNodes[0]);
}
</script>
4.6，element.removeChild() : 删除一个子节点
<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var list = document.getElementById("myList");
list.removeChild(list.childNodes[0]);
}
</script>
get/set/removeAttribute
4.7，element.removeAttribute(): 从元素中删除指定的属性
<h1 style="color:red">Hello World</h1>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
document.getElementsByTagName("H1")[0].removeAttribute("style");
};
4.8，cloneNode()： 拷贝一个列表项到另外一个列表
var node=document.getElementById("myList2").cloneNode(true)
网友评论