DOM（二）——修改内容、属性、样式

一、修改内容

(1)获取或修改元素开始标签到结束标签之间的原始的HTML内容（双标签）

元素对象.innerHTML

• 获取元素内容时: innerHTML原样返回HTML代码中的html内容，不做任何加工
• 修改元素内容时: innerHTML会先将字符串内容交给浏览器解析，然后将解析后的可以给人看的内容显示在页面上

示例：

<h3 id="msg">来自<a href="#">&lt;&lt;新华社&gt;&gt;</a>的消息</h3>
<h3 id="msg2"></h3>
<script>
	  var h3Msg=document.getElementById("msg");
	  var h3Msg2=document.getElementById("msg2");
	  
	  //想获取msg的内容
	  console.log(h3Msg.innerHTML)    
	  
	  //想修改msg2内容
	  var str=`来自<a href="#">&lt;&lt;新华社&gt;&gt;</a>的消息`; 
	  h3Msg2.innerHTML=str;
</script>

运行结果：

控制台：

(2) 获取或修改元素开始标签到结束标签之间的纯文本内容（双标签）

元素对象.textContent

• 获取元素内容: textContent去掉内嵌的标签，并将特殊符号转为正文，然后在返回修改后的内容。
• 修改元素内容: 不会将字符串内容交给浏览器解析，而是直接保持字符串的原样内容输出

示例：

<h3 id="msg">来自<a href="#">&lt;&lt;新华社&gt;&gt;</a>的消息</h3>
<h3 id="msg3"></h3>
<script>
	  var h3Msg=document.getElementById("msg");
	  var h3Msg3=document.getElementById("msg3");
	  
	  //想获取msg的内容
	  console.log(h3Msg.textContent) 
	  
	  //想修改msg3的内容
	  var str=`来自<a href="#">&lt;&lt;新华社&gt;&gt;</a>的消息`; 
	  h3Msg3.textContent=str;  
</script>

运行结果：

控制台：

(3)获取或修改表单元素的内容（单标签）
绝大多数表单元素都是input元素，而input元素是单标记，没有结束标签，所以不能使用innerHTML和textContent来获取或修改内容，故用value代替：

表单元素.value

示例：

<input type = "text"><button id = "btn">百度一下</button>
<script>
    //1.获取要绑定事件的元素
    var btn = document.getElementById("btn");
    //2.给button绑上事件
    btn.onclick = function() {
        //3.获取文本框内容
        var text = this.previousElementSibling;
        //表单元素.value获取
        var str = text.value;
        //4.文本框内容不为空时搜索文本框内容
        if (str !== '') {
            console.log(`搜索${str}……`);
        }
    }
</script>

二、属性

1.字符串类型的HTML标准属性

HTML标准中规定的，属性值为字符串的属性，例如class, id, name, value, href, title, ...

旧DOM方法：
i. 获取属性值：元素对象.getAttribute("属性名")
ii. 修改属性值：元素对象.setAttribute("属性名", "新值")
iii. 判断是否包含某个属性：元素对象.hasAttribute("属性名")
iv. 移除属性：元素.removeAttribute("属性名")

新DOM方法

新的HTML DOM已经将所有HTML标准属性，提前保存在了内存中的元素对象身上。
以后，只要操作HTML标准属性，就都可用.属性名方式操作

①获取属性值：
元素对象.属性名

②修改属性值：
元素对象.属性名=属性值

③判断是否包含某个属性：
元素.属性名!=="" 说明包含该属性

④移除属性：
元素对象.属性名=""

示例：

<a id="a1" href="http://www.baidu.com" title="前往baidu">go to baidu</a>
<script>
    var a1=document.getElementById("a1");
    //想获得a1的href属性
    // console.log(a1.getAttribute("href"))
    console.log(a1.href);

    //修改a1的title属性
    // a1.setAttribute("title","Welcome tmooc")
    a1.title="Welcome tmooc";

    //判断a1上是否包含target属性
    // console.log(a1.hasAttribute("target"));//false
    console.log(a1.target!=="");//false

    //移除id属性
    // a1.removeAttribute("id");
    // delete a1.id;//错误
    a1.id="";
