DOM学习(day2)

DOM修改操作

一.修改:3种
1.内容:3种:
  (1).获取或修改元素开始标签到结束标签之间的原始HTML内容:
    元素.innerHTML在这里插入代码片
     a.获取内容时:获得原始的HTML内容,不做任何改动
     b.修改内容时:会被浏览器编译为人能看懂的内容
  (2).获取或修改元素开始标签到结束标签之间的纯文本内容:
     元素.textContent
      a.获取内容时:获取纯文本内容,去掉内嵌标签,将特殊符号转义为正文.
       b.修改内容时:不会被浏览器编译,即使内部包含html标签或特殊符号,也不会被编译,而是原样显示在页面上----这是我们不想要的.
总结:将来innerHTML用的会很多.
只有在获取元素内容时,希望去掉内嵌标签,翻译特殊符号为正文时,才被迫选择textContent
   (3).如何获得表单元素的值呢?
    a.不能用innerHTML或textContent,因为这类元素没有结束标签,自然也没有内容
    b.应该用:表单元素.value
    c.比如:可获得文本框中用户输入的内容,可以获得select下拉列表中用户选中项的值等…

2.属性:3种
  (1).值为字符串类型的HTML标准属性
     a.HTML标准中规定的值为字符串类型的属性
     b. 比如: title="", href="", src="", id="", name="", …
    c. 2种方式:
       1). 旧核心DOM方法: 4个方法:
        i. var 属性值=元素.getAttribute(“属性名”)
         获取 属性
       ii. 元素.setAttribute(“属性名”,“新属性值”)
         修改 属性
       iii. var bool=元素.hasAttribute(“属性名”)
         判断是否 有 属性
      iv. 元素.removeAttribute(“属性名”)
移除 属性
    2). 新DOM中提供了HTML DOM简写:
     i. HTML DOM是对常用DOM操作进行的简化
    ii. HTML DOM已经将所有HTML标准属性都放在了内存中元素对象上！可以直接用.就能访问标准属性。只不过，暂时没有出现在HTML开始标签中的属性，默认值为""
    iii. 比如:
获取元素的属性值: 元素.属性名
修改元素的属性值: 元素.属性名=“属性”
判断是否包含属性: 元素.属性名!==""
移除元素的属性: 元素.属性名=""
   iv. 特殊: class属性:
因为ES标准中已经规定class是关键词！所以DOM中不能再用class表示别的意思。所以DOM中的class属性被迫更名为className
所以: 今后要修改class属性: 元素.className=“xxx”
修改className等效于修改HTML中的class属性
(2). 值为bool类型的HTML标准属性
   a. 所有不用写=，只要放在元素上就起作用，从元素上拿掉，就不起作用的属性，值都是bool类型
  b. 比如: disabled checked selected
  c. 如何:
    1).用旧核心DOM改麻烦：
比如:
     i. 如果选中: chb.setAttribute(“checked”,“任意值”)
其中，只要将checked属性添加到元素上，就起作用，而不用管属性值是什么
     ii.如果取消选中: 不能用setAttribute(“checked”,“false”)
因为单纯修改checked的属性值是无法启用元素的。必须彻底移除checked属性才能起作用。所以:
chb.removeAttribute(“checked”)
   2). 将来只要操作bool类型的属性，最好用HTML DOM打点操作
     i. 选中: chb.checked=true
     ii. 取消选中: chb.checked=false
(3). 自定义扩展属性:
  a. HTML标准中没有规定的，程序员自发添加的自定义属性.
  b. 何时:
   1). 代替其他选择器专门选择触发事件的元素时
    i. 其他选择的弊端：
    id选择器只能选一个元素
