JavaScript的DOM

DOM

DOM：
- 查找元素：
- - 通过id查找元素：
  - 通过class查找元素：
  - 通过标签查找元素：
  - 通过name属性查找元素：
- 操作元素：
- - 操作内容：
  - 操作属性：
  - 操作样式：
- 事件：
- - 单击事件：
  - 页面加载事件：
  - 键盘事件：
  - - 案例：
  - 鼠标事件：
  - - 案例：
    - - 改进：
  - 焦点事件：
  - - 案例：
- 节点：
- - 操作节点：
  - 案例：
- 案例：
- - 计算器：
  - 二级联动：
  - - 优化：
  - 提交案例：
  - - 另一种：

DOM：

DOM：对事件做出反应

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

HTML DOM （文档对象模型）：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

查找元素：

注意：document表示该文档，就是dom树。

通过id查找元素：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><span id="span01">今天天气真好</span><br /><span>微风吹过林梢</span><script type="text/javascript">//通过id获取元素var span01 = document.getElementById("span01");//绑定单击事件span01.onclick = function(){//设置内容span01.innerHTML = "今日骄阳真好";}</script></body>
</html>

通过class查找元素：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><span class="myclass">今天天气真好</span><br /><span class="myclass">微风吹过林梢</span><script type="text/javascript">//通过class属性获取元素数组var span01 = document.getElementsByClassName("myclass")[0];//绑定单击事件span01.onclick = function(){//设置内容span01.innerHTML = "xxxx";}</script></body>
</html>

通过标签查找元素：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><span>今天天气真好</span><br /><span>微风吹过林梢</span><script type="text/javascript">//通过标签获取元素数组var span01 = document.getElementsByTagName("span")[0];//绑定单击事件span01.onclick = function(){//设置内容span01.innerHTML = "xxxx";}</script></body>
</html>

通过name属性查找元素：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">img{width: 100px;}</style></head><body><img name="xxx" src="../../img/花.jpg" /><img name="xxx" src="../../img/花.jpg" /><script type="text/javascript">//通过name属性获取元素数组var img = document.getElementsByName("xxx")[0];//绑定单击事件img.onclick = function(){//设置属性img.src = "../../img/花1.jpg";}</script></body>
</html>

操作元素：

