DOM进阶

一.HTML属性操作
（1）获取HTML属性值
（2）设置HTML属性值
1.获取HTML属性值
一般通过属性名，来找到属性对应的值
语法：obj.attr
obj是元素名，它是一个DOM对象，所谓DOM对象，指的是getElementById()、getElementsByTagName()等方法获取到的元素节点，
attr是是属性名，通过点运算符（.）获取它的属性值
例：获取静态HTML的属性值

例：获取文本框的值

例：获取单选框的值

getElementsByName()只限用于表单元素，它获取的是一个元素集合，也就是类数组
例：获取复选框的值

例：获取下拉菜单的值

2.设置HTML属性值
也是通过属性名来设置的
语法：obj.attr=“值”；
二.
HTML属性操作（对象方法）
语法：obj.getAttribute(“attr”)
obj.attr
这两种方式都可以用来获取静态HTML的属性值及动态DOM的属性值
自定义属性（指的是这个属性是用户自己定义的而不是元素自带的）时要用obj.getAttribute(“attr”)
例：获取固有属性值

1. setAttribute()设置元素某个属性的值
   语法：obj.setAttribute(“attr”,“值”)与obj.attr="值"是等价的
   obj是元素名，attr是属性名，setAttribute()有两个参数，一个是属性名，另一个是你要设置的属性值
2. removeAttribute()删除元素的某个属性
   语法：obj.removeAttribute(“attr”)
   例：
   3.hasAttribute()判断元素是否含有某个属性
   语法：obj.hasAttribute(“attr”)
   hasAttribute()方法返回一个布尔值，如果包含该属性，返回true,不包含返回false
   三.CSS操作属性
   获取CSS属性值
   设置CSS属性值
   1.获取CSS属性值
   语法：getComputedStyle(obj).attr
   obj表示DOM对象，attr表示CSS属性名，这里的属性名使用的是骆驼峰形例如font-size写成fontSize,border-bottom-width写成borderBottomWidth
   例：
   2.设置CSS属性值
   有两种方法 style对象和cssText()方法
   （1）style对象
   其实就是在元素的style属性来添加样式，设置的是行内样式
   语法：obj.style.attr=“值”
   说明：obj表示DOM对象，attr表示CSS属性名，采用的是骆驼峰型 变量中是不可以出现中划线的，中划线在javascript中相当于减号的意思
   例：
   复合属性：

我们获取的文本框其实是字符串，变量atttr和val都是字符串，所以不能使用obj.style.attr方式设置CSS属性，要使用obj.style[“attr”]这种方式
（2）cssText属性
也是在元素的style属性中添加的
语法：obj.style.cssText=“值”
obj是一个DOM对象，cssText的值是一个字符串
例如：oDiv.style.cssText="width:100px;height:80px;border:1px solid black;
注意：字符串中的属性名不再使用骆驼峰型写法而是使用平常的CSS写法
例：问题：获取CSS属性值不可以用obj.style.attr或obj.cssText.attr吗？为什么一定要用getComputedStyle?
getComputedStyle从名字上就可以看出来，计算后的样式，无论是内部样式还是行内样式最终获取的是根据CSS优先级计算后的结果，CSS优先级是非常重要的
四。DOM遍历
DOM遍历就是主要以当前所选元素为基点，查找元素的意思
查找父元素
查找子元素
查找兄弟元素
1.查找父元素
语法：obj.parentNode

凡是单数的就不用类数组
2.查找子元素
有两种方式来获得父元素中所有子元素或某个子元素

• childrenNodes、firstChild、lastChild
• children、firstElementChild、lastElementChild
  childrenNodes获取的是所有子节点，包括元素节点和文本节点
  children获取的是所有元素节点，不包括文本节点
  例：
  
  children.length获取的是元素节点的长度，结果为3
  childNode.length获取的是元素节点和文本节点的长度，文本节点是每一个li元素之间的换行，每一次换行都是一个空白节点，都当成文本节点来处理，所以就是7
  3.查找兄弟元素
  有两组方式
• previousSibling、nextSibling分别为查找前一个兄弟节点和查找后一个兄弟节点
• previousElementSibling、nextElementSibling分别为查找前一个兄弟元素节点和查找后一个兄弟元素节点
  previousSibling、nextSibling查找出来的可能是文本节点（一般是空白节点）
  如果只想查元素节点建议用 previousElementSibling、nextElementSibling
  
  五.
  innerHTML和innerText
  可以使用innerHTML属性很方便的获取和设置一个元素的内部元素，
  使用innerText属性获取和设置一个元素的内部文本
  例：获取innerHTML和innerText
  
  innerHTML获取的是元素内部的所有内容，innerText获取的仅仅是文本内容