Dom笔记

Posted 2020-09-19

修改内容: 

1. 获取或修改元素开始标签和结束标签之间的html内容: elem.innerHTML
2. 获取或修改元素开始标签和结束标签之间的纯文本内容(去掉标签，将特殊符号转为正文): textContent
专门用途: 去掉内容中的标签，仅保留文字
IE8: innerText

2. 修改属性:
核心DOM: 万能，但繁琐
1. 获取属性值:
//获得属性节点对象:
var attrNode=
elem.attributes[i/"属性名"]
elem.getAttributeNode("属性名");
attrNode.value//获得属性节点的值
//直接获得属性值
var value=elem.getAttribute("属性名");
2. 设置属性值:
elem.setAttribute("属性名",属性值)
3. 移除属性:
elem.removeAttribute("属性名")
4. 判断是否包含指定属性:
elem.hasAttribute("属性名");

 

1. 获取属性值:
var value=elem.getAttribute("属性名");
2. 设置属性值:
elem.setAttribute("属性名",属性值);
3. 移除属性
elem.removeAttribute("属性名");
4. 判断是否包含属性:
elem.hasAttribute("属性名");
HTML DOM: 对部分核心DOM的简化
1. 所有html标准的属性，自动成为元素对象的属性。可用.访问。
元素对象的属性和普通对象的属性用法完全相同。
2. 移除: 将属性赋值为""
强调: HTML DOM只能访问标准属性
自定义属性只能用核心DOM访问

特殊: HTML class -> js className
建议: 修改样式，首选className修改

自定义属性: HTML5
什么是: 开始标签中，data-开头的属性
data-i data-age
如何获取自定义属性值:
elem.dataset.i

2. 样式:
内联:
1. 获取或设置:
elem.style.css属性名=值
强调: 缺: 只能获得内联样式
优: 修改一个元素的样式时，又不影响其他元素。
何时使用: 只要修改一个元素的样式时，首选style.css属性名
强调:css属性名:
将css中的属性名去-，变驼峰
font-size fontSize
background-color backgroundColor
list-style-type listStyleType

内部/外部:
1. 获取最终应用到当前元素的计算后的样式
var style=getComputedStyle(elem)
style.css属性名
何时使用: 只要获得一个元素完整的样式，就用getComputedStyle
2. 修改样式表中的样式: 强烈不建议:
样式表对象模型:COM
1. 每个样式表都是一个sheet对象:
var sheet=document.styleSheets[i]
2. 每个选择器后的{...}，就是一个cssRule对象。
var cssRule=sheet.cssRules[i]
3. 访问每个cssRule中的一个样式属性:
cssRule.style.css属性