js中Dom操作

简单的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>