Dom获取元素的多种方法

891 阅读1分钟

1.根据标签名进行获取

 let ulEle = document.getElementsByTagName("ul")[0];
 console.log(ulEle);

2.通过name的属性值获取元素

 let inputEle = document.getElementsByName("f70")[0];
 console.log(inputEle);

3.通过ID值获取元素

 let liEle = document.getElementById("box");
 console.log(liEle);

4.通过类名获取元素

 let leiName = document.getElementsByClassName("F70");
 console.log(leiName[2]);

5.获取父元素

- 1、获取一个元素(子元素) -2、通过这个元素找其父元素

 let navEle = document.getElementsByTagName("nav")[0];
 console.log(navEle);
 //格式:子元素.parentNode
 let headerEle = navEle.parentNode;
 console.log(headerEle);

6.获取子元素节点

//格式:父元素.children
let Eles1 = headerEle.children;
 console.log(Eles1);

7.获取子节点(元素、文本、注释)

//格式:父元素.childNodes
 let Eles2 = headerEle.childNodes;
 console.log(Eles2);

8.获取第一个子节点

 let FEles = headerEle.firstChild;
 console.log(FEles); 

9.获取第一个子元素节点

FEles = headerEle.firstElementChild;
// console.log(FEles); 

10.获取最后一个子节点

// let LEles = headerEle.lastChild;
// console.log(LEles); 

11.获取最后一个子元素节点

LEles = headerEle.lastElementChild;
// console.log(LEles);