JavaScript零基础入门 8：document获取节点元素
Posted 哪 吒
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript零基础入门 8：document获取节点元素相关的知识，希望对你有一定的参考价值。
🍅 Java学习路线配套文章：Java学习路线总结，搬砖工逆袭Java架构师（全网最强）
🍅 基础推荐：Java基础教程系列
🍅 实战推荐：Spring Boot基础教程
🍅 简介：Java领域优质创作者🏆、CSDN哪吒公众号作者✌ 、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);
);
四、哪吒社区万粉计划
1、Java从入门到项目实战
2、SQL从入门到精通
3、手把手教你学Linux
4、Python从入门到项目实战
🍅 Java学习路线配套文章：Java学习路线总结，搬砖工逆袭Java架构师（全网最强）
🍅 基础推荐：Java基础教程系列
🍅 实战推荐：Spring Boot基础教程
🍅 简介：Java领域优质创作者🏆、CSDN哪吒公众号作者✌ 、Java架构师奋斗者💪
🍅 扫描主页左侧二维码，加入群聊，一起学习、一起进步
🍅 欢迎点赞 👍 收藏 ⭐留言 📝
上一篇：JavaScript零基础入门 7：JavaScript基础函数
下一篇：JavaScript零基础入门 9：读取元素的样式
以上是关于JavaScript零基础入门 8：document获取节点元素的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript零基础入门 7：JavaScript基础函数
---------------------------------Javascript零基础到入门