DOM复习Day2-----修改

今天复习内容如下:

修改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属性