DOM(二)——修改内容、属性、样式
文章目录
- 一、修改内容
- `元素对象.innerHTML`
- `元素对象.textContent`
- `表单元素.value`
- 二、属性
- 1.字符串类型的HTML标准属性
- 新DOM方法
- 特例: class属性
- 2.bool类型的HTML标准属性
- 拓展示例:全选、取消全选
- 3.自定义属性(data-xx)
- 三、样式
- (1)修改内联样式
- (2)获取样式getComputedStyle
- 总结
- 3.批量修改
一、修改内容
(1)获取或修改元素开始标签到结束标签之间的原始的HTML内容(双标签)
元素对象.innerHTML
- 获取元素内容时: innerHTML原样返回HTML代码中的html内容,不做任何加工
- 修改元素内容时: innerHTML会先将字符串内容交给浏览器解析,然后将解析后的可以给人看的内容显示在页面上
示例:
<h3 id="msg">来自<a href="#"><<新华社>></a>的消息</h3>
<h3 id="msg2"></h3>
<script>var h3Msg=document.getElementById("msg");var h3Msg2=document.getElementById("msg2");//想获取msg的内容console.log(h3Msg.innerHTML) //想修改msg2内容var str=`来自<a href="#"><<新华社>></a>的消息`; h3Msg2.innerHTML=str;
</script>
运行结果:
控制台:
(2) 获取或修改元素开始标签到结束标签之间的纯文本内容(双标签)
元素对象.textContent
- 获取元素内容: textContent去掉内嵌的标签,并将特殊符号转为正文,然后在返回修改后的内容。
- 修改元素内容: 不会将字符串内容交给浏览器解析,而是直接保持字符串的原样内容输出
示例:
<h3 id="msg">来自<a href="#"><<新华社>></a>的消息</h3>
<h3 id="msg3"></h3>
<script>var h3Msg=document.getElementById("msg");var h3Msg3=document.getElementById("msg3");//想获取msg的内容console.log(h3Msg.textContent) //想修改msg3的内容var str=`来自<a href="#"><<新华社>></a>的消息`; h3Msg3.textContent=str;
</script>
运行结果:
控制台:
(3)获取或修改表单元素的内容(单标签)
绝大多数表单元素都是input元素,而input元素是单标记,没有结束标签,所以不能使用innerHTML和textContent来获取或修改内容,故用value代替:
表单元素.value
示例:
<input type = "text"><button id = "btn">百度一下</button>
<script>//1.获取要绑定事件的元素var btn = document.getElementById("btn");//2.给button绑上事件btn.onclick = function() {//3.获取文本框内容var text = this.previousElementSibling;//表单元素.value获取var str = text.value;//4.文本框内容不为空时搜索文本框内容if (str !== '') {console.log(`搜索${str}……`);}}
</script>
二、属性
1.字符串类型的HTML标准属性
HTML标准中规定的,属性值为字符串的属性,例如class, id, name, value, href, title, ...
旧DOM方法:
i. 获取属性值:元素对象.getAttribute("属性名")
ii. 修改属性值:元素对象.setAttribute("属性名", "新值")
iii. 判断是否包含某个属性:元素对象.hasAttribute("属性名")
iv. 移除属性:元素.removeAttribute("属性名")
新DOM方法
新的HTML DOM已经将所有HTML标准属性,提前保存在了内存中的元素对象身上。
以后,只要操作HTML标准属性,就都可用.属性名
方式操作
①获取属性值:
元素对象.属性名
②修改属性值:
元素对象.属性名=属性值
③判断是否包含某个属性:
元素.属性名!==""
说明包含该属性
④移除属性:
元素对象.属性名=""
示例:
<a id="a1" href="http://www.baidu.com" title="前往baidu">go to baidu</a>
<script>var a1=document.getElementById("a1");//想获得a1的href属性// console.log(a1.getAttribute("href"))console.log(a1.href);//修改a1的title属性// a1.setAttribute("title","Welcome tmooc")a1.title="Welcome tmooc";//判断a1上是否包含target属性// console.log(a1.hasAttribute("target"));//falseconsole.log(a1.target!=="");//false//移除id属性// a1.removeAttribute("id");// delete a1.id;//错误a1.id="";
</script>
特例: class属性
ES6基础语法中已经将class定义为关键字,有特殊功能,专门用于创建一种类型。
所以,DOM标准就不能重复使用"class"这个属性名。
在DOM中只要用.获取或修改元素的class属性值,都必须换成.className
操作.className
,就是在操作页面上元素的class属性
2.bool类型的HTML标准属性
HTML标准中规定的,不需要写属性值,只靠属性名就可发挥作用的属性
例:
1)checked: 用于标记一个checkbox是否被选中
2)disabled: 用于标记一个表单元素是否被禁用
能用新HTML DOM来操作,且属性值必须是bool类型的true或false
元素.属性名
示例:
<input id="chb" type="checkbox">同意</br>
<button id="btn" disabled>注册</button><script>
//DOM4步
//1.查找触发事件的元素:
//本例中: 点击CheckBox影响按钮的启用禁用状态
var chb = document.getElementById("chb");
//2. 绑定事件处理函数
//当表单元素的内容或状态改变时自动触发
//本例中,当CheckBox的选中状态被改变时,自动执行
chb.onchange = function() {//3. 查找触发事件的元素//本例中,选中checkbox影响button的启用和禁用状态var btn = document.getElementById("btn");//4. 修改元素btn.disabled = !this.checked;
}
</script>
拓展示例:全选、取消全选
html+css:
<style>
/*首先必须是input其次必须是选中的*/
input:checked {box-shadow:0 0 5px red;
}
/*首先必须是input其次必须是未选中的*/
input:not(:checked) {box-shadow:0 0 5px green;
}
</style><h2>管理员列表</h2>
<table border="1px" width="500px"><thead><tr><th><input type="checkbox"/>全选</th><th>管理员ID</th><th>姓名</th><th>操作</th></tr></thead><tbody><tr><td><input type="checkbox"/></td><td>1</td><td>Tester</td><td>修改 删除</td></tr><tr><td><input type="checkbox"/></td><td>2</td><td>Manager</td><td>修改 删除</td></tr><tr><td><input type="checkbox"/></td><td>3</td><td>Analyst</td><td>修改 删除</td></tr><tr><td><input type="checkbox"/></td><td>4</td><td>Admin</td><td>修改 删除</td></tr></tbody>
</table>
css中已经提供了专门的选择器,用于匹配处于不同状态的元素——状态伪类,比如
i. 选择选中的元素: :checked
选择未选中的元素: :not(:checked)
ii. 选择禁用的元素: :disabled
dom树:
js:
<script>
/*点全选,修改tbody中所有checkbox*/
//1.查找触发事件的元素
// table > thead 下的input
var chbAll = document.querySelector('table > thead input');
//2.绑定事件处理函数
chbAll.onclick = function() {//3.查找要修改的元素// 本例中修改tbody下每行第一个td中的inputvar inputs = document.querySelectorAll('table>tbody>tr>td:first-child>input');//4.修改元素//遍历inputs中每个checkboxfor (var chb of inputs) {chb.checked = chbAll.checked;}
}/*点tbody中每个checkbox,也会影响表头中的全选*/
//1.查找触发事件的元素
//本例中:查找tbody下每行第一个td中的input
var inputs = document.querySelectorAll('table>tbody>tr>td:first-child>input');
//2.绑定事件处理函数
for (var input of inputs) {input.onclick = function() {//3.查找要修改的元素(chbAll已找到)//4.修改元素//先查找tbody下有没有未选中的checkboxvar unchecked = document.querySelector("table>tbody>tr>td:first-child>input:not(:checked)");if (unchecked == null)//如果没找到未选中的checkbox,则chbAll就选中chbAll.checked = true;else //如果找到未选中的checkbox,则chbAll就不选中chbAll.checked = false;}
}
</script>
结果:
3.自定义属性(data-xx)
HTML标准中没有规定的,程序员根据自身的需要,自发添加的自定义属性
好处:
不受样式和标签名修改的影响.
在客户端临时缓存部分业务数据,避免反复向服务器发送请求。
1). 在HTML中手动添加:
<元素 自定义属性名="属性值">
2). 在js中访问自定义扩展属性
tip:不能用.
访问!因为自定义属性是后天程序员自发添加的,HTML标准中没有规定。所有在内存中的元素对象上,不包含自定义扩展属性!
i.用旧核心DOM访问:
元素.getAttribute("自定义属性名")
元素.setAttribute("自定义属性名", "属性值")
ii. 在新版的HTML5标准中,有新的规定:
①HTML中,所有自定义属性名必须以data-
开头!
<元素 data-自定义属性名="属性值">
②如果在html中以data-开头,则js中:
元素.dataset.自定义属性名
强调: 在js中使用dataset时,一定不要加data-
前缀
示例:获取自定义属性,点击一次次数+1
<button data-n="0" data-btn>click me</button>
<script>//想点按钮,给n属性的值+1//DOM 4步//1. 查找触发事件的元素//本例中: 查找带有data-btn属性的一个按钮var btn = document.querySelector("[data-btn]");//2. 绑定事件处理函数btn.onclick = function () {//3. 查找要修改的元素//本例中,就是改自己this,不用查找,//4. 修改元素//4.1 获取自己身上data-n属性中保存的旧点击次数,转为整数var n = parseInt(this.getAttribute("data-n"));//或this.dataset.nn++; //4.2 次数+1this.setAttribute("data-n", n) //4.3 再放回去//或this.dataset.n=n;}
</script>
三、样式
(1)修改内联样式
元素.style.css属性="属性值" //记得加单位
相当于手工在元素上添加:(优先级最高)
<元素 style="css属性:属性值">
所有带-的css属性名必须去-
变驼峰
比如:
font-size -> fontSize
background-color -> backgroundColor
list-style-type -> listStyeType
style.css只能获得元素的内联样式!
示例:
<style>h1{background-color:red;}
</style><h1 id="h1" style="color:yellow">Welcome</h1>
<p>Welcome to my web site</p><script>var h1=document.getElementById("h1");console.log(h1.style.color);console.log(h1.style.backgroundColor)
</script>
(2)获取样式getComputedStyle
使用元素.style.css
属性的方式,只能获取内联样式。无法获得内部或外部样式表中层叠或继承来的css属性值
所以,想获得元素任意css属性值,都要获得计算后的样式(最终应用到一个元素上的所有css属性的总和)。
步骤:
i. 先获得计算后的样式对象:
var style=getComputedStyle(元素对象)
getComputedStyle是浏览器内置函数,不能改名
ii. 从完整的样式对象中只提取个别css属性
style.css属性
计算后的样式对象中的所有css属性都是只读的。
示例:
<style>h1{background-color:red;}
</style><h1 id="h1" style="color:yellow">Welcome</h1>
<p>Welcome to my web site</p><script>var h1=document.getElementById("h1");//1. 先获得h1计算后的完整样式var style=getComputedStyle(h1);console.log(style);//2. 再从完整样式对象中获取个别css属性console.log(style.color);console.log(style.backgroundColor);//3. 试图修改,不能修改,只读style.backgroundColor="red";
</script>
总结
修改一个元素的css属性,首先
.style
,因为内联样式优先级最高!且当前元素独有!获取一个元素的任意css属性值时,只能用
getComputedStyle();
3.批量修改
如果修改多个css属性,只要批量设置一个元素的多个css属性,都用**class
代替.style
**
DOM(二)——修改内容、属性、样式相关推荐
- php修改js内容,js怎样修改html元素的内容?HTML DOM实现修改内容
js怎样修改html元素的内容?本章就给大家介绍在js中利用HTML DOM是怎样修改html元素内容的.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们要了解HTML DO ...
- jQuery操作样式及属性样式
一.jQuery操作样式 css操作 1.设置单个样式 //css(name, value); //name:需要设置的样式名称 ;value:对应的样式值 $("#one").c ...
- 第十二讲 dom对象(DOM对象、document对象的常用方法、节点、查找结点、 查看/修改/删除属性节点、创建和增加节点)
一.查看节点 getElementById( ) 元素的ID名称来访问,返回对拥有指定id的第一个对象的引用 getElementsByName( ) 按元素的name名称来访问,返回带有指定名称的 ...
- vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
- jQuery(一):概述、选择器、操作(元素本身、属性、内容、样式)、元素遍历、事件
目录 一.jQuery概述 1.1 什么是jQuery 1.2 jQuery的优势 1.3 jQuery版本支持 1.4 jQuery引入 1.5 jQuery核心用法 1.5.1 $介绍 1.5.2 ...
- php怎么修改div自带属性吗,修改html 属性,css样式。
一 通过修改标签属性来改变它的样式 js设置和获取标签的属性 window.onload = function () { var attr = document.getElementById(&quo ...
- JavaScript 教程「9」:DOM 元素获取、属性修改
什么是 Web API Web API 是指网页服务器或者网页浏览器的应用程序接口.简单来讲,就是我们在编写 JavaScript 代码时,可以通过 Web API 来操作 HTML 网页和浏览器. ...
- 【DOM】DOM操作之如何修改元素的样式_03
目录 一. 修改: 3种 1. 元素内容: 3种 2. 元素属性: 3种 3. 元素样式: (1). 修改内联样式 (2). 修改样式表中的样式 (3). 示例: 修改元素的内联样式和样式表中的样式 ...
- 不要动态修改 DOM 里面的 id 属性
我不知道是否有什么标准规定不允许修改id属性,或者不建议修改id属性,总之IE对此支持不佳.在IE当中,修改id属性对将来的DOM操作没什么不符合标准的影响,你仍然可以通过document.getEl ...
最新文章
- python多线程与GIL
- 斑马技术发布《2022年中国医院愿景研究》:未来5年,超过90%的临床医生将采用移动技术...
- JZOJ 1219. Num
- kafka+zookeeper安装配置
- ObjectStateManager 中已存在具有同一键的对象。ObjectStateManager 无法跟踪具有相同键的多个对象...
- Hadoop生态圈-Hbase的rowKey设计原则
- 8小时删除,这波资源碉堡了 ! @所有人
- Android中如何使按钮的背景变得透明
- atitit.激活一个窗口总结 swing java .net php
- android inflater 用法
- 设计模式 单例模式 使用模板及智能指针
- 数据仓库模型数据仓库四大模型
- 英国正在大举进军AI,看懂其三大投资走向
- springboot基于web的摩托车销售系统的设计与实现毕业设计源码031706
- python定时发微信消息给心爱的她
- python 发送QQ邮箱
- db2获取当前日期、时间、时间戳、年份
- Matlab中结构体Struct使用
- 数学里上凹,下凹,上凸,下凸
- 中国人民大学_《组织行为学》_14.相对剥夺:怎样快速形成凝聚力?
热门文章
- CSS文件开头到底声明@charset utf-8
- python-文件操作(1)
- linux中配置tomcat
- 浅谈CSS3 响应式布局--Media Queries
- 三种方法实现轮播图配置,史上最简方法~
- TS Annotation
- oracle 怎么附加数据库,Oracle 如何附加数据库
- python中{%%}在HTML中的用法
- matlab最小生成树举例,Matlab最小生成树示例
- html iframe 不限制大小_渗透技术再升级:如何利用HTML注入泄漏用户数据