前端(十一):JS的DOM操作
文章目录
- 获取元素节点
- 获取元素节点的子节点
- 获取父节点和兄弟节点
- 案例
获取元素节点
通过document对象调用
getElementById()：通过id属性获取一个元素节点对象。
getElementsByTagName()：通过标签名获取一组元素节点对象。
getElementsByName()：通过name属性获取一组元素节点对象。
获取元素节点的子节点
通过具体的元素节点调用
getElementsByTagName()：方法，返回当前节点的指定标签名后代节点。
childNodes：属性，表示当前节点的所有子节点。
firstChild：属性，表示当前节点的第一个子节点。
lastChild：属性，表示当前节点的最后一个子节点。
获取父节点和兄弟节点
通过具体的节点调用
parentNode：属性，表示当前节点的父节点
previousSibling：属性，表示当前节点的前一个兄弟节点
nextSibling：属性，表示当前节点的后一个兄弟节点
案例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Untitled Document</title><!-- <link rel="stylesheet" type="text/css" href="style/css.css" /> --><style type="text/css">@charset "UTF-8";body {width: 800px;margin-left: auto;margin-right: auto;}button {width: 300px;margin-bottom: 10px;}#btnList {float: left;}#total {width: 450px;float: left;}ul {list-style-type: none;margin: 0px;padding: 0px;}.inner li {border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float: left;}.inner {width: 400px;border-style: solid;border-width: 1px;margin-bottom: 10px;padding: 10px;float: left;}</style><script type="text/javascript">/** 定义一个函数，专门用来为指定元素绑定单击响应函数* 参数：* idStr：要绑定单击响应函数的对象的id属性值* fun：事件的回调函数，当单击元素时，该函数将会被触发*/function myClick(idStr, fun) {var btn = document.getElementById(idStr)btn.onclick = fun // 函数也是对象，可以作为实参}window.onload = function () {//为id为btn01的按钮绑定一个单击响应函数var btn01 = document.getElementById('btn01')btn01.onclick = function () {//查找#bj节点var bj = document.getElementById('bj')//打印bj//innerHTML 通过这个属性可以获取到元素内部的html代码alert(bj.innerHTML)}//为id为btn02的按钮绑定一个单击响应函数var btn02 = document.getElementById('btn02')btn02.onclick = function () {//查找所有li节点//getElementsByTagName()可以根据标签名来获取一组元素节点对象//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中//即使查询到的元素只有一个，也会封装到数组中返回var lis = document.getElementsByTagName('li')//打印lis//alert(lis.length);//变量lisfor (var i = 0; i < lis.length; i++) {alert(lis[i].innerHTML)}}//为id为btn03的按钮绑定一个单击响应函数var btn03 = document.getElementById('btn03')btn03.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)}}//为id为btn04的按钮绑定一个单击响应函数var btn04 = document.getElementById('btn04')btn04.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)}}//为id为btn05的按钮绑定一个单击响应函数var btn05 = document.getElementById('btn05')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.childrenalert(cns2.length)}//为id为btn06的按钮绑定一个单击响应函数var btn06 = document.getElementById('btn06')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)}//为id为btn07的按钮绑定一个单击响应函数myClick('btn07', function () {//获取id为bj的节点var bj = document.getElementById('bj')//返回#bj的父节点var pn = bj.parentNodealert(pn.innerHTML)/** innerText* - 该属性可以获取到元素内部的文本内容* - 它和innerHTML类似，不同的是它会自动将html去除*///alert(pn.innerText);})//为id为btn08的按钮绑定一个单击响应函数myClick('btn08', function () {//获取id为android的元素var and = document.getElementById('android')//返回#android的前一个兄弟节点（也可能获取到空白的文本）var ps = and.previousSibling//previousElementSibling获取前一个兄弟元素，IE8及以下不支持//var pe = and.previousElementSibling;alert(ps)})//读取#username的value属性值myClick('btn09', function () {//获取id为username的元素var um = document.getElementById('username')//读取um的value属性值//文本框的value属性值，就是文本框中填写的内容alert(um.value)})//设置#username的value属性值myClick('btn10', function () {//获取id为username的元素var um = document.getElementById('username')um.value = '今天天气真不错~~~'})//返回#bj的文本值myClick('btn11', function () {//获取id为bj的元素var bj = document.getElementById('bj')//alert(bj.innerHTML);//alert(bj.innerText);//获取bj中的文本节点/*var fc = bj.firstChild;alert(fc.nodeValue);*/alert(bj.firstChild.nodeValue)})}</script></head><body><div id="total"><div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul><br /><br /><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br /><br /><p>你手机的操作系统是?</p><ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul></div><div class="inner">gender:<input class="hello" type="radio" name="gender" value="male" />Male<input class="hello" type="radio" name="gender" value="female" />Female<br /><br />name:<input type="text" name="name" id="username" value="abcde" /></div></div><div id="btnList"><div><button id="btn01">查找#bj节点</button></div><div><button id="btn02">查找所有li节点</button></div><div><button id="btn03">查找name=gender的所有节点</button></div><div><button id="btn04">查找#city下所有li节点</button></div><div><button id="btn05">返回#city的所有子节点</button></div><div><button id="btn06">返回#phone的第一个子节点</button></div><div><button id="btn07">返回#bj的父节点</button></div><div><button id="btn08">返回#android的前一个兄弟节点</button></div><div><button id="btn09">返回#username的value属性值</button></div><div><button id="btn10">设置#username的value属性值</button></div><div><button id="btn11">返回#bj的文本值</button></div></div></body>
</html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！