DOM的使用

1. 修改:

      3样:

1. 内容: 3个属性:

1. 获取或修改原始HTML片段: 元素.innerHTML

2. 获取或修改纯文本内容: 元素.textContent

vs innerHTML

1. textContent去掉了内嵌的标签

2. textContent将特殊符号翻译为正文

以上两个获得的都是双标记中，开始标记和结束标记之间的内容

问题: 表单元素是单标记，没有结束标记，所以也就没有innerHTML和textContent

3. 获取或设置表单元素的内容: 表单元素.value

2. 属性: 3种:

1. 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。

获取属性值: 元素.属性名

修改属性值: 元素.属性名=值

强调: 只要修改标准属性，值必须是字符串。如果给的不是字符串，DOM会自动转为字符串。

判断是否包含指定属性: 元素.属性名!==""，说明包含。因为所有标准属性的默认值是""。

移除属性: 元素.属性名="";

只要把元素的属性值改为空字符串，则当前属性失效。

问题: 以上函数，只能操作字符串类型的HTML标准属性。无法操作bool类型的HTML属性:

2. 状态属性: 

什么是: HTML标准中规定的，值为bool类型的属性: disabled  selected   checked  multiple ...

特征: 所有状态属性在HTML中使用时，都不带=和属性值。加上，就起作用。去掉就失去作用。

如何操作:

不能用核心DOM的4个函数（getAttribute(), setAttribute(), hasAttribute(), removeAttribute()），因为核心DOM的四个函数只能操作字符串类型的属性

只能用.来访问，值都是bool类型:

比如:

禁用一个按钮: 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 选择的是被禁用的按钮

 

3. 自定义扩展属性:

什么是自定义扩展属性: HTML标准中没有规定的，程序员自发添加的属性。

何时: 2个典型用途:

1. 在客户端html元素上临时缓存数据

比如: data-target="id值";

2. 代替其他选择器，用来选择触发事件的元素，为元素绑定事件。

比如: data-toggle="dropdown"

如何:

1. 为元素添加自定义扩展属性:

行业规范:

<元素 data-自定义属性名="值"

2. 用自定义扩展属性作为查询条件，只能用属性选择器:

[data-属性名=值]

3. 获取或修改自定义属性的值:

不能用.访问自定义扩展属性:

因为自定义扩展属性是程序员在html标准之外，后天添加的自定义属性。则HTML DOM的元素对象中就不包含这些自定义扩展属性。

1. 可以用核心DOM: ——没有兼容性问题

元素.getAttribute("data-属性名")

元素.setAttribute("data-属性名",值)

为什么: getAttribute()每次都是去HTML代码中查找属性。

2. HTML5标准中规定: 有兼容性问题

可以 元素.dataset.属性名

其中dataset可以自动收集页面上所有data-开头的自定义扩展属性。这就是为什么自定义扩展属性名习惯上都要带data-前缀的原因！

 

 

3. 样式:

1. 修改内联样式:

每个元素都有一个style属性，代表html中开始标签中的style属性。

元素的style属性中又包含了所有css样式属性

修改元素对象的style属性中的css样式属性，等效于直接修改html中开始标签中的style=""

比如: 元素.style.backgroundColor="red"

等效于: <元素 style="

再比如: 显示隐藏:

元素.style.display="block"

等效于: <元素 style="display:block"

元素.style.display="none"

等效于: <元素 style="display:none"

强调: 所有带-的css属性，一律去横线，变驼峰命名。

比如: list-style-type  -> listStyleType

                     background-color -> backgroundColor

2. 获取样式：

问题: 元素.style仅包含内联样式，不包含样式表中的样式。所以，如果用元素.style.css属性，也只能获得内联样式，无法获得样式表中定义的样式。

解决: 获得计算后的样式:

什么是计算后的样式: 最终应用到这个元素上的所有样式的集合。

何时: 今后，只要获取样式，都要获取计算后的样式。

如何: 2步:

1. 先获得计算后的样式对象

var style=getComputedStyle(元素)

获得指定元素计算后的完整样式对象

强调: getComputedStyle是内置的全局函数，可直接使用！

返回值: 是一个包含所有css属性的巨大的对象

2. 才是从样式对象中提取想要的css属性:

var 属性值=style.css属性

强调: 计算后的样式，都是只读的。

因为样式的来源不确定，不确定有多少元素正在共享该属性。所以不允许擅自修改。以免牵一发而动全身。

总结: 想修改一个元素的css属性:

元素.style.css属性=值

想获取一个元素的css属性:

getComputedStyle(元素).css属性

 

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

解决: 当批量修改样式时，用className修改是最划算的！

 

总结:

修改:

1. 内容:

1. 原始html 片段: .innerHTML  

    2. 纯文本: .textContent  

    3. 表单元素的内容: .value

2. 属性:

1. HTML标标准属性:

1. 核心DOM: .getAttribute()

.setAttribute()

.hasAttribute()

.removeAttribute()

2. HTML DOM: 也可用.改

2. 状态属性: 只能用.改

3. 自定义扩展属性:

定义: <元素 data-自定义属性名="值"
        获取或修改:

  元素.getAttribute("data-属性名")

            元素.setAttribute("data-属性名","值")

HTML5: 元素.dataset.属性名

3. 样式:

1. 修改内联样式: 元素.style.css属性="值"

2. 获取: getComputedStyle(元素).css属性