获取dom元素
<body>
<!-- <div id="box">我是一个DIV</div>
<p class="item">这是一个p标签1</p>
<p class="item">这是一个p标签2</p>
<span name="x1">我是一个span标签</span>
<span name="x1">我是一个span标签</span> -->
<h1 class="box1">hello DOM 1 ~</h1>
<h1 class="box1">hello DOM 2 ~</h1>
</body>
获取DOM元素:
通过JS获取页面中的元素,进行操作,js代码通常都写在
1) document.documentElement 得到整个文档(html元素)(较多使用)
document.documentElement // 得到整个文档(html元素)
let html = document.documentElement;
console.log(html);
2)document.head 得到head元素
document.head //得到head元素
let head = document.head
console.log(head);
3)document.body 得到body元素
document.body //得到body元素
let body = document.body
console.log(body);
4) getElementById() 根据一个ID获取DOM元素 (较多使用)
仅仅是获取一个,因为ID是唯一,如果有对应的ID,就获取这个元素,如果没有这个ID,得到null。
getElementById() //根据一个ID获取DOM元素
let div = document.getElementById("box")
console.log(div);
5)document.getElementsByClassName() 根据class名字获取页面上的DOM元素(获取多个)
得到的是一个类数组(伪数组,长的像数组,本质不是数组),如果多个元素都有相同的class名字,得到多个DOM元素, 如果就一个标签有class名字,得到的也是一个伪数组,里面只有一个元素, getElementsByClassName 用的不多 对于低版本的浏览器兼容性不太好。
document.getElementsByClassName()// 根据class名字获取页面上的DOM元素(获取多个) 得到的是一个类数组(伪数组)
let ps = document.getElementsByClassName("item")
console.log(ps);
6)let ps = document.getElementsByTagName(“p”);根据标签名来获取DOM元素 (较多使用)
得到的也是一个伪数组 只要是一个伪数组,就可以通过下标得到具体的元素
document.getElementsByName() //根据标签名来获取DOM元素
let ps = document.getElementsByTagName("p");
console.log(ps);
7)document.getElementsByName() 根据标签上的name属性得到的对应的DOM元素
document.getElementsByName() //根据标签上的name属性得到的对应的DOM元素
let spans = document.getElementsByName("x1")
console.log(spans[0]);
console.log(spans[1]);
8)document.querySelector(“选择器”); 根据选择器查找页面上对应的DOM元素 (较多使用)
.box1是一个class选择器 如果有多个,得到的满足条件的第1个。
document.querySelector("选择器"); // 根据选择器查找页面上对应的DOM元素, .box1是一个class选择器 如果有多个,得到的满足条件的第1个。
let box = document.querySelector(".box1");
console.log(box);
9)document.querySelectorAll(".box1") 获取多个元素 也是一个伪数组 (较多使用)
document.querySelectorAll(".box1") //获取多个元素 也是一个伪数组
let h1s = document.querySelectorAll(".box1");
console.log(h1s);