元素节点对象(element)
-在网页中,每一个标签就是一个节点元素
如何获取元素节点对象
1.通过document对象来获取元素节点
2.通过document对象来创建元素节点
通过document来获取已有的元素节点
document.getElementById()-根据id获取一个元素节点对象
document.getElementsByClassName()-根据元素的class属性值获取一组元素节点对象-返回的是一个类数组对象-该方法返回的结果是一个实时更新的集合当网页中新添加元素时,集合也会实时刷新
document.getElementsByTagName()-根据标签名获取一组元素节点对象-返回的结果是可以实时更新的集合-document.getElementsByTagName("*")获取页面中所有的元素
document.getElementsByName()-根据name属性获取一组元素节点对象-返回一个实时更新的集合-主要用于表单项
document.querySelectorAll()-根据选择器去页面中查询元素-会返回一个类数组(不会实时更新)
document.querySelector()-根据选择器去页面中查询第一个符合条件的元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>获取元素节点</title>
</head>
<body>
<button id="btn01">点我一下</button>
<span class="s1">我是span标签</span>
<span class="s1">我是span标签</span>
<span class="s1">我是span标签</span>
<div>我是div标签</div>
<div>我是div标签</div>
<div>我是div标签</div>
<div>我是div标签</div>
<div>我是div标签</div>
<div>我是div标签</div>
<form><input type="text" name="usrname"><input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female">女
</form><script>const btn01=document.getElementById("btn01");console.log(btn01);const s1=document.getElementsByClassName("s1");console.log(s1);for(let i=0;i<s1.length;i++){// alert(s1[i]);s1[i].innerText="哈哈哈"+i;}const divs=document.getElementsByTagName("div");console.log(divs);const genderInput=document.getElementsByName("gender");console.log(genderInput);const divs2=document.querySelectorAll("#btn01");console.log(divs2);const divs3=document.querySelectorconst h2=document.createElement("h2");
</script>
</body>
</html>