JavaScript HTML DOM元素

基于W3school的学习笔记

---

---

查找HTML元素

通常，通过JavaScript，需要操作HTML元素。有多种完成此任务的方法。

---

一、通过id查找HTML元素

DOM 中查找 HTML 元素最简单的方法是，使用元素的 id。

代码如下（示例）：

<script>
var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML = 
"来自 intro 段落的文本是：" + myElement.innerHTML;
</script>

二、通过标签名查找 HTML 元素

代码如下（示例）：

<h1>通过标签名查找 HTML 元素</h1>
<div id="main">
<p>DOM 很有用。</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>
<p id="demo"></p>
<script>
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
document.getElementById("demo").innerHTML = 
'“main”中的第一段（索引 0）是：' + y[0].innerHTML;
</script>

三、通过类名查找 HTML 元素

代码如下（示例）：

<h1>通过类名查找 HTML 元素</h1>
<p>Hello World!</p>
<p class="intro">DOM 很有用。</p>
<p class="intro">本例演示 <b>getElementsByClassName</b> 方法。</p>
<p id="demo"></p>
<script>
var x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML = 
'class ="intro" 的第一段（索引 0）：' + x[0].innerHTML;
</script>

四、通过 CSS 选择器查找 HTML 元素

代码如下（示例）：

<h1>按查询选择器查找 HTML 元素</h1>
<p>Hello World!</p>
<p class="intro">DOM 很有用。</p>
<p class="intro">本例演示 <b>querySelectorAll</b> 方法。</p>
<p id="demo"></p>
<script>
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = 
'class ="intro" 的第一段（索引 0）：' + x[0].innerHTML;
</script>

五、通过 HTML 对象选择器查找 HTML 对象

代码如下（示例）：

<h1>使用 document.forms 查找 HTML 元素</h1>
<form id="frm1" action="/demo/demo_form.asp">
  First name: <input type="text" name="fname" value="Bill"><br>
  Last name: <input type="text" name="lname" value="Gates"><br><br>
  <input type="submit" value="提交">
</form> 
<p>单击“试一试”按钮，显示表单中每个元素的值。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.forms["frm1"];
  var text = "";
  var i;
  for (i = 0; i < x.length ;i++) {
    text += x.elements[i].value + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

六、其他方式

以下 HTML 对象（和对象集合）也是可访问的：
document.anchors
document.body
document.documentElement
document.embeds
document.forms
document.head
document.images
document.links
document.scripts
document.title

---