可信赖的扬中网站建设/媒体网络推广价格优惠
获取元素（标签）节点
以下都是通过document来调用，他们返回的都是元素节点对象
- getElementById()，通过id获取一个元素节点对象，id是唯一的。
- getElementsByTagName()，通过标签名获取一组元素节点对象。
- getElementByName()，通过name属性获取一组元素
注意：第一中方法返回的是一个节点，第二个和第三个方法返回的是数组。
实例代码和相应解释如下（还有几种查询未完善）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="css/dom.css" /><title>Document</title><script type="text/javascript">window.onload = function(){/* 返回# city的所有子节点返回#phone的第一个子节点返回#bj的父节点返回#android的前一个兄弟节点返回#username的value属性值设置#username的value属性值返回#bj的文本值*///1.查找#bj节点var btn01 = document.getElementById("btn01");btn01.onclick = function(){var bj = document.getElementById("bj"); alert(bj.innerHTML);};//2.查找所有li节点var btn02 = document.getElementById("btn02");btn02.onclick = function(){//这个方法会给我们返回一个类数组对象，所有查询到的元素都会被封装到这个对象中//即使查询到的元素只有一个，也会封装到数组中返回var lis = document.getElementsByTagName("li");// alert(lis.length);//遍历lisfor(var i = 0; i < lis.length; i++){console.log(lis[i].innerHTML);}};//3.查找name=gender的所有节点var btn03 = document.getElementById( "btn03");//为id为btn3的按钮绑定一个单击响应函数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属性不能使用这种方式 ，读取calss时，需要使用：className来 代替class*/console.log(inputs[i].className);//想读什么就填相应的属性名}};//4.查找#city下所有li节点var btn04 = document.getElementById("btn04");btn04.onclick = function(){var city = document.getElementById("city");var lic = document.getElementsByTagName("li");};};</script></head>
<body><div class="zong"><div class="zong1"><div class="one"><p>你喜欢哪个省市？</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul><p>你喜欢哪款游戏？</p><ul><li>红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><p>你手机的操作系统是？</p><ul><li>IOS</li><li>Android</li><li>Windows Phone</li></ul></div><div class="two"><p>gender:Male<input class="xingbie" type="radio" name="gender">feMale<input class="xingbie" type="radio" name="gender" /></p></div></div></div><div class="zong2"><div class="three"><button id="btn01">查找#bj节点</button><button id="btn02">查找所有li节点</button><button id="btn03">查找name = gender的所有节点</button><button id="btn04">查找#city下所有li节点</button><button id="btn05">返回#city的所有子节点</button><button id="btn06">返回#phone的第一个子节点</button><button id="btn07">返回#bj的父节点</button><button id="btn08">返回#android的前一个兄弟节点</button><button id="btn09">返回#username的value属性值</button><button id="btn10">设置#username的value展性值</button><button id="btn11">返回#bj的文本值</button></div></div></body>
</html>