JavaScript零基础入门 8：JavaScript通过document获取节点元素

🍅 作者简介：哪吒，CSDN2021博客之星亚军🏆、新星计划导师✌、博客专家💪

🍅 哪吒多年工作总结：Java学习路线总结，搬砖工逆袭Java架构师

🍅 关注公众号【哪吒编程】，回复1024，获取Java学习路线思维导图、大厂面试真题、加入万粉计划交流群、一起学习进步

一、document

//获取到button对象
var btn = document.getElementById("btn");
			
//修改按钮的文字
btn.innerHTML = "I'm 哪吒";

二、onload

浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行,如果将script标签写到页面的上边，在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获取到DOM对象。

onload事件会在整个页面加载完成之后才触发。

为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。

window.onload = function(){
    //获取id为btn的按钮
	var btn = document.getElementById("btn");
	//为按钮绑定一个单击响应函数
	btn.onclick = function(){
		alert("hello 哪吒");
	};
};

三、获取节点元素

1、innerHTML

//为id为btn的按钮绑定一个单击响应函数
var btn = document.getElementById("btn");
btn01.onclick = function(){
	//查找#bj节点
	var nz = document.getElementById("nz");
	//打印bj
	//innerHTML 通过这个属性可以获取到元素内部的html代码
	alert(nz.innerHTML);
};

2、getElementsByTagName()

//为id为btn的按钮绑定一个单击响应函数
var btn = document.getElementById("btn");
btn.onclick = function(){
	//查找所有li节点
	//getElementsByTagName()可以根据标签名来获取一组元素节点对象
	//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
	//即使查询到的元素只有一个，也会封装到数组中返回
	var lis = document.getElementsByTagName("li");
	
	//打印lis
	//alert(lis.length);
	
	//变量lis
	for(var i=0 ; i<lis.length ; i++){
		alert(lis[i].innerHTML);
	}
};

3、获取节点元素

//为id为btn的按钮绑定一个单击响应函数
var btn = document.getElementById("btn");
btn.onclick = function(){
	//查找name=gender的所有节点
	var inputs = document.getElementsByName("gender");
	
	//alert(inputs.length);
	
	for(var i=0 ; i<inputs.length ; i++){
		/*
		 * innerHTML用于获取元素内部的HTML代码的
		 * 	对于自结束标签，这个属性没有意义
		 */
		//alert(inputs[i].innerHTML);
		/*
		 * 如果需要读取元素节点属性，
		 * 	直接使用 元素.属性名
		 * 		例子：元素.id 元素.name 元素.value
		 * 		注意：class属性不能采用这种方式，
		 * 			读取class属性时需要使用 元素.className
		 */
		alert(inputs[i].className);
	}
};

4、获取li值

//为id为btn的按钮绑定一个单击响应函数
var btn = document.getElementById("btn");
btn.onclick = function(){
	
	//获取id为city的元素
	var city = document.getElementById("city");
	
	//查找#city下所有li节点
	var lis = city.getElementsByTagName("li");
	
	for(var i=0 ; i<lis.length ; i++){
		alert(lis[i].innerHTML);
	}
	
};

5、childNodes

获取包括文本节点在呢的所有节点

//为id为btn的按钮绑定一个单击响应函数
var btn = document.getElementById("btn");
btn05.onclick = function(){
	//获取id为city的节点
	var city = document.getElementById("city");
	//返回#city的所有子节点
	/*
	 * childNodes属性会获取包括文本节点在呢的所有节点
	 * 根据DOM标签标签间空白也会当成文本节点
	 * 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
	 * 	所以该属性在IE8中会返回4个子元素而其他浏览器是9个
	 */
	var cns = city.childNodes;
	
	//alert(cns.length);
	
	/*for(var i=0 ; i<cns.length ; i++){
		alert(cns[i]);
	}*/
	
	/*
	 * children属性可以获取当前元素的所有子元素
	 */
	var cns2 = city.children;
	alert(cns2.length);
};

6、firstChild

获取第一个子节点

//为id为btn的按钮绑定一个单击响应函数
var btn = document.getElementById("btn");
btn06.onclick = function(){
	//获取id为phone的元素
	var phone = document.getElementById("phone");
	//返回#phone的第一个子节点
	//phone.childNodes[0];
	//firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
	var fir = phone.firstChild;
	
	//firstElementChild获取当前元素的第一个子元素
	/*
	 * firstElementChild不支持IE8及以下的浏览器，
	 * 	如果需要兼容他们尽量不要使用
	 */
	//fir = phone.firstElementChild;
	
	alert(fir);
};

7、innerText

该属性可以获取到元素内部的文本内容。

//为id为btn的按钮绑定一个单击响应函数
myClick("btn",function(){
	
	//获取id为bj的节点
	var nz = document.getElementById("nz");
	
	//返回#nz的父节点
	var n= nz.parentNode;
	
	alert(m.innerHTML);
	
	/*
	 * innerText
	 * 	- 该属性可以获取到元素内部的文本内容
	 * 	- 它和innerHTML类似，不同的是它会自动将html去除
	 */
	//alert(n.innerText);
	
	
});

8、previousSibling

返回#android的前一个兄弟节点（也可能获取到空白的文本）。

//为id为btn的按钮绑定一个单击响应函数
myClick("btn",function(){
	
	//获取id为nezha的元素
	var and = document.getElementById("nezha");
	
	//返回#nezha的前一个兄弟节点（也可能获取到空白的文本）
	var ps = and.previousSibling;
	
	//previousElementSibling获取前一个兄弟元素，IE8及以下不支持
	//var pe = and.previousElementSibling;
	
	alert(ps);
	
});

9、读取#username的value属性值

//读取#username的value属性值
myClick("btn",function(){
	//获取id为username的元素
	var u= document.getElementById("username");
	//读取u的value属性值
	//文本框的value属性值，就是文本框中填写的内容
	alert(u.value);
});

设置#username的value属性值

·//设置#username的value属性值
myClick("btn",function(){
	//获取id为username的元素
	var um = document.getElementById("username");
	
	um.value = "我是CSDN哪吒";
});

10、返回#nz的文本值

myClick("btn",function(){				
	//获取id为nz的元素
	var bj = document.getElementById("nz");
	
	//alert(nz.innerHTML);
	//alert(nz.innerText);
	
	//获取bj中的文本节点
	/*var fc = nz.firstChild;
	alert(fc.nodeValue);*/
	
	alert(nz.firstChild.nodeValue);
});

🍅 作者简介：CSDN2021博客之星亚军🏆、新星计划导师✌、博客专家💪

🍅 哪吒多年工作总结：Java学习路线总结，搬砖工逆袭Java架构师

🍅 关注公众号【哪吒编程】，回复1024，获取Java学习路线思维导图、大厂面试真题、加入万粉计划交流群、一起学习进步

上一篇：JavaScript零基础入门 7：JavaScript基础函数
下一篇：JavaScript零基础入门 9：读取元素的样式