DOM中的增删改查之修改

最新推荐文章于 2022-08-21 20:15:46 发布

运维客

最新推荐文章于 2022-08-21 20:15:46 发布

阅读量240

点赞数

分类专栏： DOM 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weiwri/article/details/105418322

版权

DOM 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

DOM中的修改

一 .内容: 3种

		1. 获取或修改原始HTML片段: 元素.innerHTML
		2. 获取或修改纯文本内容: 元素.textContent/innerText(少使用,因为有兼容性问题);
			区别于 innerHTML
				a. textContent去掉了内嵌的标签
				b. textContent将特殊符号翻译为正文
		以上两个获得的都是双标记中，开始标记和结束标记之间的内容
		问题: 表单元素是单标记，没有结束标记，所以也就没有innerHTML和textContent;
		3. 获取或设置表单元素的内容: 表单元素.value(表单元素有input等)

二. 属性: 3种:

HTML标准属性:

 	什么是: HTML标准中规定的那些字符串类型的属性。比如: id, title, class, name, value, src, href...
 	获取或修改HTML标准属性: 2种方式：
 		1. 早期的核心DOM函数: 4个:
 		  var 变量=元素.getAttribute("属性名") 获取属性值
 		  元素.setAttribute("属性名","新值") 修改属性值
 		  var bool=元素.hasAttribute("属性名") 判断元素是否包含该属性
 		  元素.removeAttribute("属性名") 移除元素上的指定属性
 		2. 后期的HTML DOM函数: 
 			什么是HTML DOM: 是在旧版基础上，对部分常用函数和常用对象提供的简化版函数。
 			做的第一个简化: 每个元素对象中都提前预置好了所有HTML标准属性，只不过，值暂时为""。
 				今后在操作HTML标准属性时，只要用: 元素.属性名(要先通过查找找到元素)
 				特例: 
 					html中: <元素 class="类名"
 					js中不能用.class，因为class是js的关键词。所以，凡是操作html中的class属性，一律更名为className。js中操作className等效于操作HTML中的class。
 			获取属性值: 元素.属性名
 			修改属性值: 元素.属性名=值 (class的属性名为className)
 				强调: 只要修改标准属性，值必须是字符串。如果给的不是字符串，DOM会自动转为字符串。
 			判断是否包含指定属性: 元素.属性名!==""，说明包含。因为所有标准属性的默认值是""。
 			移除属性: 元素.属性名="";
 				只要把元素的属性值改为空字符串，则当前属性失效。
 问题: 以上函数，只能操作字符串类型的HTML标准属性。无法操作bool类型的HTML属性:

状态属性:

	什么是: HTML标准中规定的，值为bool类型的属性: disabled  selected   checked  multiple ...
		特征: 所有状态属性在HTML中使用时，都不带=和属性值。加上，就起作用。去掉就失去作用。
	如何操作: 
		不能用核心DOM的4个函数（getAttribute(), setAttribute(), hasAttribute(), removeAttribute()），因为核心DOM的四个函数只能操作字符串类型的属性
		只能用.来访问，值都是bool类型: 
			比如: 
			disable是打开禁止选用按钮
				禁用一个按钮: btn.disabled=true
					相当于: 
						<button disabled>...
				启用一个按钮:btn.disabled=false
				选中一个checkbox: 
					chb.checked=true;
					相当于: 
						<input type="checkbox" checked>
				取消选中一个checkbox:
					chb.checked=false;

	补充: CSS中有一组状态伪类: 
		:disabled   :checked    :selected
		专门用于选择处于某种状态的元素
		比如: input:checked 选择的是被选中的input元素
			button:disabled 选择的是被禁用的按钮

