网站导航
> 文章列表 > JAVAWeb04-DOM

JAVAWeb04-DOM

网友: 文章列表 2024-03-21 18:37:40

JAVAWeb04-DOM

1. DOM

1.1 概述

1.1.1 官方文档

地址: https://www.w3school.com.cn/js/js_htmldom.asp

1.1.2 DOM 介绍

  1. DOM 全称是 Document Object Model 文档对象模型
  2. 就是把文档中的标签，属性，文本，转换成为对象来管理

JAVAWeb04-DOM

1.2 HTML DOM（文档对象模型）

  1. 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
  2. HTML DOM 树 对象[属性，方法/函数]

JAVAWeb04-DOM

1.3 document 对象

1.3.1 document 说明

  1. document 它管理了所有的 HTML 文档内容
  2. document 它是一种树结构的文档。
  3. 有层级关系 在 dom 中把所有的标签 都 对象化 （得到这个 html 标签的—>对象–>操作）
  4. 通过 document 可以访问所有的标签对象

1.3.2 doucment 对象方法一览

JAVAWeb04-DOM
文档地址: https://www.w3school.com.cn/js/js_htmldom_document.asp

1.3.3 应用实例

应 用 实 例 1:
点 击 hello world， 弹 出 窗 口 获 内 容
创 建 getElementById.html
JAVAWeb04-DOM

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>getElementById的使用</title><!--1. 先得到 h1 的 dom对象, 通过 id 获取2. 对h1对应的dom对象操作即可--><script type="text/javascript">// function getValue() {//定义函数//     //myHeader 就是dom对象//     var myHeader = document.getElementById("myHeader");//     //alert(myHeader);//HTMLHeadingElement//     //解读 myHeader.innerText 获取到 myHeader的包含的文本//     //看看 innerText , innerHTML//     alert(myHeader.innerText);//文本 hello world//     alert(myHeader.innerHTML);//html <div>hello world</div>// }//动态绑定,讲过老师，前面老师讲的 js事件章节//为了让小伙伴，听得明白一点，快速演示->回去看js事件window.onload = function () {//1. 获取 myHeader的dom对象var myHeader = document.getElementById("myHeader");//2. 给myHeader绑定 onclick的事件myHeader.onclick = function () {alert("动态绑定 内容是= " + myHeader.innerText);}}//理解了基本原理，其它的问题就是API层级</script>
</head>
<body>
<!-- 静态绑定一个点击事件 -->
<!--<h1 id="myHeader" οnclick="调用函数（）"><div>hello world</div></h1>--><h1 id="myHeader"><div>hello world</div></h1>
<p>Click on the header to alert its value</p>
</body>
</html>

应用实例 2：
应 用 实 例 : 完 成 多 选 框 案 例
JAVAWeb04-DOM
getElementsByName.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>getElementsByName 函数</title><script type="text/javascript">//完成全选function selectAll() {//1.获取到 sport 这一组复选框var sports = document.getElementsByName("sport");//sports 是什么? 是nodeList 即时一个集合//alert(sports);//2. 拿到[dom ,集合]，操作【属性和方法api】泥瓦匠|工程师 清华//   遍历 sports， 修改for (var i = 0; i < sports.length; i++) {sports[i].checked = true;//选中}}//全不选function selectNone() {//1.获取到 sport 这一组复选框var sports = document.getElementsByName("sport");//sports 是什么? 是nodeList 即时一个集合//alert(sports);//2. 拿到[dom ,集合]，操作【属性和方法api】//不要只做泥瓦匠，培养工程师思维 清华 ---》要培养架构思维//   遍历 sports， 修改for (var i = 0; i < sports.length; i++) {sports[i].checked = false;//全部不选中}}//反选 selectReversefunction selectReverse() {//1.获取到 sport 这一组复选框var sports = document.getElementsByName("sport");//2. 拿到[dom ,集合]，操作【属性和方法api】泥瓦匠|工程师 清华 要培养架构思维//   遍历 sports， 修改for (var i = 0; i < sports.length; i++) {// if(sports[i].checked) {//js true//     sports[i].checked = false;// } else {//     sports[i].checked = true;//选中// }sports[i].checked = !sports[i].checked;}}</script>
</head>
<body>
你会的运动项目：
<input type="checkbox" name="sport" value="zq" checked="checked">足球
<input type="checkbox" name="sport" value="tq">台球
<input type="checkbox" name="sport" value="ppq">乒乓球 <br/><br/>
<button onclick="selectAll()">全选</button>
<button onclick="selectNone()">全不选</button>
<button onclick="selectReverse()">反选</button>
</body>
</html>

应用实例 3：
完 成 图 片 切 换 案 例
JAVAWeb04-DOM

