建站推广网站,济南旅游网站建设现状,嘉兴有能做网站优化,那里建设网站好文章目录 1.1 DOM 介绍1.1.1 DOM简介1.1.2 DOM树 1.2. 获取元素1.2.1 根据ID获取元素1.2.2 根据标签名获取元素1.2.3 其它方式获取元素1.2.4 获取特殊元素 1.3 事件基础1.3.1 事件概述1.3.2 事件三要素1.3.3 执行事件步骤1.3.4 鼠标事件 1.4 操作元素1.4.1 操作元素内容1.4.2 属… 文章目录 1.1 DOM 介绍1.1.1 DOM简介1.1.2 DOM树 1.2. 获取元素1.2.1 根据ID获取元素1.2.2 根据标签名获取元素1.2.3 其它方式获取元素1.2.4 获取特殊元素 1.3 事件基础1.3.1 事件概述1.3.2 事件三要素1.3.3 执行事件步骤1.3.4 鼠标事件 1.4 操作元素1.4.1 操作元素内容1.4.2 属性操作1.4.3 表单元素属性操作1.4.4 案例一1.4.5 样式属性操作1.4.6 案例二1.4.7 案例三 1.5 排他操作 1.1 DOM 介绍
1.1.1 DOM简介
文档对象模型Document Object Model简称DOM是W3C组织推荐的处理可扩展标记语言的标准编程接口。
W3C 已经定义了一系列的 DOM 接口通过这些 DOM 接口可以改变网页的内容、结构和样式。
DOM是W3C组织制定的一套处理 html和xml文档的规范所有的浏览器都遵循了这套标准。
1.1.2 DOM树 DOM树 又称为文档树模型把文档映射成树形结构通过节点对象对其处理处理的结果可以加入到当前的页面
文档一个页面就是一个文档表示的是整个 html文档DOM中使用document表示节点网页中的所有内容在文档树中都是节点标签、属性、文本、注释等用node表示标签节点表示的是 html 中的标签又叫元素节点简称元素用element表示属性节点表示的是 html 标签中的属性文本节点表示的是 html 标签中的内容文本注释节点表示的是 html 文档中的注释DOM把以上内容都看做是对象
1.2. 获取元素
为什么要获取页面元素 因为要操作页面上的元素
1.2.1 根据ID获取元素
语法document.getElementById(id)作用根据ID获取元素对象参数id值区分大小写的字符串返回值元素对象 或 null
案例代码
bodydiv idtime2019-9-9/div
/body
scriptvar timer document.getElementById(time);console.log(timer);//div idtime2019-9-9/divconsole.log(typeof timer);//objectconsole.dir(timer);//返回对象中属性和方法
/script1.2.2 根据标签名获取元素
语法document.getElementsByTagName(‘标签名’)作用根据标签名获取元素对象参数标签名返回值元素对象集合伪数组数组元素是元素对象
案例代码
bodyulli知否知否应是等你好久11/lili知否知否应是等你好久12/lili知否知否应是等你好久13/li/ulol idolli生僻字1/lili生僻字2/lili生僻字3/li/olscript//会获取页面所有的li标签var lis document.getElementsByTagName(li);console.log(lis);//返回的是一个伪数组console.log(lis[7]);var ol document.getElementById(ol);var li ol.getElementsByTagName(li);console.log(li);for (var i 0; i li.length; i) {console.log(li[i].innerText);}/script
/body1.2.3 其它方式获取元素 根据类名返回元素对象集合document.getElementsByClassName(‘类名’); 根据指定选择器返回第一个元素对象document.querySelector(‘选择器’); 根据指定选择器返回document.querySelectorAll(‘选择器’); 注意querySelector和querySelectorAll选择器需要加符号,如document.querySelector(‘#id’)
案例代码
bodydiv classbox盒子1/divdiv classbox盒子2/divdiv idnavulli首页/lili产品/li/ul/divscript// 1. getElementsByClassName 根据类名获得某些元素集合var boxs document.getElementsByClassName(box);console.log(boxs);// 2. querySelector 返回指定选择器的第一个元素对象var firstBox document.querySelector(.box);console.log(firstBox);var nav document.querySelector(#nav);console.log(nav);var li document.querySelector(li);console.log(li);// // 3. querySelectorAll()返回指定选择器的所有元素对象集合var allBox document.querySelectorAll(.box);console.log(allBox);var lis document.querySelectorAll(li);console.log(lis);/script
/body1.2.4 获取特殊元素 获取body元素document.body 获取html元素document.documentElement bodyscript// 获取body;console.log(document.body);console.dir(document.body);// 获取根元素console.log(document.documentElement);/script
/body1.3 事件基础
1.3.1 事件概述
事件是可以被 JavaScript 侦测到的行为。例如我们可以在用户点击某按钮时产生一个事件然后去执行某些操作。
1.3.2 事件三要素
事件源谁触发事件的元素事件类型什么事件 例如 click 点击事件事件处理程序做啥事件触发后要执行的代码(函数形式)事件处理函数
案例代码
bodybutton idbtn唐伯虎/buttonscriptvar btn document.getElementById(btn);btn.onclick function () {alert(点秋香);};/script
/body1.3.3 执行事件步骤
获取事件源注册事件添加事件处理程序 (函数)
bodydiv classbox/divscript//1.获取事件源var box document.querySelector(.box);//2.注册事件//box.onclick//3.添加事件处理程序box.onclick function () {alert(未来可期);}/script
/body1.3.4 鼠标事件
鼠标事件触发条件onclick鼠标点击左键触发onmouseover鼠标经过触发onmouseout鼠标离开触发onmousemove鼠标点击移动触发onmouseup鼠标抬起触发onmousedown鼠标按下触发onfocus获得鼠标焦点触发onblur失去鼠标焦点触发
bodydiv classbox/divinput typetext登入scriptvar box document.querySelector(.box);box.onclick function () {console.log(onclick);}box.onmouseover function () {console.log(onmouseover);}box.onmouseout function () {console.log(onmouseout);}box.onmousemove function () {console.log(onmousemove);}box.onmouseup function () {console.log(onmouseup);}box.onmousedown function () {console.log(onmousedown);}var input document.querySelector(input);input.onfocus function () {console.log(onfocus);}input.onblur function () {console.log(onblur);}/script
/body1.4 操作元素
操作元素来改变元素里面的内容、属性等。
1.4.1 操作元素内容
element.innerText从起始位置到终止位置的内容会去除html标签同是空格和换行也会去掉element.innerHTML从起始位置到终止位置的全部内容包括html标签同是保留空格和换行
bodyp我是文字/pscriptvar p document.getElementsByTagName(p)console.log(p[0].innerText)p[0].innerText 我是p标签console.log(p[0].innerText)/script
/bodyinnerText和innerHTML的区别
获取内容时的区别 innerText会去除空格和换行而innerHTML会保留空格和换行 设置内容时的区别 innerText不会识别html而innerHTML会识别
bodybutton按钮/buttonpspan我是一段文字我很好看/span/pscriptvar btn document.getElementsByTagName(button);var p document.getElementsByTagName(p);btn[0].onclick function () {console.log(p[0].innerText);console.log(p[0].innerHTML);p[0].innerHTML h1我很好看/h1;// p[0].innerText h1我很好看/h1;console.log(p[0].innerText);console.log(p[0].innerHTML);};/script
/body显示当前时间练习
headmeta charsetUTF-8 /titleDocument/titlestylediv,p {width: 300px;height: 30px;line-height: 30px;color: #fff;background-color: pink;}/style
/headbodybutton显示当前系统时间/buttonp点击时候显示当前时间/pscriptvar btn document.getElementsByTagName(button);var p document.getElementsByTagName(p);var div document.getElementById(div);div.innerText getTime();btn[0].onclick function () {p[0].innerText getTime();}function getTime() {var date new Date();var year date.getFullYear();var month date.getMonth() 1;var day date.getDate();var time 当前时间是 year 年 month 月 day 日return time}/script
/body/html1.4.2 属性操作
srchrefidalttitle
语法 获取属性值 元素对象.属性名 设置属性值 元素对象.属性名 值
bodyimg srcimages/s.gif alt图片丢失了 title这是图片 /diva hrefhttp://www.baidu.com上午好/a/divscript// 1.获取事件源var img document.querySelector(img);var a document.querySelector(a);console.log(img.src);console.log(img.alt);console.log(img.title);console.log(a.href);img.src images/x.gif;img.alt 图片丢失了1;img.title 这是图片1;a.href http://www.163.com;a.innerText 下午好;/script
/body1.4.3 表单元素属性操作
typevaluecheckedselecteddisabled
语法
获取属性的值 元素对象.属性名 设置属性的值 元素对象.属性名 值表单元素中有一些属性如disabled、checked、selected这些属性值是布尔类型
bodyinput typecheckbox value1234 checkedselectoption value1 disabled上海/optionoption value2 selected深圳/option/selectscriptvar input document.querySelector(input);console.log(input.type);console.log(input.value);console.log(input.checked);var option document.querySelectorAll(option);console.log(option[0].disabled);console.log(option[1].value);console.log(option[1].selected);/script
/body1.4.4 案例一
仿京东显示隐藏密码 核心思路
点击眼睛按钮把密码框类型改为文本框就可以看见里面的密码一个按钮2个状态点击一次切换为文本框在点击一次切换为密码框可以利用一个flag变量判断flag的值 如果是true就切换为文本框flag设置为false如果是false就切换为密码框flag设置为true
headmeta charsetUTF-8 /titleDocument/titlestyle.box {position: relative;width: 400px;border-bottom: 1px solid #ccc;margin: 100px auto;}.box #password {width: 370px;height: 30px;border: 0;outline: none;}.box img {position: absolute;top: 2px;right: 2px;width: 24px;}/style
/headbodydiv classboximg srcimages/close.png ideye /input typepassword idpassword //divscriptvar eye document.getElementById(eye);var password document.getElementById(password);var flag true;eye.onclick function () {if (flag) {eye.src images/open.png;password.type textflag false}else {eye.src images/close.png;password.type passwordflag true}}/script
/body
/html1.4.5 样式属性操作
我们可以通过 JS 修改元素的大小、颜色、等样式。 常用方式 行内样式操作element.style类名样式操作element.className 操作style属性 语法元素对象.style.样式属性 值; bodydiv 我是一个div /divscriptvar div document.querySelector(div);div.style.width 600px;div.style.height 400px;div.style.backgroundColor red;div.style.fontSize Math.random() * 60 px;document.body.style.backgroundColor orange;/script
/body操作className属性 语法元素对象.className 值; bodydiv classfirst文本/divscriptvar div document.querySelector(div);div.onclick function () {//新类名 会覆盖原来的类名div.className change;//添加新类名保留原有类名this.className first change;}/script
/body注意 class是个保留字因此使用className来操作元素类名属性className会直接更改元素的类名会覆盖原先类名
1.4.6 案例二
淘宝点击关闭二维码
思路 利用样式的显示和隐藏完成display:none 隐藏元素display: block 显示元素
bodydiv classbox淘宝二维码img srcimages/tao.png /div classclose-btn×/div/divscriptvar btn document.getElementsByClassName(close-btn);var img document.querySelector(.box);btn[0].onclick function () {img.style.display none;};/script
/body1.4.7 案例三
显示隐藏文本框内容当鼠标点击文本框时里面默认文字隐藏当鼠标离开文本框时里面文字显示。
思路 需要两个事件获取鼠标焦点onfocus、失去鼠标焦点onblur 如果获取焦点判断表单里面内容是否是默认文字如果是默认文本就清空表单内容 如果失去焦点判断表单里面内容是否为空如果是空则表单内容改为默认文本
bodyinput typetext value手机 idtxt /scriptvar txt document.getElementById(txt);txt.onfocus function () {console.log(获取焦点)if (txt.value 手机) {txt.value ;txt.style.color black;}};txt.onblur function () {console.log(未获取焦点)if (txt.value ) {txt.value 手机;txt.style.color #999;}};/script
/body1.5 排他操作 如果有同一组元素我们想要某一个元素实现某种样式 需要用到循环的排他思想算法
所有元素全部清除样式一定要先 干掉所有人给当前元素设置样式 最后 复活自己
bodybutton按钮1/buttonbutton按钮2/buttonbutton按钮3/buttonbutton按钮4/buttonbutton按钮5/buttonscriptvar btns document.querySelectorAll(button);//给每一个按钮注册了点击事件for (var i 0; i btns.length; i) {btns[i].onclick function () {//1.先将所有的高亮颜色清空 干掉了所有人for (var j 0; j btns.length; j) {btns[j].style.backgroundColor ;}//2.单独给自己添加上高亮效果 复活我自己this.style.backgroundColor orange;};}//this 代表当前对象 ----点击那个按钮哪个按钮就是this/script
/body