</script>

特例: class属性

ES6基础语法中已经将class定义为关键字，有特殊功能，专门用于创建一种类型。
所以，DOM标准就不能重复使用"class"这个属性名。

在DOM中只要用.获取或修改元素的class属性值，都必须换成.className
操作.className，就是在操作页面上元素的class属性

2.bool类型的HTML标准属性

HTML标准中规定的，不需要写属性值，只靠属性名就可发挥作用的属性

例：
1)checked: 用于标记一个checkbox是否被选中
2)disabled: 用于标记一个表单元素是否被禁用

能用新HTML DOM来操作，且属性值必须是bool类型的true或false

元素.属性名

示例：

<input id="chb" type="checkbox">同意</br>
<button id="btn" disabled>注册</button>

<script>
//DOM4步
//1.查找触发事件的元素： 
//本例中: 点击CheckBox影响按钮的启用禁用状态
var chb = document.getElementById("chb");
//2. 绑定事件处理函数
//当表单元素的内容或状态改变时自动触发
//本例中，当CheckBox的选中状态被改变时，自动执行
chb.onchange = function() {
    //3. 查找触发事件的元素
    //本例中，选中checkbox影响button的启用和禁用状态
    var btn = document.getElementById("btn");
    //4. 修改元素
    btn.disabled = !this.checked;
}
</script>

拓展示例：全选、取消全选

html+css：

<style>
/*首先必须是input
  其次必须是选中的*/
input:checked {
    box-shadow:0 0 5px red;
}
/*首先必须是input
  其次必须是未选中的*/
input:not(:checked) {
    box-shadow:0 0 5px green;
}
</style>

<h2>管理员列表</h2>
<table border="1px" width="500px">
    <thead>
    <tr>
        <th><input type="checkbox"/>全选</th>
        <th>管理员ID</th>
        <th>姓名</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox"/></td>
            <td>1</td>
            <td>Tester</td>
            <td>修改 删除</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>2</td>
            <td>Manager</td>
            <td>修改 删除</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>3</td>
            <td>Analyst</td>
            <td>修改 删除</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>4</td>
            <td>Admin</td>
            <td>修改 删除</td>
        </tr>
    </tbody>
</table>

css中已经提供了专门的选择器，用于匹配处于不同状态的元素——状态伪类，比如
i. 选择选中的元素: :checked
选择未选中的元素: :not(:checked)

ii. 选择禁用的元素: :disabled

---

dom树：

js:

<script>
/*点全选，修改tbody中所有checkbox*/
//1.查找触发事件的元素
// table > thead 下的input
var chbAll = document.querySelector('table > thead input');
//2.绑定事件处理函数
chbAll.onclick = function() {
    //3.查找要修改的元素
    // 本例中修改tbody下每行第一个td中的input
    var inputs = document.querySelectorAll('table>tbody>tr>td:first-child>input');
    //4.修改元素
    //遍历inputs中每个checkbox
    for (var chb of inputs) {
        chb.checked = chbAll.checked;
    }
}

/*点tbody中每个checkbox，也会影响表头中的全选*/
//1.查找触发事件的元素
//本例中:查找tbody下每行第一个td中的input
var inputs = document.querySelectorAll('table>tbody>tr>td:first-child>input');
//2.绑定事件处理函数
for (var input of inputs) {
    input.onclick = function() {
        //3.查找要修改的元素(chbAll已找到)
        //4.修改元素
        //先查找tbody下有没有未选中的checkbox
        var unchecked = document.querySelector("table>tbody>tr>td:first-child>input:not(:checked)");
        if (unchecked == null)
            //如果没找到未选中的checkbox，则chbAll就选中
            chbAll.checked = true;
        else 
            //如果找到未选中的checkbox，则chbAll就不选中
            chbAll.checked = false;
    }
}
</script>

