JavaScript之DOM查询

获取元素节点:通过document对象调用

1.getElementById():
通过id属性获取一个元素节点对象

2.getElementsByTagName():
通过标签名获取一组元素节点对象
可以用于获取当前节点下的指定标签名的所有子节点

3.getElementsByName()
通过name属性获取一组元素节点对象

Demo:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>DOM查询</title><link rel="stylesheet" href="../css/css.css"><script>window.onload = function () {var btn01 = document.getElementById('btn01');btn01.onclick = function () {//查找bj节点var bjEle = document.getElementById('bj');//innerText属性:获取元素内部的文本内容var text = bjEle.innerText;console.log(text);//innerHTML属性:获取元素内部的html代码var h = bjEle.innerHTML;console.log(h);}//查找所有li节点:var btn02 = document.getElementById('btn02');btn02.onclick = function () {// debugger;var liCollection = document.getElementsByTagName('li'); //返回的是li元素集合var len = liCollection.length;for (var i = 0; i < len; i++) { //循环遍历console.log(liCollection[i].innerHTML);}}//查找name=gender的所有节点var btn03 = document.getElementById('btn03');btn03.onclick = function () {//  debugger;var genderCollection = document.getElementsByName('gender');for (var i = 0; i < genderCollection.length; i++) {console.log(genderCollection[i].getAttribute('value'));}}//查找#city下所有li节点var btn04 = document.getElementById('btn04');btn04.onclick = function () {// debugger;var cityElement = document.getElementById('city');// var childNodes=cityElement.childNodes;//获取当前节点下的所有子节点            //getElementsByTagName():可以获取当前节点下的指定标签名的所有子节点var liCollection = cityElement.getElementsByTagName('li');for (var i = 0; i < liCollection.length; i++) {console.log(liCollection[i].innerHTML);}}//查找#city下所有子节点var btn05 = document.getElementById('btn05');btn05.onclick = function () {//  debugger;var cityNode = document.getElementById('city');var nodeList = cityNode.childNodes;var len = nodeList.length;for (var i = 0; i < len; i++) {console.log(nodeList[i].innerHTML);// console.log(nodeList[i].nodeName); //获取节点的名称}}//返回#phone的第一个子节点var btn06 = document.getElementById('btn06');btn06.onclick = function () {debugger;var phoneElement = document.getElementById('phone');var firstChildNode = phoneElement.firstChild;if (firstChildNode != null) {console.log(firstChildNode.innerText);}}//返回#bj的父节点var btn07=document.getElementById('btn07');btn07.onclick=function(){//  debugger;var bjLiNode=document.getElementById('bj');var bjParentNode=bjLiNode.parentNode;alert(bjParentNode.innerText);}//返回#android的前一个兄弟节点(元素节点或者文本节点)var btn08=document.getElementById('btn08');btn08.onclick=function(){//    debugger;var androidNode=document.getElementById('android');var previousSiblingNode= androidNode.previousSibling;//前一个兄弟节点(元素节点或者文本节点)//前一个兄弟元素节点,IE8以及以下版本不支持//    var previousSiblingNode=androidNode.previousElementSibling;alert(previousSiblingNode.innerHTML);}//返回#username的value属性值var btn09=document.getElementById('btn09');btn09.onclick=function(){var usernameInput=document.getElementById('username');/*读取元素的属性值:方式一:使用元素的getAttribute(attributeName)方法获取指定的属性值方式二:元素对象.属性名*/// var val= usernameInput.getAttribute('value');//使用点语法快捷键读取属性值var val=usernameInput.value;console.log("val:"+val);//获取class 值var usernameInputClassName=usernameInput.className;console.log("usernameInputClassName:"+usernameInputClassName);}//设置#username的value属性值var btn10=document.getElementById('btn10');btn10.onclick=function(){// debugger;var usernameInput=document.getElementById('username');/*setAttribute(name,value):name:设置属性名value:设置属性值必须都要以字符串的形式进行传递*/usernameInput.setAttribute('value','testUserName');var attributeVal=usernameInput.getAttribute('value');}//获取#bj文本内容var btn11=document.getElementById('btn11');btn11.onclick=function(){var bjNode=document.getElementById('bj');// alert(bjNode.innerHTML);// alert(bjNode.innerText);// alert(bjNode.firstChild.textContent);//获取文本节点的文本内容}}</script>
</head><body><div id="total"><div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj"><span>北京</span></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" class="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>

JavaScript之DOM查询相关推荐

【JavaScript】DOM查询（子节点、父节点、兄弟节点）源码详解
JavaScript基础12-day14【DOM查询(获取元素节点、获取元素节点的子节点)、全选练习、DOM增删改、DOM添加删除记录、Window对象方法】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
05.DOM 查询练习-节点练习
尾部附上整体代码! 1, //1.查找#bj节点document.getElementById('btn01').onclick = function () {var biObj = document ...
深入理解JavaScript系列（23）：JavaScript与DOM（上）——也适用于新手
文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API. Javascript和 ...
Javascript操作DOM常用API总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念在讲解操作DOM的api之前, ...
【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
在JavaScript中解析查询字符串[重复]
本文翻译自:Parse query string in JavaScript [duplicate] Possible Duplicate: 可能重复: How can I get query str ...
DOM基本知识及DOM查询
1. DOM概念 - DOM(Document Object Model)是文档对象模型,通过DOM可以来任意来修改网页中各个内容. 文档指的是网页,一个网页就是一个文档. 对象指将网页中的每一个节点 ...
JavaScript的DOM知识点总结
目录 1.DOM重点核心 2.DOM事件流 3.DOM知识点总结 4.常见案例视频资料,pink老师讲的超级详细,JavaScript的DOM操作:黑马程序员JavaScript核心教程,前端基础教 ...

JavaScript之DOM查询

JavaScript之DOM查询相关推荐

最新文章

热门文章