一、DOM简介
现在的DOM这一套是非常标准的
什么叫文档
你想操作一个文档，就得先把文档封装成对象
现在的DOM这一套是非常标准的，描述得比较拗口，自己领悟一下
很多事情其实都有一个标准，比方说我们中国人吃饭夹菜，用筷子，你用手也不是不行对吧，但是标准是用筷子
这就是标准的意义
我们要尽量去符合标准，否则就会恶心到别人，比如说一起吃饭，大家都用筷子，你用手，想想是不是很尴尬
举个例子：
DOM操作
简介：Document Object Model文档对象模型
节点：
文档节点：document
元素节点：element
文本节点：text
属性节点：attribute
二、DOM查询
DOM查询主要分为这么几个维度来分析：基于整个文档查找元素、基于元素节点查找元素
基于整个文档查找元素
- getElementById()
- getElementsByTagName()
- getElementsByName()
如何快速定位代码
模板代码，可以自己练习
<!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(){
/*
DOM操作
* 简介：Document Object Model文档对象模型
* 节点
* 文档节点：document
* 元素节点：element
* 文本节点：text
* 属性节点：attribute
* dom查询
* 基于整个文档查询
1. getElementById():通过id查询
2. getElementsByTagName()：通过标签名查询
3. getElementsByName()：通过name值查询
*/
//1.查找#bj节点
var btnEle = document.getElementById("btn01");
btnEle.onclick = function(){
var bjEle = document.getElementById("bj");
alert(bjEle.innerText);
}
//2.查找所有li节点
var btnEle02 = document.getElementById("btn02");
btnEle02.onclick = function(){
var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
};
//3.查找name=gender的所有节点
var btnEle03 = document.getElementById("btn03");
btnEle03.onclick = function(){
var gds = document.getElementsByName("gender");
for(var i=0;i<gds.length;i++){
alert(gds[i].value);
}
};
//4.查找#city下所有li节点
var btnEle04 = document.getElementById("btn04");
btnEle04.onclick = function(){
var cityEle = document.getElementById("city");
var lis = cityEle.getElementsByTagName("li");
alert(lis.length);
};
//5.返回#city的所有子节点
var btnEle05 = document.getElementById("btn05");
btnEle05.onclick = function(){
var cityEle = document.getElementById("city");
var cs = cityEle.childNodes;
//注意：ie版本<=8时，四个子节点。ie版本>=9时，9个子节点
alert(cs.length);
};
//6.返回#phone的第一个子节点
var btnEle06 = document.getElementById("btn06");
btnEle06.onclick = function(){
var phoneEle = document.getElementById("phone");
var fc = phoneEle.firstChild;
alert(fc.innerText);
};
//7.返回#bj的父节点
var btnEle07 = document.getElementById("btn07");
btnEle07.onclick = function(){
var bjEle = document.getElementById("bj");
var pn = bjEle.parentNode;
alert(pn.innerHTML);
// alert(pn.innerText);
};
//8.返回#android的前一个兄弟节点
var btnEle08 = document.getElementById("btn08");
btnEle08.onclick = function(){
var adEle = document.getElementById("android");
var psEle = adEle.previousSibling;
alert(psEle.innerText);
};
//9.读取#username的value属性值
var btnEle09 = document.getElementById("btn09");
btnEle09.onclick = function(){
var userNameEle = document.getElementById("username");
var ut = userNameEle.value
alert(ut);
};
//10.设置#username的value属性值
var btnEle10 = document.getElementById("btn10");
btnEle10.onclick = function(){
var userNameEle = document.getElementById("username");
userNameEle.value = "123456";
};
//11.返回#bj的文本值
var btnEle11 = document.getElementById("btn11");
btnEle11.onclick = function(){
var bjEle = document.getElementById("bj");
// alert(bjEle.innerHTML);
var nv = bjEle.firstChild.nodeValue;
alert(nv);
};
};
</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>
.css文件
@CHARSET "UTF-8";
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
button {
width: 300px;
margin-bottom: 10px;
}
#btnList {
float:left;
}
#total{
width: 450px;
float:left;
}
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.inner li{
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float:left;
}
.inner{
width:400px;
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
padding: 10px;
float: left;
}
基于元素节点查找元素
* 子元素
* childNodes:所有子节点
* firstChild:
* lastChild:
* getElementsByTagName()
* 父元素
* parentNode
* 兄弟元素
* previousSibling：前
* nextSibling后
4个节点，根据例子3，遍历一下即可
但是浏览确实弹出9，为什么呢？
我们再用IE浏览器看看
为什么会是9，因为严谨来看，确实是9
这个回车虽然是空白，但是也属于节点
所以5个回车+4个节点 总共是9个
6、返回#phone的第一个子节点，一样的存在兼容性问题
此时，我们也可以去跟innerHTML做一下对比
innerText只识别文本；innerHTML不仅识别文本还识别标签
8、
为什么是undefined，还是因为空格导致的兼容性问题，我们可以用IE8来调试
9是取值，10我们来赋值
11题有另外一种解法
先获取父节点，再找父节点的第一个子节点，然后再获取文本节点的节点值
HTML DOM firstChild 属性：返回文档的首个子节点
这种写法项目中会遇到，但是第一种写法更简单，对于我这种懒人肯定还是选第一种，只是第二种也要会，至少要看得懂
注意
1、innerText只识别文本；innerHTML不仅识别文本还识别标签
2、 js操作文本的三种容易混淆或者用错的方式
.innerText
.innerHTML
.value
3、getElementsByTagName() 和 getElementsByName()，注意比getElementById()多了一个s
4、上面的例子直接看不好理解，将代码复制到项目中，把答案删掉，边敲边理解，或者边敲边看答案边理解，这样就很容易理解了
5、HTML DOM firstChild 属性：返回文档的首个子节点
扫一扫
1176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
