课程目录

查找DOM

阅读: 4136    发布时间: 2018-01-23 12:17:00

通过元素id查找DOM

  • document.getElementById(id名称)

  • innerHTML为DOM内容

<div id="demo">
</div>

<script>
    var demo=document.getElementById("demo")
    demo.innerHTML="测试"
</script>

通过类名查找DOM

  • document.getElementsByClassName(类名)

  • 由于同一类名可以被多个元素使用，所以通过类会查找到多个节点，修改内容时需要指明修改第几个，demo[0].innerHTML

<div class="demo">
</div>

<script>
    var demo=document.getElementsByClassName("demo")
    demo[0].innerHTML="测试"
</script>

通过标签名查找DOM

  • document.getElementsByTagName(标签名)

  • 由于同一标签名可以被多个元素使用，所以通过标签会查找到多个节点，修改内容时需要指明修改第几个，demo[0].innerHTML

<div class="demo">
</div>

<script>
    var demo=document.getElementsByTagName("div")
    demo[0].innerHTML="测试"
</script>

通过name查找DOM

  • document.getElementsByName(name)

<div name="demo">
</div>

<script>
    var demo=document.getElementsByName("demo")
    demo[0].innerHTML="测试"
</script>

通过querySelector查找DOM

  • querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

var demo=document.querySelector("#demo")  //获取文档中第一个id为demo的元素
var demo=document.querySelector(".demo")  //获取文档中第一个class为demo的元素
var demo=document.querySelector("p")  //获取文档中第一个p元素
var demo=document.querySelector("p.test")  //获取文档中第一个class为test的p元素

通过querySelectorAll查找DOM

  • querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素。

  • 使用类似querySelector，操作某个dom时，需要指定是那一个

← 什么是DOM

-END-