简单的Dom获取
什么是Dom操作?
1.DOM使一个"使程序"和"脚本"有能力的"动态地访问"和"更新文档内容结构",以及"样式"的平台和语言中立的接口.
2.在HTML和JavaScript的学习中,DOM操作可谓时重中之重.
Dom树
//html dom树
如图:
DOM节点的分类:
DOM节点分为三大类:
1.元素(标签)节点,
2.属性节点,
3.文本节点;
查找dom节点:
1.通过id获取
<div id="box"></div>
<script>
let box = document.getElementById("box");
</script>
注意:getElementById()括号中的不需要在前面加“#”,因为方法就决定了括号中的值是一个元素的id值。该方法返回一个DOM对象。
2. 通过class获取
<div class="box"></div>
<div class="box"></div>
<script>
let boxCollection= document.getElementsByClassName("box");
let box1 = boxList[0];
let box2 = boxList[1];
</script>
注意:getElementsByClassName()括号中的不需要在前面加 “.”
,因为方法就决定了括号中的值是一个元素的class值。该方法返回一个集合。不能直接给集合绑定事件,需要获取到集合中的某一个元素,然后再为元素绑定事件。
3. 通过标签名获取
<div id="box">
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
<p>段落6</p>
</div>
<script>
let pCollection= document.getElementsByTagName("p");
</script>
注意: 该方法返回的也是一个集合。
4. 通过name属性获取
<div id="box">
<input type="text" name="user" />
</div>
<script>
let userInput= document.getElementsByName("user");
</script>
返回值如下:
注意:只有含有name属性的元素(表单元素)才能通过name属性获取
5. 通过querySelector获取
<div id="box"></div>
<script>
let box= document.querySelector("#box");
</script>
注意:querySelector()方法括号中的值是元素的选择器,所以前面加了”#”符号,使用的是id选择器。此方法直接返回DOM对象本身。
6. 通过querySelectorAll获取
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
<div class="box">box5</div>
<script>
let box1= document.querySelector(".box");
let boxes= document.querySelectorAll(".box");
</script>
结果如下图:
注意:querySelector()和querySelectorAll()方法括号中的取值都是选择器,但从图中我们可以看出,两个方法是有区别的。
总结:
1.所有获取DOM对象的方法中,只有getElementById()和querySelector()这两个方法直接返回的DOM对象本身,可直接为其绑定事件。
2.getElementXXX类型的方法,除了通过Id获取元素,其他都返回一个集合,如果需要取到具体的DOM元素,需要加索引 = ‘下标’,如:document.getElementsByClassName(“box”)[0]=>获取class为box的所有元素中的第一个DOM元素。
3.querySelector()与querySelectorAll()两者的联系与区别: 联系: 两者括号中的取值都是选择器 区别: 当有多个class相同的元素时,使用querySelector()方法只能获取到第一个class为box的元素,而querySelectorAll()获取到了所有class为box的元素集合。
获取元素的内容
语法:元素.innerHTML;
说明:获取到的内容都是string 类型;
修改设置元素的内容
语法:元素.innerHTML = ‘内容’
‘说明:会覆盖’;
获取元素的行内样式
语法:元素.style.css属性;
注意:复合属性需要转驼峰;
设置元素的行内样式
语法: 元素.style.css属性 = 属性值;
设置元素的类名
语法:
元素.className = '修改之后的名字';
案例:
<div id="box"></div>
<script>
var a = document.getElementById('box');
var b = a.className = 'top'
console.log(b);//top
</script>