元素选择器也不好，因为将来人家做HTML页面的人，实现一种效果，不一定使用什么元素呢！
class选择器也不好，class专门定义样式的！跟css本毫无关系！如果强行用class选择触发事件的元素，将来很可能在维护时，被当做没用的class删掉，或者被改名！
    ii. 今后，推荐要触发事件的元素上都定义上自定义属性，查找触发事件的元素时，使用[自定义属性]属性选择器查找。
  2). 临时在网页缓存业务数据备用时
    i. 减少请求次数，提高网页加载速度！
  c. 如何:
    1). 如何添加自定义扩展属性:
     <元素 自定义属性名=“属性值”>
    2). 获取和修改自定义扩展属性值
    i. 不能用.属性名方式！
因为DOM标准不可能预知程序员将来要自定义的属性是什么，所以在内存中的元素对象上，就没有自定义扩展属性。所以不能用.属性名方式访问
    ii. 只能用旧核心DOM四个方法访问:
元素.getAttribute(“自定义属性名”)
元素.setAttribute(“自定义属性名”, “属性值”)
元素.hasAttribute(“自定义属性名”)
元素.removeAttribute(“自定义属性名”)
因为Attribute代表的就是HTML开始标签中的属性，自然四个方法都可直接操作HTML开始标签中的任何标准和非标准的属性。
3). HTML5中新规定:
  i. 所有自定义扩展属性都必须有data-前缀:
比如: <img data-mg=“xxx.png” data-lg=“xxx.png”
   ii. 只要加了data-前缀的自定义扩展属性都可以:
元素.dataset.自定义属性名 方式访问
  iii. 其中: dataset会自动收集所有data-开头的自定义属性。
3. 样式: 2种:
  (1). 获取或修改内联样式:
    a. 元素.style.css属性名=“属性值”
    b. 相当于之前手工: <元素 style=“css属性:属性值”>
    c. css属性名如果包含-，必须去横线变驼峰！
     比如: background-color -> backgroundColor
     list-style-type -> listStyleType
    d. css属性名涉及大小，长度，位置，必须带px单位！
  (2). 其实获取元素的样式不能用.style!
    a. 因为.style只代表内联样式，又因为将来几乎所有样式都写在样式表中，内联样式少的可怜，所以，用.style只能获得少的可怜的内联样式，无法获得完整的样式。
    b. 今后，只要获得完整样式，都必须获得计算后的样式
     1). 计算后的样式: 最终应用到这个元素上的所有样式的集合。且将相对单位都换算成绝对单位。
    2). 如何获得: 2步：
    i. 先获得计算后的完整样式:
    var style=getComputedStyle(元素对象)
   ii. 再从完整样式中提取自己想要的个别css属性
                        style.css属性
    3). 强调: 计算后的属性都是只读的！
因为计算后的属性来源不确定，所以怕牵一发而动全身，所以，禁止修改！
今后修改属性，一律使用.style的方式，用内联样式覆盖其它地方的样式！

	*强调: 凡是从页面上获得的都是字符串，执行算数计算之前必须强行转为number类型，才能执行计算。*

总结: 修改：

1. 修改内容：
   (1). 元素.innerHTML
   (2). 元素.textContent
   (3). 表单元素.value
2. 修改属性:
   (1). 字符串类型的HTML标准属性
   a. 旧核心DOM方法:
   1). 元素.getAttribute(“属性名”)
   2). 元素.setAttribute(“属性名”,“新值”)
   3). 元素.hasAttribute(“属性名”)
   4). 元素.removeAttribute(“属性名”)
   b. 新HTML DOM方法: 元素.属性名
   (2). bool类型的HTML标准属性
   只有一种修改方法: 元素.属性名
   (3). 自定义扩展属性:
   a. 定义时: data-自定义属性=“值”
   b. 获取时: 元素.getAttribute(“data-自定义属性”)
   c. 修改时: 元素.setAttribute(“data-自定义属性”,“新值”)
   d. HTML5简写: 元素.dataset.自定义属性名
   e. 查找: 属性选择器: [data-自定义属性=值]
3. 修改样式:
   (1). 修改样式: 元素.style.css属性=“值”
   (2). 获取样式: var style=getComputedStyle(元素对象)
   style.css属性