访问DOM 元素

DOM模型用逻辑树表示一个文档。这个树结构称为节点树。树的每个分支会结束到某个节点,并且每个节点包含一些对象。通过树可以访问全部节点。它们的内容可以被编辑或者删除,也可以创建新的元素。

文档对象

文档对象代表HTML 文档自身。它可以描述文档结构的构成对象(或节点),并且通过接口脚本和程序可以访问文档的对象。为开发者提供了表示网页每个元素的方法,这样网页的内容就可以通过一些通用的属性和方法进行处理。

DOM 方法

最通用的方法是选择一个元素,用document.getElementById 方法。HTML文档的每一个元素都有一个可选ID属性,是个唯一值。这个方法参数是个ID字符串,并且返回对应此ID的元素的引用,如果没有就返回null。这个 getElementById() 和 getElementsByTagName()是DOM标准的两个方法,HTML5增加了三个方法访问元素:getElementsByClassName(), querySelector(), and querySelectorAll()。

  • getElementById() - 用ID查找
  • getElementsByClassName()- 用Class名查找
  • getElementsByTagName() - 用Tag名称查找
  • querySelector() - 用Selector选择子查找(单个)
  • querySelectorAll() - 用Selector选择子查找 (全部)

getElementById()

Javascript 提供了document.getElementById() 方法,是访问DOM树型结构元素的最简单的方法。它将返回与参数ID对应的元素。

document.getElementById('heading')

Document Object Model

源程序

<html>
<body>
<h1 id="heading">Access this text....</h1>
<button onclick="changeIt()">获得值</button>
<script>
function changeIt() {
var title_element = document.getElementById('heading').innerHTML;
alert(title_element);
}
</script>
</body>
</html>

getElementsByTagName()

这个getElementsByTagName() 方法返回一个元素的全部子元素集合,而这个元素具有此特定的标签名,返回值是一个节点列表对象。

Paragraph 1

Paragraph 2

源程序

<html>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<button onclick="count()">获得值</button>
<script>
function count() {
var cnt = document.getElementsByTagName("p");
alert(cnt.length); }
</script>
</body>
</html>

getElementsByClassName()

getElementsByClassName() 依靠给定的类名称,返回全部子元素的类数组对象。

document.getElementsByClassName("ClassName");

Paragraph 1

Paragraph 2

源程序

<html>
<body>
<p class="testClass">Paragraph 1</p>
<p class="testClass">Paragraph 2</p>
<button onclick="count()">改变值</button>
<script>
function count() {
var tmpClass = document.getElementsByClassName("testClass");
alert(tmpClass.length);
tmpClass[0].innerHTML ="First Paragraph changed !!";
}
</script>
</body>
</html>

上面的程序首先提示2,是p元素的个数,并且改变第一个p元素的文本为 "First Paragraph changed !!"。

最新的浏览器有querySelector() 和querySelectorAll() 方法。 它们可以通过CSS选择子找到一个或更多的元素。这些方法通过CSS选择子查询HTML文档的DOM元素。它被内建在浏览器中,支持选择子查询性能,形成更通用的javascript 库

querySelector() 例子

querySelector() 通过匹配特定的选择子组,返回文档中的第一元素,如果没有匹配,就返回空。

Paragraph 1

Paragraph 2

源程序

<html>
<body>
<p id="qSelector">Paragraph 1</p>
<p id="qSelector1">Paragraph 2</p>
<button onclick="change()">改变值</button>
<script>
function change() {
document.querySelector("#qSelector").innerHTML ="First Paragraph";
}
</script>
</body>
</html>

querySelectorAll() 例子

querySelectorAll()通过按源顺序匹配特定的选择子组,返回一个元素列表。由于是静态集合,所以文档的编辑在集合上没有反应。

div content 1

Paragraph 2

源程序

<html>
<body>
<div class="div_">div content 1</div>
<p class="p_">Paragraph 2</p>
<button onclick="change()">改变值</button>
<script>
function change() {
var elements = document.querySelectorAll(".div_,.p_");
elements[0].innerHTML = "div content changed";
elements[1].innerHTML = "Paragraph changed";
}
</script>
</body>
</html>

原文链接