JavaScript中DOM获取页面元素的方法和用法

<div id="div1" class="div100 div300">div1</div>
<div id="div2" class="div100">div2</div>
<div id="div3" class="div200">div3</div>
<div id="div4" class="div200">div4</div>

<input type="button" name="" value="按钮" id="btn">
姓名：<input type="text" name="username" value="" id="username">
密码：<input type="password" name="password" value="" id="password">
性别：<input type="radio" name="sex" value="" id="nan">男
<input type="radio" name="sex" value="" id="nv">女

JavaScript中DOM获取页面元素的常用方法

推荐使用方法5

1、获取ID(重点)

通过id属性值查找标签元素  id不能重复，如果重复，则获取第一个

var btn = document.getElementById('btn');

//返回值为当前标签

<input type="button" name="" value="按钮" id="btn">

返回具体的一个标签  dom对象（document文档中的一个节点对象）

注意: console.log(div1);//id可以不声明直接试用，非标准用法，不推荐使用

2、通过标签名称获取元素

var divs = document.getElementsByTagName('div');

返回一个HTMLCollection集合，是一个类数组的特殊对象。可以直接当作数组使用。里面每一个元素，是具体的一个标签

3、通过类名获取 --- class属性

var divs = document.getElementsByClassName('div100');

也返回一个HTMLCollection集合，是一个类数组的特殊对象。可以直接当作数组使用,里面每一个元素，是具体的一个标签。

4、通过name属性值获取

var inputs = document.getElementsByName('sex');

返回一个NodeList节点列表，是一个类数组的特殊对象。可以直接当作数组使用。里面每一个元素，是具体的一个标签

5、H5提供的方法  根据选择器 获取元素(推荐)

document.querySelector()   document.querySelectorAll()

选择器  css里面的选择器除了伪类都可以用   #username .div100  div  input[name=username]  p,a 等,这两个方法都支持复杂的CSS选择器

querySelectorAll 返回一个NodeList节点列表，是一个类数组的特殊对象。可以直接当作数组使用。里面每一个元素，是具体的一个标签

var divs = document.querySelectorAll('div');
console.log(divs);

querySelector 返回具体的一个标签 ；如果满足选择器的有多个，则返回第一个

var div = document.querySelector('div');
console.log(div);

var div = document.querySelector('#div1');
console.log(div);

var divs = document.querySelectorAll('.div100');
console.log(divs);

注意:querySelector和querySelectorAll它们不支持CSS伪元素的选择器（比如:first-line和:first-letter）

和伪类的选择器（比如:link和:visited），即无法选中伪元素和伪类。

DOM获取页面元素用法案例

(1)实现显示隐藏效果

(2)实现点击变色效果

注意:

设置css样式的语法  标签.style.样式名称 = 值；

类数组(HTMLCollection NodeList)不能直接使用style,需要先遍历

修改样式, 如果有- 需要去掉-，后面的首字母大写 比如 font-size  fontSize 

HTML

<div>    
		<input type="button" value="显示" onclick="xianshi();">    
		<input type="button" value="隐藏" onclick="yincang();">    
		<br>    
		<img src="lz.jpg" id="img" class="img">    
	</div>    
	<hr>    
	<div>    
		<p>班长</p>    
		<p>组长</p>    
		<p>组员</p>    
		<input type="button" value="变色" onclick="bianse();">    
	</div>

js

//1. 点击显示 和 隐藏 按钮，控制 图片的 显示和隐藏效果    
		function yincang(){    
			var img = document.getElementById('img');    
			// console.log(img);    
			//设置css样式的语法  标签.style.样式名称 = 值；    
			//样式名称 如果有- 需要去掉-，后面的首字母大写 比如 font-size  fontSize    
			img.style.display = 'none';    
		}    
		function xianshi(){    
			var img = document.getElementById('img');    
			// console.log(img);    
			//设置css样式的语法  标签.style.样式名称 = 值；    
			img.style.display = 'block';    
		}    
		//2. 点击 变色 按钮，改变p标签的背景色  red    
		function bianse(){    
			//获取所有p标签    
			var p = document.querySelectorAll('p');    
			// p 多个标签的一个类数组对象  不能直接通过style设置样式    
			// 遍历数组，取到每一个标签，单独设置样式    
			for(var i=0; i<p.length; i++){    
				// background-color    
				p[i].style.backgroundColor = 'red';    
			}    
		}