HTML DOM文档对象查找元素的方法

一、HTML DOM 节点

在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:

  1. 文档是一个文档节点。
  2. 所有的HTML元素都是元素节点。
  3. 所有 HTML 属性都是属性节点。
  4. 文本插入到 HTML 元素是文本节点。
  5. 注释是注释节点。

二、Document 对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象
  Document 对象是 HTML 文档的根节点。
  Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
  提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。

三、HTML DOM 定义的查找对象的方法

HTML文档常见的方法:

  • getElementsByName()
  • getElementsByTagName()
  • getElementsByClassName()
  • getElementById()

(一)、getElementsByName()

1、定义和用法
  getElementsByName() 方法可返回带有指定名称的对象的集合

2、语法
  document.getElementsByName(name)

3、参数
  name 必须。元素的名称。

4、实例


<html>
<head>
	<meta charset="utf-8">
	<title>getElementsByName()实例title>
	<script>
		function getElements(){
			var f=document.getElementsByName("fruit");
			alert(f.length);
		}
	script>
head>
<body>
	苹果:<input name="fruit" type="radio" value="苹果">
	香蕉:<input name="fruit" type="radio" value="香蕉">
	<input type="button" onclick="getElements()" value="name为 'fruit'的元素数量?">
body>
html>

5、效果图
HTML DOM文档对象查找元素的方法_第1张图片

(二)、getElementsByTagName()

1、定义和用法
  getElementsByTagName() 方法可返回带有指定标签名的对象的集合
  提示: 参数值 “*” 返回文档的所有元素。

2、语法
  document.getElementsByTagName(tagname)

3、参数
  tagname String 必须。你要获取元素的标签名。

4、返回值
  NodeList 对象 指定标签名的元素集合

5、实例


<html>
<head>
	<meta charset="utf-8">
	<title>getElementsByTagName()实例title>
head>
<body>
	<p id="demo">单击按钮来改变这一段中的文本。p>
	<button onclick="myFunction()">点我button>
	<script>
		function myFunction(){
			document.getElementsByTagName("P")[0].innerHTML="Hello World";
		};
	script>
body>
html>

6、效果
 单击按钮前:
HTML DOM文档对象查找元素的方法_第2张图片

单击按钮后:
HTML DOM文档对象查找元素的方法_第3张图片

(三)、getElementsByClassName()

1、定义和使用
  getElementsByClassName() 方法返回文档中所有指定类名的元素集合,作为 NodeList 对象。NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
  提示: 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数,并循环各个元素来获取你需要的那个元素。
  注意: Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。

2、语法
  document.getElementsByClassName(classname)

3、参数
  classname String 必须。你需要获取的元素类名。
  多个类名使用空格分隔,如 “test demo”。

4、实例


<html>
<head>
	<meta charset="utf-8">
	<title>getElementsByClassName()实例title>
	<style>
		div {
		    border: 1px solid black;
		    margin: 5px;
		}
		.example {
		    border: 1px solid black;
		    margin: 5px;
		}
	style>
head>
<body>
<h1>实例一h1>
<div class="nocolor">
	<p>P 元素在在第一个样式为 class="example" 的 Div 元素中。Div 的索引值为 0。p>
div>
<div class="color red">
	<p>P 元素在在第一个样式为 class="example color" 的 Div 元素中。Div 的索引值为 0。p>
div>
<div class="color yellow">
	<p>P 元素在在第二个样式为 class="example color" 的 Div 元素中。Div 的索引值为 1。p>
div>
<p>点击按钮修改第一个类为 "example" 的 div 元素的背景颜色。p>
<p>获取到的对象的长度(数量):<span id="demo">span>p>
<hr/>
<h1>实例二h1>
<div class="example">样式 class="example" 的 Div 元素div>
<div class="example">另外一个样式 class="example" 的 Div 元素div>
<p class="example">样式为 class="example" 的 p 元素。p>
<p>这是一个插入在 p 元素中样式 class="example" 的<span class="example">spanspan> 元素 。p>
<p>点击按钮修改所有样式 class="example" 的背景颜色。p>
<button onclick="myFunction()">点我button>
<p><strong>注意:strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。p>
<script>
	function myFunction() {
	    var x = document.getElementsByClassName("color");
	    x[0].style.backgroundColor = "red";
		x[1].style.backgroundColor = "yellow";
		document.getElementById("demo").innerHTML = x.length;
		
		//for循环改变
		var x = document.getElementsByClassName("example");
	    var i;
	    for (i = 0; i < x.length; i++) {
	        x[i].style.backgroundColor = "red";
	    }
	}
script>

body>
html>

5、效果图
单击按钮前:
HTML DOM文档对象查找元素的方法_第4张图片

单击按钮后:
HTML DOM文档对象查找元素的方法_第5张图片

(四)、getElementsById()

1、定义和使用
  getElementsByClassName() 方法返回文档中所有指定类名的元素集合,作为 NodeList 对象。
  NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
  提示: 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数,并循环各个元素来获取你需要的那个元素。

2、方法
  getElementsById()

3、语法
  document.getElementsById(id)

4、参数
  id String 必须。你需要获取的元素id。

5、实例


<html>
<head>
	<meta charset="utf-8">
	<title>getElementById()title>
head>
<body>
	<p id="demo">单击按钮来改变这一段中的文本。p>
	<button onclick="myFunction()">点我button>
	<script>
		function myFunction(){
			document.getElementById("demo").innerHTML="Hello World";
		};
	script>
body>
html>

6、效果图
单击按钮前
HTML DOM文档对象查找元素的方法_第6张图片

单击按钮后
HTML DOM文档对象查找元素的方法_第7张图片

你可能感兴趣的:(JavaScript,HTML+CSS,getElementById)