首页课程Javascript fun classSelect element

Select element

目录列表

选择元素

选择元素

所有HTML元素都是对象。而且我们知道每个对象都有属性和方法。

文档对象具有允许您选择所需HTML元素的方法。

这三种方法最常用于选择HTML元素:

//通过 id 找元素
document.getElementById(id) 
//通过 class 找元素
document.getElementsByClassName(name) 
//通过 tag 找元素
document.getElementsByTagName(name)

在下面的示例中,getElementById 方法用于选择 id="demo" 的元素并更改其内容:

 提示: 以上示例假定HTML包含 id="demo" 的元素,例如<div id ="demo"></div>


填空, 以选择id ="demo" 的元素并更改其内容:

ob = document.getElementById("");.innerHTML = "Hi";

使用DOM

使用DOM

DOM中的每个元素都有一组属性和方法,它们提供有关它们在DOM中的关系的信息:

element.childNodes 返回一个元素的子节点的数组。

element.firstChild 返回元素的第一个子节点。

element.lastChild 返回元素的最后一个子节点。

element.hasChildNodes 如果元素有任何子节点,则返回 true,否则为 false 。

element.nextSibling 返回相同树级别的下一个节点。

element.previousSibling 返回在同一树级别的上一个节点。

element.parentNode 返回元素的父节点。

例如,我们可以选择元素的所有子节点并更改其内容:

<html>
  <body>
    <div id ="demo">
      <p>一些文本</p>
      <p>另一些文本 </p>
    </div>
    <script>
     var a = document.getElementById("demo");
     var arr = a.childNodes;
     for(var x=0;x<arr.length;x++) {
       arr[x].innerHTML = "新的文本";
     } 
    </script>
  </body>
</html>


填空,以选择所有div元素并 alert 第3个div的内容。

var arr = document. getElementsByTagName("");

 alert(arr[].innerHTML);

选择元素

选择元素

getElementsByClassName() 方法通过类名查找所有元素,并将其作为数组返回。

例如,如果我们的HTML页面包含三个元素与 class="demo",以下代码将返回所有这些元素作为一个数组:

<div class="demo">
    <span class="demo">Hi I'm Loen!</span>
</div>
<p class="demo">This is a paragraph</p>
<script>
var arr =  document.getElementsByClassName("demo");
//访问第二个元素
arr[1].innerHTML = "Hi I am Peter";
</script>

类似地,getElementsByTagName 方法返回指定标签名称的所有元素,作为数组返回。

以下示例获取页面的所有段落元素并更改其内容:

<p>hi</p>
<p>hello</p>
<p>hi</p>
<script>
var arr = document.getElementsByTagName("p");
for (var x = 0; x < arr.length; x++) {
  arr[x].innerHTML = "Hi there";
}
</script>

脚本将HTML改变成:

<p>Hi there</p>
<p>Hi there</p>
<p>Hi there</p>


DOM中的节点可以有多个父节点。