05.DOM 查询练习-节点练习

尾部附上整体代码！

1，

//1.查找#bj节点document.getElementById('btn01').onclick = function () {var biObj = document.getElementById("bj")alert(biObj.innerHTML)}

结果：

//2.查找所有li节点var btn02Ele = document.getElementById("btn02");btn02Ele.onclick = function(){var lis = document.getElementsByTagName('li')alert(lis.length)};

//3.查找name=gender的所有节点var btn03Ele = document.getElementById("btn03");btn03Ele.onclick = function(){var nameg = document.getElementsByName('gender')alert(nameg.length)};

//4.查找#city下所有li节点var btn04Ele = document.getElementById("btn04");btn04Ele.onclick = function(){var ls = document.getElementById('city').getElementsByTagName('li')alert(ls.length)};

5，

//5.返回#city的所有子节点var btn05Ele = document.getElementById("btn05");btn05Ele.onclick = function(){var allid = document.getElementById('city').childNodes// alert(document.getElementById('city').childNodes.length)for(i=0; i<allid.length;i++){alert(allid[i].textContent)}};

有很多【出一个例子】：

6，

//6.返回#phone的第一个子节点var btn06Ele = document.getElementById("btn06");btn06Ele.onclick = function(){let phonel = document.getElementById('phone').firstElementChild;alert(phonel.innerHTML)};

//7.返回#bj的父节点var btn07Ele = document.getElementById("btn07");btn07Ele.onclick = function(){let pnode = document.getElementById('bj').parentNode;alert(pnode.innerHTML)};

//8.返回#android的前一个兄弟节点var btn08Ele = document.getElementById("btn08");btn08Ele.onclick = function(){var andobj = document.getElementById('android');alert(andobj.previousSibling.innerHTML)};

9，

//9.读取#username的value属性值var btn09Ele = document.getElementById("btn09");btn09Ele.onclick = function(){var userobj = document.getElementById("username");alert(userobj.value)};

10，

//10.设置#username的value属性值var btn10Ele = document.getElementById("btn10");btn10Ele.onclick = function(){var userobj = document.getElementById("username");userobj.value='new value!'};

11，

//11.返回#bj的文本值var btn11Ele = document.getElementById("btn11");btn11Ele.onclick = function(){var bjobj = document.getElementById('bj');alert(bjobj.innerText)/***innerHTML:表示获取/设置起始标签和结束标签中的内容*innerText:表示获取/设置起始标签和结束标签中的文本*/};

innerHTML:表示获取/设置起始标签和结束标签中的内容【会包括标签】
innerText:表示获取/设置起始标签和结束标签中的文本【仅仅会留下文本】

做出对比：

innerText：

innerHTML：

整体代码！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">window.onload = function(){//1.查找#bj节点document.getElementById('btn01').onclick = function () {var biObj = document.getElementById("bj")alert(biObj.innerHTML)}//2.查找所有li节点var btn02Ele = document.getElementById("btn02");btn02Ele.onclick = function(){var lis = document.getElementsByTagName('li')alert(lis.length)};//3.查找name=gender的所有节点var btn03Ele = document.getElementById("btn03");btn03Ele.onclick = function(){var nameg = document.getElementsByName('gender')alert(nameg.length)};//4.查找#city下所有li节点var btn04Ele = document.getElementById("btn04");btn04Ele.onclick = function(){var ls = document.getElementById('city').getElementsByTagName('li')alert(ls.length)};//5.返回#city的所有子节点var btn05Ele = document.getElementById("btn05");btn05Ele.onclick = function(){var allid = document.getElementById('city').childNodes// alert(document.getElementById('city').childNodes.length)for(i=0; i<allid.length;i++){alert(allid[i].textContent)}};//6.返回#phone的第一个子节点var btn06Ele = document.getElementById("btn06");btn06Ele.onclick = function(){let phonel = document.getElementById('phone').firstElementChild;alert(phonel.innerHTML)};//7.返回#bj的父节点var btn07Ele = document.getElementById("btn07");btn07Ele.onclick = function(){let pnode = document.getElementById('bj').parentNode;alert(pnode.innerHTML)};//8.返回#android的前一个兄弟节点var btn08Ele = document.getElementById("btn08");btn08Ele.onclick = function(){var andobj = document.getElementById('android');alert(andobj.previousSibling.innerHTML)};//9.读取#username的value属性值var btn09Ele = document.getElementById("btn09");btn09Ele.onclick = function(){var userobj = document.getElementById("username");alert(userobj.value)};//10.设置#username的value属性值var btn10Ele = document.getElementById("btn10");btn10Ele.onclick = function(){var userobj = document.getElementById("username");userobj.value='new value!'};//11.返回#bj的文本值var btn11Ele = document.getElementById("btn11");btn11Ele.onclick = function(){var bjobj = document.getElementById('bj');alert(bjobj.innerText)/***innerHTML:表示获取/设置起始标签和结束标签中的内容*innerText:表示获取/设置起始标签和结束标签中的文本*/};};
</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 type="radio" name="gender" value="male"/>Male<input 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>

