云指网站开发,自己的网站怎么做app吗,福州云建站,国家开发投资集团有限公司1. DOM
1.1 概述
1.1.1 官方文档
地址: https://www.w3school.com.cn/js/js_htmldom.asp
1.1.2 DOM 介绍
DOM 全称是 Document Object Model 文档对象模型就是把文档中的标签#xff0c;属性#xff0c;文本#xff0c;转换成为对象来管理 1.2 HTML DOM#xff08;文档…1. DOM
1.1 概述
1.1.1 官方文档
地址: https://www.w3school.com.cn/js/js_htmldom.asp
1.1.2 DOM 介绍
DOM 全称是 Document Object Model 文档对象模型就是把文档中的标签属性文本转换成为对象来管理 1.2 HTML DOM文档对象模型
当网页被加载时浏览器会创建页面的文档对象模型Document Object Model。HTML DOM 树 对象[属性方法/函数] 1.3 document 对象
1.3.1 document 说明
document 它管理了所有的 HTML 文档内容document 它是一种树结构的文档。有层级关系 在 dom 中把所有的标签 都 对象化 得到这个 html 标签的—对象–操作通过 document 可以访问所有的标签对象
1.3.2 doucment 对象方法一览 文档地址: https://www.w3school.com.cn/js/js_htmldom_document.asp
1.3.3 应用实例
应 用 实 例 1: 点 击 hello world 弹 出 窗 口 获 内 容 创 建 getElementById.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titlegetElementById的使用/title!--1. 先得到 h1 的 dom对象, 通过 id 获取2. 对h1对应的dom对象操作即可--script typetext/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 divhello 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 idmyHeader οnclick调用函数divhello world/div/h1--h1 idmyHeaderdivhello world/div/h1
pClick on the header to alert its value/p
/body
/html
应用实例 2 应 用 实 例 : 完 成 多 选 框 案 例 getElementsByName.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titlegetElementsByName 函数/titlescript typetext/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 typecheckbox namesport valuezq checkedchecked足球
input typecheckbox namesport valuetq台球
input typecheckbox namesport valueppq乒乓球 br/br/
button onclickselectAll()全选/button
button onclickselectNone()全不选/button
button onclickselectReverse()反选/button
/body
/html
应用实例 3 完 成 图 片 切 换 案 例
提醒为看到效果请把图片放在相应的位置. getElementsByTagName.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titlegetElementsByTagName/titlescript typetext/javascriptfunction 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/ (i4) .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(i0;iarr.length;i){arr[i].src dogImg[i];}}else{var arr document.getElementsByTagName(img)for(i0;iarr.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 height100
img src./img/2.png height100
img src./img/3.png height100
br/
input typebutton onclickchangeImgs() value查看多少小猫,并切换成小狗 idin/
br /
button idbtn onclickchangeVal()点我改变切换内容/button
/body
/html
应用实例 4 添 加 小 猫 图 片 案 例
提醒为看到效果请把图片放在相应的位置. createElement.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titlecreateElement/titlescript typetext/javascriptfunction 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 typebutton onclickaddImg()value点击创建一只小猫~/
/body
/html
1.4 HTML DOM 节点
1.4.1 基本介绍
在 HTML DOM 文档对象模型中每个部分都是节点
文档本身是文档节点所有 HTML 元素是元素节点所有 HTML 属性是属性节点HTML 元素内的文本是文本节点注释是注释节点
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 节点常用方法
通过具体的元素节点调用 getElementsByTagName() 方法获取当前节点的指定标签名孩子节点appendChild( oChildNode ) 方法可以添加一个子节点oChildNode 是要添加的孩子节点
1.4.4 节点常用属性
childNodes 属性获取当前节点的所有子节点firstChild 属性获取当前节点的第一个子节点lastChild 属性获取当前节点的最后一个子节点parentNode 属性获取当前节点的父节点nextSibling 属性获取当前节点的下一个节点 (后一个)previousSibling 属性获取当前节点的上一个节点 (前一个)className 用于获取或设置标签的 class 属性值innerHTML 属性表示获取/设置起始标签和结束标签中的内容innerText 属性表示获取/设置起始标签和结束标签中的文本
1.4.5 应用实例
需求: 完成以下功能(如图), 点击右侧的按钮可以得到对应的节点 html-dom.html
!DOCTYPE html
html
headmeta charsetUTF-8title演示HTML DOM 相关方法/titlelink relstylesheet typetext/css hrefstyle/css.css/script typetext/javascript//老师使用动态注册/绑定来演示window.onload function () {// 先获取btn01的domvar btn01 document.getElementById(btn01);btn01.onclick function () {// 查找idjava节点var java document.getElementById(java);alert(java节点文本 java.innerText);}// 查找所有option节点 小技巧: ctrlhome 直接到页面最上面 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);}}//查找namesport的节点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);}}}//查找idlanguage 下所有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);//lixxx/li input valuexx/}}//返回idsel01 的所有子节点[3种方法]var btn05 document.getElementById(btn05);btn05.onclick function () {//var options document.getElementById(sel01).getElementsByTagName(option);//alert(document.getElementById(sel01).childNodes.length);//11object 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);}}//返回idsel01 的第一个子节点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}//返回idjava 的父节点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,}}//返回idct 的前后兄弟节点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 idtotaldiv classinnerP你会的运动项目/Pinput typecheckbox namesport valuezq checkedchecked足球input typecheckbox namesport valuetq台球input typecheckbox namesport valueppq乒乓球 br/hr/P你当前女友是谁/Pselect idsel01option---女友---/optionoption艳红/optionoption idct value春桃菇凉春桃/optionoption春花/optionoption桃红/option/selecthr/p你的编程语言?/pul idlanguageli idjavaJava~~~/liliPHP/liliC/liliPython/li/ulbrbrhr/p个人介绍:/ptextarea nameperson idperson个人介绍/textarea/div/div
div idbtnListdivbutton idbtn01查找idjava节点/button/divdivbutton idbtn02查找所有option节点/button/divdivbutton idbtn03查找namesport的节点/button/divdivbutton idbtn04查找idlanguage 下所有li节点/button/divdivbutton idbtn05返回idsel01 的所有子节点/button/divdivbutton idbtn06返回idsel01 的第一个子节点/button/divdivbutton idbtn07返回idjava 的父节点/button/divdivbutton idbtn08返回idct 的前后兄弟节点/button/divdivbutton idbtn09读取idct 的 value 属性值/button/divdivbutton idbtn10设置#person的文本域/button/div
/div
/body
/html
