今天复习内容如下:
修改DOM树结构:
一.修改标签内容
1. 获取或修改原始HTML片段: 元素.innerHTML
2. 获取或修改纯文本内容: 元素.textContent
元素.textContent与元素.innerHTML相比的优点为:
1.去掉了内嵌标签
2.将特殊符号翻译成了正文
3. 获取或设置表单元素的内容: 表单元素.value
二.修改属性
1. HTML标标准属性:
1. 早期核心DOM: .getAttribute("属性名") 获取属性值
.setAttribute("属性名" , " 新值") 修改属性值
.hasAttribute("属性名") 判断是否含有该属性
.removeAttribute("属性名") 移除该属性
2. HTML DOM: 也可用.改
什么是HTML DOM呢? 是在旧版基础上,对部分常用函数和常用对象提供的简化版函数。做的第一个简化: 每个元素对象中都提前预置好了所有HTML标准属性,只不过,值暂时为""。
获取属性值: 元素.属性名 | 修改属性值: 元素.属性名=值
2. 状态属性: 只能用.改
不能用核心DOM的4个函数(getAttribute(), setAttribute(), hasAttribute(), removeAttribute()),因为核心 DOM的四个函数只能操作字符串类型的属性
举个例子:
禁用一个按钮: btn.disabled=true
相当于: <button disabled>..
启用一个按钮:btn.disabled=false 只能用.来访问,值都是bool类型:
3. 自定义扩展属性:
定义: <元素 data-自定义属性名="值"
获取或修改:
元素.getAttribute("data-属性名")
元素.setAttribute("data-属性名","值")
HTML5: 元素.dataset.属性名
三.修改样式
1. 修改内联样式: 元素.style.css属性="值"
2. 获取: getComputedStyle(元素).css属性