dom元素获取

*操作dom

1. dom元素的获取
2. dom元素属性操作（常规属性操作）
3. dom元素节点操作（子父节点）
4. dom元素的事件（行为）
5. dom元素的方法操作*

dom元素的获取

注：a.在进行dom元素获取的时候要注意获取的元素是否已经初始化（需要考虑获取的元素存在还是不存在）（根据页面的加载顺序来考虑）b.js里面dom元素操作不支持隐式迭代（js操作dom不能直接操作一堆，只能单个操作）

八种方法：

• 2个固定获取（静态获取）：指的是获取页面现有的元素，通过代码添加的元素获取不到。

1. querySelector ：获取之后返回的对象为单个对象

<button class="btn" id="btninfo" name="but">按钮</button>
<button class="btn" id="btnlist" name="but">按钮</button>

 var btn_1 = document.querySelector(".btn");
 console.log(btn_1);

执行结果：

2. querySelectorAll ：返回的是多个对象，集合类型NodeList

var btn_2 = document.querySelectorAll(".btn");
console.log(btn_2);

执行结果：

返回的是一个集合，这个集合至少有一个子集。

• . 4个动态获取
  1.id获取：返回是单个对象

 var btnid=document.getElementById("btninfo");
 console.log(btnid);

执行结果：

2.class获取：返回的是 HTMLCollection 集合类型，按照单个对象的用法来用（key：value

var btnclass=document.getElementsByClassName("btn");
  console.log(btnclass[0]);
  console.log(btnclass[1]);

执行结果：

3.通过元素标签名称（TagName）获取：返回HTMLCollection，集合使用同class

 var btnTagName=document.getElementsByTagName("button");
 console.log(btnTagName[0]);
 console.log(btnTagName[1]);

执行结果：

4.通过Name属性获取：返回NodeList 集合，用法跟上面一样

 var btnName=document.getElementsByName("but");
console.log(btnName[0]);
console.log(btnName[1]);

执行结果：