JavaScript 通过 Document 类型表示文档。
在浏览器中， document 对象是 HTMLDocument （继承
自 Document 类型）的一个实例，表示整个 HTML 页面。
而且， document 对象是 window 对象的一个
属性，因此可以将其作为全局变量来访问。
nodeType的值为 9；nodeName的值为#document；nodeValue的值为null；
通过document对象，不仅可以取得与页面有关的信息，而且还能操作页面的外观及其底层结构。
一. 获取节点的多种方式
1.1 获取节点方法1：getElementById(id)
在整个文档中，根据元素
id来获取元素节点
<body>
<h1 id="myH1" class="hTitle">这个是标题</h1>
<script type="text/javascript">
//根据id获取元素
var h1 = document.getElementById("myH1");
alert(h1.id); //查看这个元素的id
alert(h1.className); //元素的 className
alert(h1.innerHTML); //查看元素包含的所有HTML文本
</script>
</body>
注意:
- 如果有多个元素的
id相同，则只返回第一个元素。一般情况，不要给多个元素起同名id
1.2 获取节点方法2：getElementsByTagName(tagName)
根据标签名获取元素节点。因为一个文档中会有多个同名标签，所以这个方法返回的是多个Element组成的集合
为了提高性能，在开发的时候应该尽量避免使用这种方式去查找元素，应该使用getElementById
<body>
<h1 id="myH1" class="hTitle">这个是标题1</h1>
<h1 id="myH2" class="hTitle">这个是标题2</h1>
<h1 id="myH3" class="hTitle">这个是标题3</h1>
<script type="text/javascript">
var h1s = document.getElementsByTagName("h1");
alert(h1s.length);
for (var i = 0; i < h1s.length; i++) {
alert(h1s[i].id); //可以通过下标访问 ht[i]
alert(h1s.item(i).id); // 也可以通过item下标访问 item(i)
}
</script>
</body>
1.3 获取节点方法3：getElementByName(name)
这个是通过标签的name属性的值来获取元素的。
由于会出现多个元素name属性的值相等，所以返回的是多个Element组成的集合.
注意:
- 不是所有的元素都有
name属性，只有 表单标签 才有。而且某些低版本浏览器兼容有问题。慎用
<body>
<form action="">
爱好：<br/>
<input type="checkbox" name="lover" value="swimming">游泳<br/>
<input type="checkbox" name="lover" value="net">上网
</form>
<script type="text/javascript">
var lovers = document.getElementsByName("lover");
for (var i = 0; i < lovers.length; i++) {
alert(lovers[i].value);
//alert(lovers.item(i).value)
}
</script>
</body>
1.4 获取节点的方法4：querySelector(css选择器)
- 参数：必须。指定一个或多个匹配元素的
CSS选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。
- 返回值：匹配指定
CSS选择器的 第一个元素 。 如果没有找到，返回null。
<body>
<p id="demo">id="demo" 的 第一个 p 元素</p>
<p id="demo">id="demo" 的 第二个 p 元素</p>
<button onclick="myFunction()">点我修改id = demo 的第一个元素内容</button>
<script>
function myFunction() {
//返回第一个id=demo的元素
document.querySelector("#demo").innerHTML = "Hello World!";
}
</script>
</body>
document.querySelector("p"); // 获取文档中第一个p元素(元素选择器)
document.querySelector("p.example"); //获取文档中 class="example" 的第一个 <p> 元素:
1.5 获取节点的方法5：querySelectorAll(css选择器)
querySelector只能获取第一个满足条件的元素，如果想获取所有满足条件的元素，可以使用HTML5引入的新方法qureySelectorAll
<body>
<p id="demo">id="demo" 的 第一个 p 元素</p>
<p id="demo">id="demo" 的 第二个 p 元素</p>
<button onclick="myFunction()">点我修改id = demo 的所有元素</button>
<script>
function myFunction() {
var all = document.querySelectorAll("#demo");
for (var i = 0; i < all.length; i++) {
all[i].innerHTML = "哈哈哈"
}
}
</script>
</body>
二. html, head, body的简便获取方法
html --> document.documentElement
body --> document.body
head --> document.head