94-----JS基础-----dom查询
一 代码
同样很简单，但是下面的接口会比较常用，用到时具体看一下即可。
主要是三个接口：
1）document.getElementById
2）document.getElementsByTagName
3）document.getElementsByName
下面调用以例子呈现。
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 Documenttitle><link rel="stylesheet" type="text/css" href="style/css.css" /><script type="text/javascript">window.onload = function(){//为id为btn01的按钮绑定一个单击响应函数var btn01 = document.getElementById("btn01");btn01.onclick = function(){// 1. 查找#bj节点var bj = document.getElementById("bj");//打印bj//innerHTML 通过这个属性可以获取到元素内部的html代码alert(bj.innerHTML);};//为id为btn02的按钮绑定一个单击响应函数var btn02 = document.getElementById("btn02");btn02.onclick = function(){// 2. 查找所有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(){// 3. 查找name=gender的所有节点var inputs = document.getElementsByName("gender");//alert(inputs.length);for(var i=0 ; i<inputs.length ; i++){/** 4. innerHTML用于获取元素内部的HTML代码的* 对于自结束标签，这个属性没有意义。自结束是指这种形式结束的，例如下面的gender的input节点。*///alert(inputs[i].innerHTML);/** 5. 如果需要读取元素节点属性，* 直接使用 元素.属性名* 例子：元素.id 元素.name 元素.value* 6. 注意：class属性不能采用这种方式，因为class是关键字，* 所以读取class属性时需要使用：元素.className*/alert(inputs[i].className);}};//查找#city下所有li节点//返回#city的所有子节点//返回#phone的第一个子节点//返回#bj的父节点//返回#android的前一个兄弟节点//读取#username的value属性值//设置#username的value属性值//返回#bj的文本值};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>IOSli><li id="android">Androidli><li>Windows Phoneli>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>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！