提醒：为看到效果，请把图片放在相应的位置.
getElementsByTagName.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>getElementsByTagName</title><script type="text/javascript">function changeImgs() {//1. 得到所有的imgvar imgs = document.getElementsByTagName("img");//老师说 imgs 是 HTMLCollectionsalert("猫猫的数量是=" + imgs.length);//2. 修改src,遍历修改for (var i = 0; i < imgs.length; i++) {imgs[i].src = "./img/" + (i+4) +".png";}}//3课后作业->再评讲//思路//(1) input 增加id, 可以修改value//(2) 根据input 的 value值来决定是切换猫还是狗 if -- else if ---//(3) 其它自己先思考function changeImgs(){var input = document.getElementById("in")var catImg = ['./img/1.png','./img/2.png','./img/3.png']var dogImg = ['./img/4.png','./img/5.png','./img/6.png']if(input.value == "查看多少小猫,并切换成小狗"){var arr = document.getElementsByTagName("img")for(i=0;i<arr.length;i++){arr[i].src= dogImg[i];}}else{var arr = document.getElementsByTagName("img")for(i=0;i<arr.length;i++){arr[i].src= catImg[i];}}}		function changeVal(){var input = document.getElementById("in")if(input.value == "查看多少小猫,并切换成小狗"){input.value = "查看多少小狗,并切换成小猫"}else{input.value = "查看多少小猫,并切换成小狗"}}</script>
</head>
<body>
<img src="./img/1.png" height="100">
<img src="./img/2.png" height="100">
<img src="./img/3.png" height="100">
<br/>
<input type="button" onclick="changeImgs()" value="查看多少小猫,并切换成小狗" id="in"/>
<br />
<button id="btn" onclick="changeVal()">点我改变切换内容</button>
</body>
</html>

应用实例 4：
添 加 小 猫 图 片 案 例
JAVAWeb04-DOM

提醒：为看到效果，请把图片放在相应的位置.
createElement.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>createElement</title><script type="text/javascript">function addImg() {//创建一只小猫 图片，展示在页面//1. 创建一只小猫 图片 img,拿到对象好办->ssm -> springboot -> vuevar img = document.createElement("img");//alert(img);//?img.src = "./img/1.png";img.width = "100";//2. 展示, 添加到 doucment.bodydocument.body.appendChild(img);}</script>
</head>
<body>
<input type="button" onclick="addImg()"value="点击创建一只小猫~"/>
</body>
</html>

1.4 HTML DOM 节点

1.4.1 基本介绍

在 HTML DOM （文档对象模型）中，每个部分都是节点：

  1. 文档本身是文档节点
  2. 所有 HTML 元素是元素节点
  3. 所有 HTML 属性是属性节点
  4. HTML 元素内的文本是文本节点
  5. 注释是注释节点

1.4.2 节点属性和方法一览

1.HTML DOM Element 对象文档地址: https://www.w3school.com.cn/jsref/dom_obj_all.asp
2.HTML DOM Document 对象文档地址: https://www.w3school.com.cn/jsref/dom_obj_document.asp

1.4.3 节点常用方法

  1. 通过具体的元素节点调用 getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点
  2. appendChild( oChildNode ) 方法，可以添加一个子节点，oChildNode 是要添加的孩子节点

1.4.4 节点常用属性

  1. childNodes 属性，获取当前节点的所有子节点
  2. firstChild 属性，获取当前节点的第一个子节点
  3. lastChild 属性，获取当前节点的最后一个子节点
  4. parentNode 属性，获取当前节点的父节点
  5. nextSibling 属性，获取当前节点的下一个节点 (后一个)
  6. previousSibling 属性，获取当前节点的上一个节点 (前一个)
  7. className 用于获取或设置标签的 class 属性值
  8. innerHTML 属性，表示获取/设置起始标签和结束标签中的内容
  9. innerText 属性，表示获取/设置起始标签和结束标签中的文本

1.4.5 应用实例

需求: 完成以下功能(如图), 点击右侧的按钮，可以得到对应的节点
html-dom.html
JAVAWeb04-DOM

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>演示HTML DOM 相关方法</title><link rel="stylesheet" type="text/css" href="style/css.css"/><script type="text/javascript">//老师使用动态注册/绑定来演示window.onload = function () {// 先获取btn01的domvar btn01 = document.getElementById("btn01");btn01.onclick = function () {// 查找id=java节点var java = document.getElementById("java");alert("java节点文本=" + java.innerText);}// 查找所有option节点 小技巧: ctrl+home 直接到页面最上面 ctrl + end 页面最下var btn02 = document.getElementById("btn02");btn02.onclick = function () {//查找所有option节点//老师梳理(id-->getElementById name-->getElementsByName 元素标签名->getElementsByTagName()var options = document.getElementsByTagName("option");alert(options); // object HtmlCollectionfor (var i = 0; i < options.length; i++) {alert("值= " + options[i].innerText);}}//查找name=sport的节点var btn03 = document.getElementById("btn03");btn03.onclick = function () {var sports = document.getElementsByName("sport");//NodeListfor (var i = 0; i < sports.length; i++) {//过滤if (sports[i].checked) {alert("运动是= " + sports[i].value);}}}//查找id=language 下所有li节点var btn04 = document.getElementById("btn04");btn04.onclick = function () {var lis = document.getElementById("language").getElementsByTagName("li");for (var i = 0; i < lis.length; i++) {alert(lis[i].innerText);//<li>xxx</li> <input value="xx"/>}}//返回id=sel01 的所有子节点[3种方法]var btn05 = document.getElementById("btn05");btn05.onclick = function () {//var options = document.getElementById("sel01").getElementsByTagName("option");//alert(document.getElementById("sel01").childNodes.length);//11=>object text//解读//1. 如果使用 document.getElementById("sel01").childNodes 获取的是object text 和 object htmloptionelement//2. 如果不希望得到text 对象，需要将所有的内容放在一行var childNodes = document.getElementById("sel01").childNodes;for (var i = 0; i < childNodes.length; i++) {if (childNodes[i].selected) {alert(i + " " + childNodes[i].innerText);}}alert("======================================================")//还有一个以前方法//解读//1. sel01 是 HtmlSelectElement => 本身就有集合特点var sel01 = document.getElementById("sel01");for (var i = 0; i < sel01.length; i++) {alert(sel01[i].innerText);}}//返回id=sel01 的第一个子节点var btn06 = document.getElementById("btn06");btn06.onclick = function () {//除了上面的方法外，还可以直接使用属性firstChildvar sel01 = document.getElementById("sel01");alert("xx=" + sel01.firstChild);//老师解读是按照 .childNodes 得到第一个子节点 //object textalert("yy=" + sel01[0]);//直接是得到第一个option节点 object htmloptionelement}//返回id=java 的父节点var btn07 = document.getElementById("btn07");btn07.onclick = function () {var java = document.getElementById("java");//alert(java.parentNode);// object HtmlUListElement.//alert(java.parentNode.innerHTML);////alert(java.parentNode.childNodes.length);//4var childNodes = java.parentNode.childNodes;for (var i = 0; i < childNodes.length; i++) {alert("语言= " + childNodes[i].innerText);//java php,c++ py,}}//返回id=ct 的前后兄弟节点var btn08 = document.getElementById("btn08");btn08.onclick = function () {//yydsvar ct = document.getElementById("ct");alert(ct.previousSibling.innerText);//object text , 输出undefinedalert(ct.previousSibling.previousSibling.innerText);//object htmloptionelement,艳红alert(ct.nextSibling.innerText);//object text, 输出undefinedalert(ct.nextSibling.nextSibling.innerText); //object HtmlOptionElement, 输出春花}//设置#person的文本域var btn10 = document.getElementById("btn10");btn10.onclick = function () {var person = document.getElementById("person");person.innerText = "这是我们最新的介绍";}}</script>
</head>
<body>
<div id="total"><div class="inner"><P>你会的运动项目：</P><input type="checkbox" name="sport" value="zq" checked="checked">足球<input type="checkbox" name="sport" value="tq">台球<input type="checkbox" name="sport" value="ppq">乒乓球 <br/><hr/><P>你当前女友是谁：</P><select id="sel01"><option>---女友---</option><option>艳红</option><option id="ct" value="春桃菇凉">春桃</option><option>春花</option><option>桃红</option></select><hr/><p>你的编程语言?</p><ul id="language"><li id="java">Java~~~</li><li>PHP</li><li>C++</li><li>Python</li></ul><br><br><hr/><p>个人介绍:</p><textarea name="person" id="person">个人介绍</textarea></div></div>
<div id="btnList"><div><button id="btn01">查找id=java节点</button></div><div><button id="btn02">查找所有option节点</button></div><div><button id="btn03">查找name=sport的节点</button></div><div><button id="btn04">查找id=language 下所有li节点</button></div><div><button id="btn05">返回id=sel01 的所有子节点</button></div><div><button id="btn06">返回id=sel01 的第一个子节点</button></div><div><button id="btn07">返回id=java 的父节点</button></div><div><button id="btn08">返回id=ct 的前后兄弟节点</button></div><div><button id="btn09">读取id=ct 的 value 属性值</button></div><div><button id="btn10">设置#person的文本域</button></div>
</div>
</body>
</html>
网络标签：

相关问题