DOM查询操作一览表（有事看一看，没事动手练一练）
目录
- 1.关于DOM，应该知道的
- 2.DOM节点
- 3.DOM查询
- 4.DOM查询操作一览表（以实例取代理论表达）
- 4.1.获取一个h2标签元素
- 4.2.获取所有的h2标签元素
- 4.3.获取所有name=gender的标签
- 4.4.查询#os下的所有input节点
- 4.5.查询#os下的所有子节点
- 4.6.查询#os下的第一个子节点
- 4.7.返回#bj的父节点
- 4.8.返回#android的前一个兄弟节点
- 4.9.返回#android的value值
- 4.10.设置#android的value值
- 4.11.返回#bj的文本值
- 5.程序展示
- 5.1.Javascript部分
- 5.2.HTML部分
1.关于DOM，应该知道的
document object model 文件对象模型
定义了访问和处理html文档的标准方法。
Html文档中的所有内容都是节点。
- 整个文档是一个文档节点
- 每个html元素是元素节点
- html元素内的文本是文本节点
- 每个html属性是属性节点
- 注释是注释节点
2.DOM节点
节点构成了HTML文档的最基本单元。
分四类：
- 文档节点 Document 整个html文档
- 元素节点 Element html标签
- 文本节点 Text html 标签的文本内容
- 属性节点 Attribute 元素属性
3.DOM查询
-
根据元素Id查询：
document.getElementById(“id值”);
-
根据标签名称查询：
document.getElementsByTagName(“标签名称”);
-
根据name属性：
document.getElementByName(“name值”);
4.DOM查询操作一览表（以实例取代理论表达）
4.1.获取一个h2标签元素
var btn01 = document.getElementById("btn_1");
btn01.onclick = function(){
var h2 = document.getElementById("h2");
alert(h2.innerText);
}
4.2.获取所有的h2标签元素
var btn02 = document.getElementById("btn_2");
btn02.onclick = function(){
var input = document.getElementsByTagName("h5");
alert(input.length);
}
4.3.获取所有name=gender的标签
var btn03 = document.getElementById("btn_3");
btn03.onclick = function(){
var namegender = document.getElementsByName("gender");
for(var i = 0;i4.4.查询#os下的所有input节点
var btn04 = document.getElementById("btn_4");
btn04.onclick = function(){
var os_input = document.getElementById("os");
var input = os_input.getElementsByTagName("input");
for(var i = 0;i4.5.查询#os下的所有子节点
var btn05 = document.getElementById("btn_5");
btn05.onclick = function(){
var os = document.getElementById("os");
var os_children = os.childNodes;
//注意：ie版本<=8，所有子节点是3个，>=9时，是
alert(os_children.length);
}
4.6.查询#os下的第一个子节点
var btn06 = document.getElementById("btn_6");
btn06.onclick = function()
{
var osfirst = document.getElementById("os");
var os_first_child = osfirst.firstChild;
alert(os_first_child.value);
}
4.7.返回#bj的父节点
var btn07 = document.getElementById("btn_7");
btn07.onclick = function(){
var os = document.getElementById("bj");
var fatherN = os.parentNode;
alert(fatherN);
}
4.8.返回#android的前一个兄弟节点
var btn08 = document.getElementById("btn_8");
btn08.onclick = function(){
var android = document.getElementById("android");
var upNode = android.previousSibling;
alert(upNode.value);
}
4.9.返回#android的value值
var btn09 = document.getElementById("btn_9");
btn09.onclick =function(){
var valuename = document.getElementById("android");
alert(valuename.value);
}
4.10.设置#android的value值
var btn10 = document.getElementById("btn_10");
btn10.onclick = function(){
var settext = document.getElementById("android");
settext.value = "123";
alert(settext.value);
}
4.11.返回#bj的文本值
var btn11= document.getElementById("btn_11");
btn11.onclick = function(){
var showText = document.getElementById("sz");
//第一种表达方式：常用alert(showText.innerHTML);
//第二种表达方式：不常用
/*
获取文本值三部曲：
1. 获取文本节点的父节点
2.获取父节点的第一个子节点 parentEle.firstChild
3.获取文本节点的节点值 parentEle.firstChild.nodeValue
*/
var nodevalue = showText.firstChild.nodeValue;
alert(nodevalue);
}
处于一定的必要性，我把完整代码放在这里：
5.程序展示
5.1.Javascript部分
此文件名为 dom.js
window.onload = function(){
var btn01 = document.getElementById("btn_1");
btn01.onclick = function(){
var h2 = document.getElementById("h2");
alert(h2.innerText);
}
var btn02 = document.getElementById("btn_2");
btn02.onclick = function(){
var input = document.getElementsByTagName("h5");
alert(input.length);
}
var btn03 = document.getElementById("btn_3");
btn03.onclick = function(){
var namegender = document.getElementsByName("gender");
for(var i = 0;i=9时，是
alert(os_children.length);
}
var btn06 = document.getElementById("btn_6");
btn06.onclick = function()
{
var osfirst = document.getElementById("os");
var os_first_child = osfirst.firstChild;
alert(os_first_child.value);
}
var btn07 = document.getElementById("btn_7");
btn07.onclick = function(){
var os = document.getElementById("bj");
var fatherN = os.parentNode;
alert(fatherN);
}
var btn08 = document.getElementById("btn_8");
btn08.onclick = function(){
var android = document.getElementById("android");
var upNode = android.previousSibling;
alert(upNode.value);
}
var btn09 = document.getElementById("btn_9");
btn09.onclick =function(){
var valuename = document.getElementById("android");
alert(valuename.value);
}
var btn10 = document.getElementById("btn_10");
btn10.onclick = function(){
var settext = document.getElementById("android");
settext.value = "123";
alert(settext.value);
}
var btn11= document.getElementById("btn_11");
btn11.onclick = function(){
var showText = document.getElementById("sz");
//第一种表达方式：常用alert(showText.innerHTML);
//第二种表达方式：不常用
/*
获取文本值三部曲：
1. 获取文本节点的父节点
2.获取父节点的第一个子节点 parentEle.firstChild
3.获取文本节点的节点值 parentEle.firstChild.nodeValue
*/
var nodevalue = showText.firstChild.nodeValue;
alert(nodevalue);
}
}
}
5.2.HTML部分
DOM操作
你喜欢哪个城市？
你喜欢哪款单机游戏？
大家一起玩网游！！！
你手机的操作系统是？
性别：男 女
姓名：
你好，世界
- 北京
- 深圳
操作栏