自定义扩展属性:

 	什么是自定义扩展属性: HTML标准中没有规定的，程序员自发添加的属性。
 	何时: 2个典型用途: 
 		1. 在客户端html元素上临时缓存数据
 			比如: data-target="id值";
 		2. 代替其他选择器，用来选择触发事件的元素，为元素绑定事件。
 			比如: data-toggle="dropdown"
 	如何: 
 		1. 为元素添加自定义扩展属性: 
 			行业标准写法:: 
 				<元素 data-自定义属性名="值"
 		2. 用自定义扩展属性作为查询条件，只能用属性选择器: 
 		[data-属性名=值]
 		3. 获取或修改自定义属性的值: 
 			不能用.访问自定义扩展属性: 
 				因为自定义扩展属性是程序员在html标准之外，后天添加的自定义属性。则HTML DOM的元素对象中就不包含这些自定义扩展属性。
 			a. 可以用核心DOM: ——没有兼容性问题
 				元素.getAttribute("data-属性名")
 				元素.setAttribute("data-属性名",值)
 				为什么: getAttribute()每次都是去HTML代码中查找属性。
 			b. HTML5标准中规定: 有兼容性问题
 				可以 元素.dataset.属性名(属性名种就不用写data-了)
 				其中dataset可以自动收集页面上所有data-开头的自定义扩展属性。这就是为什么自定义扩展属性名习惯上都要带data-前缀的原因！

三.样式

修改内联样式:

 	每个元素都有一个style属性，代表html中开始标签中的style属性。
 	元素的style属性中又包含了所有css样式属性
 	修改元素对象的style属性中的css样式属性，等效于直接修改html中开始标签中的style=""
 	比如: 元素.style.backgroundColor="red"
 	等效于: <元素 style="background-color:red">
 	再比如: 显示隐藏: 
 		元素.style.display="block"
 			等效于: <元素 style="display:block"
 		元素.style.display="none"
 			等效于: <元素 style="display:none"
 	强调: 所有带-的css属性，一律去横线，变驼峰命名。
 		比如: list-style-type  -> listStyleType
              background-color -> backgroundColor

获取样式：

 	问题: 元素.style仅包含内联样式，不包含样式表中的样式。所以，如果用元素.style.css属性，也只能获得内联样式，无法获得样式表中定义的样式。
 	解决: 获得计算后的样式: 
 		什么是计算后的样式: 最终应用到这个元素上的所有样式的集合。
 		何时: 今后，只要获取样式，都要获取计算后的样式。
 		如何: 2步: 
 			a. 先获得计算后的样式对象
 				var style=getComputedStyle(元素)  注意:其实应该先查找元素
 				获得指定元素计算后的完整样式对象
 				强调: getComputedStyle是内置的全局函数，可直接使用！
 				返回值: 是一个包含所有css属性的巨大的对象
 			b. 才是从样式对象中提取想要的css属性: 
 				var 属性值=style.css属性
 			强调: 计算后的样式，都是只读的。
 				因为样式的来源不确定，不确定有多少元素正在共享该属性。所以不允许擅自修改。以免牵一发而动全身。
 总结: 想修改一个元素的css属性:
 		元素.style.css属性=值
 	想获取一个元素的css属性: 
 		getComputedStyle(元素).css属性

 问题: 修改样式时，style.css属性一句话只能改一个css属性。而网页中一个效果的变化，可能同时涉及多个css说行。如果用style.css属性=值 修改，代码会很繁琐。而且，加样式时繁琐一次，去掉样式时同样繁琐！
 解决: 当批量修改样式时，用className修改是最划算的！

总结:

一. 内容:

1. 原始html 片段: .innerHTML  
2. 纯文本: .textContent  
3. 表单元素的内容: .value

二. 属性:

1. HTML标标准属性: 
	a. 核心DOM: .getAttribute() 
				.setAttribute() 
				.hasAttribute() 
				.removeAttribute()
	b. HTML DOM: 也可用.改
2. 状态属性: 只能用.改
3. 自定义扩展属性: 

	定义: <元素 data-自定义属性名="值"
    获取或修改: 
		元素.getAttribute("data-属性名")
        元素.setAttribute("data-属性名","值")
	HTML5: 元素.dataset.属性名

三. 样式:

1. 修改内联样式: 元素.style.css属性="值"
2. 获取: getComputedStyle(元素).css属性

运维客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM中的增删改查之修改

DOM中的修改一 .内容: 3个属性: 1. 获取或修改原始HTML片段: 元素.innerHTML 2. 获取或修改纯文本内容: 元素.textContent/innerText 区别于 innerHTML a. textContent去掉了内嵌的标签 b. textContent将特殊符号翻译为正文以上两个获得的都是双标记中，开始标记和结束标记之间的内容...
复制链接

扫一扫

专栏目录