三、JavaScript基础交互

---

1、DOM获取标签

---

1.1 通过id名获取

• document.getElementById("id名")

• 获取到的是一个具体的元素 在整个html文档中通过id名获取一个元素

// 通过id名获取 (id名可以直接当变量使用，但是不建议)--------------------------------

console.log(box);//<div class="odiv" id="box"></div>

​

​

// //

// document 整个html文档

// get 获取

// Element 一个元素 Elements 一些元素

// By 通过

// Id id名

varbbox=document.getElementById("box")

console.log(bbox);//<div class="odiv" id="box"></div>

通过标签名获取

• document.getElementsByTagName("标签名")

• 父元素.getElementsByTagName("标签名")

• 获取到的是一个元素集合 在整个html文档中通过标签名获取一些元素

// 通过标签名获取-------------------------------

// document.getElementsByTagName("标签名") 获取到的是一个元素集合 在整个html文档中通过标签名获取一些元素

​

varcbox=document.getElementsByTagName("div")

console.log(cbox); //HTMLCollection [div#box.odiv, box: div#box.odiv]0: div#box.odivbox: div#box.odivlength: 1[[Prototype]]: HTMLCollection

​

// 通过下标去集合里面找到具体的元素：cbox[下标]*********

console.log(cbox[0])//<div class="odiv" id="box"></div>

console.log(cbox[1])//<div></div>

​

如果只想获取集合中的其中一个元素：

varcbox=document.getElementsByTagName("div")

console.log(cbox[0]);

varcbox=document.getElementsByTagName("div")[0]

console.log(cbox);//<div class="odiv" id="box"></div

通过class名获取

• document.getElementsByClassName("class名")

• 获取到的是一个元素集合 在整个html文档中通过类名获取一些元素

• （ie8一下不兼容）

// // 通过class名获取 （ie8