05.DOM 查询练习-节点练习相关推荐

JavaScript基础12-day14【DOM查询(获取元素节点、获取元素节点的子节点)、全选练习、DOM增删改、DOM添加删除记录、Window对象方法】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
DOM基本知识及DOM查询
1. DOM概念 - DOM(Document Object Model)是文档对象模型,通过DOM可以来任意来修改网页中各个内容. 文档指的是网页,一个网页就是一个文档. 对象指将网页中的每一个节点 ...
js基础知识（二十五）--DOM查询的其他方法、获取元素的后代和子元素
一.DOM查询的其他方法在document提供了一些直接获取元素的方法 document.body获取到页面的body元素 document.documentElement获取页面html中的根元素 ...
JS中的DOM查询（2）,(parentNode、previousSibling、nextSibling)
获取父节点和兄弟节点· 通过具体的节点,调用以下三个属性来对父节点和兄弟节点进行操作. parentNode属性,获取当前节点的父节点. previousSibling属性,获取当前节点的前一个兄弟节 ...
JavaScript之DOM查询
获取元素节点:通过document对象调用 1.getElementById(): 通过id属性获取一个元素节点对象 2.getElementsByTagName(): 通过标签名获取一组元素节点对象 ...
查询XML节点 value
查询XML节点 value:通过nodes 指定到节点通过Value属性取出值 Declare @Xml xml set @Xml='<Employee><ID>1</I ...
认识DOM的三大节点：元素节点，文本节点，属性节点以及nodeName,nodeType,nodeValue的区别
既然我们把网页文档看做树形结构,那么就有对应的节点.诚然DOM中有三大节点,分别是元素节点,文本节点,属性节点元素节点:构成了DOM的基础.文档结构中,<html>是根元素,代表整个文档 ...
mybatis mysql查询树形结构_MyBatis collection 集合嵌套查询树形节点
原标题:MyBatis collection 集合嵌套查询树形节点 MyBatis collection 集合 MyBatis 是数据持久层框架,支持定制化 SQL.存储过程以及高级映射.尤其强大在于 ...
angular dom_Angular 8 DOM查询：ViewChild和ViewChildren示例
angular dom The @ViewChild and @ViewChildren decorators in Angular provide a way to access and manip ...

05.DOM 查询练习-节点练习

尾部附上整体代码！

innerHTML:表示获取/设置起始标签和结束标签中的内容【会包括标签】
innerText:表示获取/设置起始标签和结束标签中的文本【仅仅会留下文本】

innerHTML：

整体代码！

05.DOM 查询练习-节点练习相关推荐

最新文章

热门文章

05.DOM 查询练习-节点练习

尾部附上整体代码！

*innerHTML:表示获取/设置起始标签和结束标签中的内容【会包括标签】 *innerText:表示获取/设置起始标签和结束标签中的文本【仅仅会留下文本】

innerHTML：

整体代码！

05.DOM 查询练习-节点练习相关推荐

最新文章

热门文章

innerHTML:表示获取/设置起始标签和结束标签中的内容【会包括标签】
innerText:表示获取/设置起始标签和结束标签中的文本【仅仅会留下文本】