操作内容：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><button onclick="fun01()">获取内容 - innerText</button><button onclick="fun02()">设置内容 - innerText</button><br /><span>彼时阳光正好</span><br /><button onclick="fun03()">获取内容 - innerHTML</button><button onclick="fun04()">设置内容 - innerHTML</button><br /><span>彼时阳光正好</span><script type="text/javascript">var span01 = document.getElementsByTagName("span")[0];var span02 = document.getElementsByTagName("span")[1];function fun01(){console.log(span01.innerText);}function fun02(){span01.innerText = "<h1>微风吹过林梢</h1>";}function fun03(){console.log(span02.innerHTML);}function fun04(){//把文本当做html标签设置span02.innerHTML = "<h1>微风吹过林梢</h1>";}</script></body>
</html>

操作属性：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><button onclick="fun01()">获取属性</button><button onclick="fun02()">设置属性</button><br /><img src="../../img/花1.jpg" width="100px" height="100px" /><br /><button onclick="fun03()">获取属性</button><button onclick="fun04()">设置属性</button><br /><img src="../../img/花1.jpg" width="100px" height="100px" /><script type="text/javascript">var img1 = document.getElementsByTagName("img")[0];var img2 = document.getElementsByTagName("img")[1];function fun01(){console.log(img1.src);console.log(img1.width);console.log(img1.height);}function fun02(){img1.src = "../../img/花.jpg";//不带单位img1.width = "200";img1.height = "200";}function fun03(){console.log(img2.getAttribute("src"));console.log(img2.getAttribute("width"));console.log(img2.getAttribute("height"));}function fun04(){img2.setAttribute("src","../../img/花.jpg");//带单位img2.setAttribute("width","100%");img2.setAttribute("height","100%");}</script></body>
</html>

操作样式：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><button onclick="fun01()">获取样式</button><button onclick="fun02()">设置样式</button><br /><span>彼时阳光正好</span><script type="text/javascript">var span = document.getElementsByTagName("span")[0]function fun01(){console.log(span.style.color);console.log(span.style.fontSize);}function fun02(){span.style.color = "red";span.style.fontSize = "50px";}</script></body>
</html>

事件：

单击事件：

单击事件：鼠标点击之后发生的事件。

onclick

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><h1 onclick="this.innerText='微风吹过林梢'">彼时阳光正好</h1></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><h1 onclick="fun01()">彼时阳光正好</h1><script type="text/javascript">var h1 = document.getElementsByTagName("h1")[0];function fun01(){h1.innerText = "微风吹过林梢";}</script></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><h1 onclick="fun01(this)">彼时阳光正好</h1><script type="text/javascript">function fun01(obj){obj.innerText = "微风吹过林梢";}</script></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><h1>彼时阳光正好</h1><script type="text/javascript">var h1 = document.getElementsByTagName("h1")[0];//绑定单击事件h1.onclick = function(){this.innerText = "微风吹过林梢";}</script></body>
</html>

页面加载事件：

页面加载事件：事件会在页面元素和图像加载完成后立即发生。

window.onload

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">//页面加载事件：事件会在页面元素和图像加载完成后立即发生window.onload = function(){var h1 = document.getElementsByTagName("h1")[0];h1.onclick = function(){this.innerText = "微风吹过林梢";}}</script></head><body><h1>彼时阳光正好</h1>		</body>
</html>

键盘事件：

键盘事件：onkeydown、onkeypress、onkeyup

onkeydown：键盘按下就执行。

onkeypress：键盘按下非功能键就执行。

onkeyup：键盘按下去并松开后执行。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="text" onkeydown="myDown()"onkeypress="myPress()"onkeyup="myUp()"/><script type="text/javascript">function myDown(){//键盘按下事件console.log("down");}function myPress(){//键盘按下事件 - 功能键(上下左右、删除键...)是不会被触发的。console.log("press");}function myUp(){//键盘松开事件console.log("up");}			</script></body>
</html>

案例：

需求：设置一个文本框，每敲一个字母，会触发将输入文本转换为大写的函数。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="text" onkeyup="myUp(this)"/><script type="text/javascript">function myUp(obj){//获取输入框的value属性var v = obj.value;//转大写v = v.toUpperCase();//设置value属性obj.value = v;}			</script></body>
</html>

鼠标事件：

onMouseDown —> 按下鼠标时触发。

onMouseUp--------> 按下鼠标松开鼠标时触发。

onMouseOver-----> 鼠标移入时触发。

onMouseOut-------> 鼠标移出时触发。

onMouseMove----> 鼠标移动时触发。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><img src="../../img/花.jpg" width="100px" height="100px"onmousedown="myDown()"  onmouseup="myUp()"  onmousemove="myMove()"onmouseover="myOver()"  onmouseout="myOut()"/><script type="text/javascript">function myDown(){//鼠标按下事件console.log("down");}function myUp(){//鼠标松开事件console.log("up");}function myMove(){//鼠标移动事件console.log("move");}function myOver(){//鼠标移入事件console.log("over");}function myOut(){//鼠标移出事件console.log("out");}</script></body>
</html>

案例：

需求：鼠标移动到哪个头像，哪个头像就高亮。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">img{width: 100px;height: 100px;opacity: 0.3;/*设置透明度为30%*/}</style></head><body><img src="../../img/touxiang01.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><img src="../../img/touxiang02.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><img src="../../img/touxiang03.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><img src="../../img/tx1.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><img src="../../img/tx2.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><img src="../../img/tx3.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><script type="text/javascript">function myOver(obj){//鼠标移入事件obj.style.opacity = 1;}function myOut(obj){//鼠标移出事件obj.style.opacity = 0.3;}</script></body>
</html>

改进：

简化代码，设置动态绑定事件。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">img{width: 100px;height: 100px;opacity: 0.3;/*设置透明度*/}</style></head><body><img src="../../img/touxiang01.jpg" /><img src="../../img/touxiang02.jpg" /><img src="../../img/touxiang03.jpg" /><img src="../../img/tx1.jpg" /><img src="../../img/tx2.jpg" /><img src="../../img/tx3.jpg" /><img src="../../img/花.jpg" /><script type="text/javascript">//动态绑定事件var imgArr = document.getElementsByTagName("img");for(var i = 0;i<imgArr.length;i++){var img = imgArr[i];img.onmouseover = function(){this.style.opacity = 1;}img.onmouseout = function(){this.style.opacity = 0.3;}}</script></body>
</html>

焦点事件：

焦点事件：onfocus、onblur。

onfocus：获取焦点事件。

onblur：失去焦点事件。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="text"  onfocus="myFocus()"  onblur="myBlur()"	/><script type="text/javascript">function myFocus(){//获取焦点事件console.log("focus");}function myBlur(){//失去焦点事件console.log("blur");}   </script></body>
</html>

案例：

在输入框中用 value 属性来实现 placeholder 属性的功能。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="text"value="请输入账号..."onfocus="myFocus(this)"onblur="myBlur(this)"	/><script type="text/javascript">function myFocus(obj){//获取焦点事件if(obj.value == "请输入账号..."){obj.value = "";}}function myBlur(obj){//失去焦点事件//判断浏览器是否兼容次方法if(obj.value.trim){if(obj.value.trim() == ""){obj.value = "请输入账号...";}}else{//注意：IE老版本是不支持trim()//将字符串的首尾空格的字符替换成空字符串，以达到去空格的目的if(obj.value.replace(/(^\s+)|(\s+$)/g,"") == ""){obj.value = "请输入账号...";}}}</script></body>
</html>

alert(obj.value.trim);

获取该函数里的代码，如果当前浏览器支持该函数，就返回函数里的代码（字符串），如果不支持就返回undefined

节点：

操作节点：

动态添加节点。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><button onclick="addP()">添加p标签</button><div id="manager"></div><script type="text/javascript">var manager = document.getElementById("manager");function addP(){//创建节点 - <p></p>var p = document.createElement("p");//创建文本内容 - 用良心做教育var text = document.createTextNode("用良心做教育");//将文本内容添加到节点里 - <p>用良心做教育</p>p.appendChild(text);//将节点添加到div中manager.appendChild(p);}</script></body>
</html>

动态添加节点和删除节点。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><button onclick="addImg()">添加img标签</button><button onclick="deleteImg()">删除img标签</button><div id="manager"></div><script type="text/javascript">var manager = document.getElementById("manager");function addImg(){//创建节点 - <img />var img = document.createElement("img");//设置属性img.setAttribute("src","../../img/tx2.jpg");img.setAttribute("width","100px");img.setAttribute("height","100px");//创建节点 - <br/>var br = document.createElement("br");//将节点添加到div中manager.appendChild(img);manager.appendChild(br);}function deleteImg(){//删除思路：由父节点删除子节点//查询需要删除的节点var img = document.getElementsByTagName("img")[0];var br = document.getElementsByTagName("br")[0];manager.removeChild(img);manager.removeChild(br);}</script></body>
</html>

案例：

点击删除按钮，删除该行。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><table border="1" width="300px"><tr><th>姓名</th><th>性别</th><th>年龄</th><th>操作</th></tr><tr><td>小红</td><td>女</td><td>27</td><td><button onclick="myDelete(this)">删除</button></td></tr><tr><td>小水</td><td>女</td><td>23</td><td><button onclick="myDelete(this)">删除</button></td></tr><tr><td>小惠</td><td>女</td><td>25</td><td><button onclick="myDelete(this)">删除</button></td></tr><tr><td>小香</td><td>女</td><td>24</td><td><button onclick="myDelete(this)">删除</button></td></tr></table><script type="text/javascript">function myDelete(obj){//parentNode：找父节点var tr = obj.parentNode.parentNode;var table = tr.parentNode;table.removeChild(tr);}</script></body>
</html>

案例：

计算器：

计算器

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="text" id="text01"/>+<input type="text" id="text02"/><button onclick="add()">=</button><input type="text" id="text03"/><script type="text/javascript">function add(){//获取到输入框的value是string类型//parseInt()将字符串转换为数字。var result = parseInt(text01.value) + parseInt(text02.value);text03.value = result;}</script></body>
</html>

二级联动：

二级联动：省变了，对应的市也会改变。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><select id="province"><option value="sc">四川</option><option value="hn">湖南</option><option value="hb">湖北</option></select>省<select id="city"><option>成都</option><option>绵阳</option><option>雅安</option><option>乐山</option><option>攀枝花</option></select>市<script type="text/javascript">//给省份绑定改变事件province.onchange = function(){if(this.value == "sc"){city.innerHTML = "<option>成都</option><option>绵阳</option><option>雅安</option><option>乐山</option><option>攀枝花</option>";}else if(this.value == "hn"){city.innerHTML = "<option>长沙</option><option>永州</option><option>娄底</option><option>益阳</option><option>张家界</option>";}else if(this.value == "hb"){city.innerHTML = "<option>武汉</option><option>黄冈</option><option>仙桃</option><option>咸宁</option><option>孝感</option>";}}</script></body>
</html>

优化：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><select id="province"><option value="sc">四川</option><option value="hn">湖南</option><option value="hb">湖北</option></select>省<select id="city"><option>成都</option><option>绵阳</option><option>雅安</option><option>乐山</option><option>攀枝花</option></select>市<script type="text/javascript">//给省份绑定改变事件province.onchange = function(){if(this.value == "sc"){updateCity(["成都","绵阳","雅安","乐山","攀枝花"]);}else if(this.value == "hn"){updateCity(["长沙","永州","娄底","益阳","张家界"]);}else if(this.value == "hb"){updateCity(["武汉","黄冈","仙桃","咸宁","孝感"]);}}function updateCity(arr){//清空city列表city.length = 0;for(var i = 0;i<arr.length;i++){var option = document.createElement("option");option.innerText = arr[i];city.appendChild(option);}}</script></body>
</html>

提交案例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">span{color: red;}</style></head><body><form id="registerForm" action="#" method="post">账户：<input type="text" id="username" /><span></span><br />密码：<input type="password" id="password" /><span></span><br />确认密码：<input type="password" id="repassword" /><span></span><br /><input type="submit" value="提交" /></form><script type="text/javascript">var span01 = document.getElementsByTagName("span")[0];var span02 = document.getElementsByTagName("span")[1];var span03 = document.getElementsByTagName("span")[2];//给表单绑定提交事件registerForm.onsubmit = function(){//每次提交时，清空提示span01.innerText = "";span02.innerText = "";span03.innerText = "";var bool = true;if(username.value.trim() == ""){span01.innerText = "账号不能为空";bool = false;}if(password.value.trim() == ""){span02.innerText = "密码不能为空";bool = false;}if(repassword.value.trim() == ""){span03.innerText = "确认密码不能为空";bool = false;}else if(repassword.value.trim() != password.value.trim()){span03.innerText = "确认密码与密码不一致";bool = false;}return bool;}</script></body>
</html>

另一种：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">span{color: red;}</style></head><body><form action="#" method="post" onsubmit="return fun01()">账户：<input type="text" id="username" /><span></span><br />密码：<input type="password" id="password" /><span></span><br />确认密码：<input type="password" id="repassword" /><span></span><br /><input type="submit" value="提交" /></form><script type="text/javascript">var span01 = document.getElementsByTagName("span")[0];var span02 = document.getElementsByTagName("span")[1];var span03 = document.getElementsByTagName("span")[2];function fun01(){span01.innerText = "";span02.innerText = "";span03.innerText = "";var bool = true;if(username.value.trim() == ""){span01.innerText = "账号不能为空";bool = false;}if(password.value.trim() == ""){span02.innerText = "密码不能为空";bool = false;}if(repassword.value.trim() == ""){span03.innerText = "确认密码不能为空";bool = false;}else if(repassword.value.trim() != password.value.trim()){span03.innerText = "确认密码与密码不一致";bool = false;}return bool;}</script></body>
</html>