JavaScript DOM获取元素

目录

　　body

　　html

　　id

　　tag name

　　class name

　　选择器

获取body元素

var bodyElement = document.body

获取html元素

var bodyElement = document.documentElement

id获取

　语法：

var element = document.getElementById(id)

　说明：

　　element：是一个对象。id的元素不存在则返回null

　　id: 是大小写敏感。id为字符串

　实例：

<div id="one">hello world</div>

<script>
    var element = document.getElementById("one")
    console.log(element)
</script>

　　结果：是element对象

<div id="one">hello world</div>

标签名获取

　语法：

var element = document.getElementByTagName(tagName)

　实例：

<div id="one">hello world</div>
<div id="one">hello world</div>

<script>
    var element = document.getElementsByTagName("div")
    console.log(element)
</script>

　结果：

　　1. 结果是为数组。

HTML5新增的方法获取（类名获取）

　语法：

var elements = element.getElementsByClassName(names)

　实例：

<div class="one">hello world</div>
<div class="one">hello world</div>

<script>
    var one = document.getElementsByClassName("one")
    console.log(one)
</script>

　说明：和标签一样

特殊元素获取（querySelector）

　querySelector返回指定选择器的第一个元素对象

　　语法：

var element = document.querySelector(选择器）

　　实例：

<div class="one">hello world</div>
<div class="one">hello world</div>
<div id="one">hello</div>

<script>
    // 返回只当选择器的第一个对象
    var class_one = document.querySelector(".one")
    var id_one = document.querySelector("#one")
    var tag_one = document.querySelector("div")
    // 返回所有选择器的对象
    var class1 = document.querySelectorAll(".one")
    var tag1 = document.querySelectorAll("div")
    console.log(tag1)
</script>

　　结果：

　　　　1. querySelectorAll的结果和类名、标签的结果一样。