结果：

3.自定义属性(data-xx)

HTML标准中没有规定的，程序员根据自身的需要，自发添加的自定义属性

好处:

1. 不受样式和标签名修改的影响.
   

2. 在客户端临时缓存部分业务数据，避免反复向服务器发送请求。
   

1). 在HTML中手动添加:

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

2). 在js中访问自定义扩展属性
tip：不能用.访问！因为自定义属性是后天程序员自发添加的，HTML标准中没有规定。所有在内存中的元素对象上，不包含自定义扩展属性！

i.用旧核心DOM访问:

元素.getAttribute("自定义属性名")
元素.setAttribute("自定义属性名", "属性值")

ii. 在新版的HTML5标准中，有新的规定:
①HTML中，所有自定义属性名必须以data-开头！
<元素 data-自定义属性名="属性值">

②如果在html中以data-开头，则js中:
元素.dataset.自定义属性名
强调: 在js中使用dataset时，一定不要加data-前缀

---

示例：获取自定义属性，点击一次次数+1

<button data-n="0" data-btn>click me</button>
<script>
  //想点按钮，给n属性的值+1
  //DOM 4步
  //1. 查找触发事件的元素
  //本例中: 查找带有data-btn属性的一个按钮
  var btn = document.querySelector("[data-btn]");
  //2. 绑定事件处理函数
  btn.onclick = function () {
    //3. 查找要修改的元素
    //本例中，就是改自己this，不用查找，
    //4. 修改元素
    //4.1 获取自己身上data-n属性中保存的旧点击次数，转为整数
    var n = parseInt(this.getAttribute("data-n"));
    //或this.dataset.n
    n++; //4.2 次数+1
    this.setAttribute("data-n", n) //4.3 再放回去
    //或this.dataset.n=n;
  }
</script>

三、样式

(1)修改内联样式

元素.style.css属性="属性值" //记得加单位

相当于手工在元素上添加：(优先级最高)

<元素 style="css属性:属性值">

所有带-的css属性名必须去-变驼峰

比如:

font-size ->  fontSize
background-color -> backgroundColor
list-style-type -> listStyeType

style.css只能获得元素的内联样式！

示例：

<style>
	 h1{
	   background-color:red;
	 }
</style>

<h1 id="h1" style="color:yellow">Welcome</h1>
<p>Welcome to my web site</p>

<script>
    var h1=document.getElementById("h1");
    console.log(h1.style.color);
	console.log(h1.style.backgroundColor)
</script>

(2)获取样式getComputedStyle

使用元素.style.css属性的方式，只能获取内联样式。无法获得内部或外部样式表中层叠或继承来的css属性值

所以，想获得元素任意css属性值，都要获得计算后的样式（最终应用到一个元素上的所有css属性的总和）。

步骤：
i. 先获得计算后的样式对象:
var style=getComputedStyle(元素对象)
getComputedStyle是浏览器内置函数，不能改名

ii. 从完整的样式对象中只提取个别css属性
style.css属性

计算后的样式对象中的所有css属性都是只读的。

示例：

<style>
	 h1{
	   background-color:red;
	 }
</style>

<h1 id="h1" style="color:yellow">Welcome</h1>
<p>Welcome to my web site</p>

<script>
    var h1=document.getElementById("h1");

    //1. 先获得h1计算后的完整样式
    var style=getComputedStyle(h1);
    console.log(style);

    //2. 再从完整样式对象中获取个别css属性
    console.log(style.color);
    console.log(style.backgroundColor);
    
    //3. 试图修改，不能修改，只读
    style.backgroundColor="red";
</script>

总结

• 修改一个元素的css属性，首先.style，因为内联样式优先级最高！且当前元素独有！

• 获取一个元素的任意css属性值时，只能用getComputedStyle();

3.批量修改

如果修改多个css属性，只要批量设置一个元素的多个css属性，都用**class代替.style**