邢台做网站咨询,深圳市交易中心,网络营销买什么好,手机版百度入口目录
1. DOM
1.1 DOM基本概念
1.2 DOM树
2. 选中页面元素
2.1 querySelector
2.2 querySelectorAll
3. 事件
3.1 基本概念
3.2 事件的三要素
3.3 示例
4.操作元素
4.1 获取/修改元素内容
4.2 获取/修改元素属性
4.3 获取/修改表单元素属性
4.3.1 value#xf…目录
1. DOM
1.1 DOM基本概念
1.2 DOM树
2. 选中页面元素
2.1 querySelector
2.2 querySelectorAll
3. 事件
3.1 基本概念
3.2 事件的三要素
3.3 示例
4.操作元素
4.1 获取/修改元素内容
4.2 获取/修改元素属性
4.3 获取/修改表单元素属性
4.3.1 value获取到元素里用户填写的值
4.3.2 type输入框的形态文本框、密码框...
4.4 获取/修改样式属性
4.4.1 修改内联样式修改style属性的值
4.4.2 修改元素应用的CSS类名
5.操作结点
5.1 新增结点
5.2 删除结点 WebAPI都是浏览器给JS提供的功能如果浏览器不同API的行为也可能存在差异
1. DOM
1.1 DOM基本概念
DOM即Document Object Model 即文档HTML对象JS对象模型
含义为把HTML中的每个标签都可以映射到JS中的一个对应对象。
故而标签上显示的内容可以通过JS对象感知到同时JS对象修改对应属性能够影响到标签的显示
1.2 DOM树
DOM树结构形如 注1文档一个页面就是一个文档即document
2元素页面中所有的标签都成为元素即element
3结点网页中所有的内容都可以称为结点标签结点注释结点文本节点属性结点等即note
接下来将介绍常用的DOMAPI
2. 选中页面元素
2.1 querySelector
在CSS中使用选择器选中元素进行操作在JS中使用querySelector(CSS选择器)选中页面元素返回被选中的具体对象 div classboxabc/divdiv idid def/divh3spaninput typetext/span/h3scriptlet elem1document.querySelector(.box);console.log(elem1);let elem2document.querySelector(#id);console.log(elem2);let elem3document.querySelector(h3spaninput);console.log(elem3);/script
运行结果为 注1document是浏览器中的全局对象任何一个页面都有一个document
2所有的DOM API都是通过document对象展开的
3除console.log之外还可以使用cconsoe.dir打印对象以elem1为例 展开后可以查看dir对象的所有属性
4CSS所有的选择器都可以在querySelector处使用
2.2 querySelectorAll div classboxabc/divdiv idid def/divh3spaninput typetext/span/h3scriptvar arrdocument.querySelectorAll(div);console.log(arr);/script
运行结果为 注如果有多个类选择器重名则querySelector默认选中第一个
如果希望实现全部选中则可使用querySelectorAll二者使用方法完全相同只是其返回的是一个数组
3. 事件
3.1 基本概念
事件就是针对用户的操作进行的一些响应。
用户的行为会在浏览器中产生一些事件要能够和用户交互就需要代码针对事件做出反应
3.2 事件的三要素
1事件源哪个元素产生的事件
2事件类型是点击选中还是修改等等
3处理程序事件发生后要执行哪个代码
3.3 示例
div classbox onclickalert(hello)选择/div
运行结果如下 点击选择 注这是一个最简单的方式直接在元素中使用onXXX方法来绑定一个事件处理程序
但这种写法在实际开发中并不常用更常用的方式如下 div classbox 选择/divdiv ididdef/divscriptlet div document.querySelector(.box);div.onclick function(){alert(hello);}/script
其中事件源为名为.box的div事件类型为点击事件事件处理程序为function函数
4.操作元素
4.1 获取/修改元素内容
先获取到该元素使用innerHTML属性就能拿到元素里的内容修改该属性就会影响界面显示
一使用innerHTML: div classbox abc/divdiv ididdef/divscriptlet div document.querySelector(.box);div.onclick function(){console.log(div.innerHTML);}/script
运行结果为 点击abc四次后查看console标签页 注1输出“选择”文本前的数字是chrome控制台将相邻的相同的日志合并的结果如果需要展开可以在设置Setting中取消以下选项 二修改innerHTML div classbox abc/divdiv ididdef/divscriptlet div document.querySelector(.box);div.onclick function(){//console.log(div.innerHTML);div.innerHTML a;console.log(div.innerHTML);}/script
运行结果为 点击四次abc后查看console标签页 对应的页面显示也发生改变 4.2 获取/修改元素属性
HTML的标签属性也会映射到JS对象中
代码示例点击图片从1.jpg更换显示为2.jpg img src1.jpg width200px altscriptlet img document.querySelector(img);img.onclickfunction(){console.log(img.src);img.src2.jpg;}/script
运行页面如下 点击图片后 4.3 获取/修改表单元素属性
表单元素input,textarea,select...有一些特别的属性普通标签没有如
4.3.1 value获取到元素里用户填写的值
代码示例1打印在输入框中输入的内容 input typetextbutton点击/buttonscriptlet input document.querySelector(input);let button document.querySelector(button);button.onclick function(){console.log(input.value);}/script
运行代码后在网页页面输入框中输入hello world console标签页有 注不能将console.log(input.value)写为console.log(input.innerHTML)innerHTML获取到的是标签的内容即双标签的开始和结束标签中编写的内容input是单标签没有内容
代码示例2点击按钮令输入框中的数字1并显示结果 scriptlet input document.querySelector(input);let button document.querySelector(button);button.onclickfunction(){let value parseInt(input.value);value1;input.value value;}/script
运行后输入4点击两次1按钮 注1value属性是一个String类型直接1是在进行字符串拼接 button.onclickfunction(){let value input.value;value1;input.value value;}
进行数值1需要使用parseInt()函数将字符串类型转化为整数类型
4.3.2 type输入框的形态文本框、密码框...
代码示例输入框文本与密码的更换 input typetextbutton隐藏密码/buttonscriptlet input document.querySelector(input);let button document.querySelector(button);button.onclick function(){if(input.typetext){input.typepassword;button.innerHTML显示密码;}else{input.typetext;button.innerHTML隐藏密码;}}/script
运行后在输入框中输入123456 点击隐藏密码后 4.4 获取/修改样式属性
4.4.1 修改内联样式修改style属性的值
代码示例1实现div点击即可字体放大 div stylefont-size: 20px;Hello JavaScript/divscriptlet div document.querySelector(div);div.onclickfunction(){//先获取到当前字体的大小(转换为数值)let fontSizeparseInt(div.style.fontSize);fontSize 10;// 设置字体大小时切记px单位div.style.fontSize fontSizepx; }/script
运行后初始页面如下 点击两次后 注1JS中所写的样式的属性名与CSS属性可能不同
字体大小属性在CSS中写为font-size脊柱命名法在JS中写为fontSize驼峰命名法由于CSS中无需进行算术运算且CSS不区分大小写的在JS等其他语言中就需要进行转换
属性名是相同的只需将脊柱命名的属性名改为驼峰命名即可
4.4.2 修改元素应用的CSS类名
代码示例1切换夜间模式 div idone classlight stylefont-size:20px; height:500px切换/divstyle.light{color: black;background-color: white;}.dark{color: white;background-color: black;}/stylescriptlet div document.querySelector(#one);div.onclick function(){if(div.className dark){div.classNamelight;}else{div.classNamedark;}}/script
运行后网页初始页面为 点击切换后页面如下
以上操作都是针对当前页面上已有元素进行展开的
也可以通过JS实现对页面元素的创建与删除
5.操作结点
5.1 新增结点
新增节点分为两个步骤
1创建一个元素
2将这个元素结点插入到DOM树中
代码示例1实现在“请输入”文字后新增输入框其默认值为hello div classone请输入/divscriptlet input document.createElement(input);input.valuehello;// 输入框中默认显示hello;let div document.querySelector(.one);div.appendChild(input);/script
运行后界面如下 代码示例2实现无序列表1 1 和2 2 后新增3 3至9 9 ulli1 1/lili2 2/li/ulscriptlet ul document.querySelector(ul);for(let n3;n10;n){let li document.createElement(li);li.innerHTML n n;ul.appendChild(li);}/script
运行后页面如下 注1使用appendChild将新增结点插入到指定结点的最后一个孩子之后
2使用insertBefore将新增结点插入到指定结点之前
5.2 删除结点
代码示例1基于前例无序列表1 1至9 9实现删除3 3元素并通过console标签页打印3 3 let toDelete document.querySelectorAll(li)[2];console.log(toDelete);ul.removeChild(toDelete);
运行后页面如下 console标签页为 注使用parentElem.removeChild(childElem)删除指定元素的子元素
