search
  • Sign In
  • Sign Up
Password reset successful

Follow the proiects vou are interested in andi aet the latestnews about them taster

首页课程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中的节点可以有多个父节点。