核心DOM元素的查找、查看及修改

核心DOM元素的查找查看及修改

一.核心DOM元素查找

要用js对某个元素进行操作是先要查找到该元素，在核心DOM中一般有以下几种元素查找的方式
1.document.getElementById（"id名称"）只能返回一个元素

2.document.getElementsByName（"name名称"）[索引号]
3.document.getElementsByTagName（"标签名称"）[索引号]
4.document.getElementsByClassName（"类名称"）[索引号]
以上三种方法返回伪数组类型的数据
伪数组：具有数组的结构特点和相关属性但不具备数组的操作方式(只有一个符合也会返回数组类型)
所以在使用以上三种方法的时候若只对一个元素进行操作，需要添加索引号找到对应的元素

二.获取元素属性

先通过元素查找得到对应的元素，然后
1.getAttribute方法
元素.getAttribute("元素属性")
2.点符号法
元素.元素属性
若通过以上两种方法获取元素样式获取的样式不全面，只能获取行内样式，无法获取内部和外部样式，可通过以下方式获取，以查找到的元素是div为例

if(div.currentStyle){/*如果元素拥有这个属性说明是低版本IE*/
        /*针对IE浏览器，使用currentStyle属性获取所有和当前元素相关的属性*/
        console.log(div.currentStyle);
    }else{
        console.log(getComputedStyle(div).backgroundColor);
        console.log(getComputedStyle(div).width);
        console.log(getComputedStyle(div).height);
           /*getComputedStyle是windows对象*/
    }

三.添加元素样式

先通过元素查找找到要操作的元素
1.setAttribute方法
元素.setAttribute("style"，"样式")
用此方法样式会覆盖，想要保留要先获取之前的样式再累加到新样式上，新样式的开头加分号
eg:

 var style =div.getAttribute("style");
    /!*加上之前的样式，样式之前加；*!/
    div.setAttribute("style",style + ";background-color:yellow");

2元素.setAttribute(class,"样式")
样式类也会覆盖,用1的方法获取原类名，新类名之前要加空格
eg:

var class1 = div.getAttribute("class");
    div.setAttribute("class",class1 + " wxy");

3.元素.style.样式名 = "样式值"
一次添加一个！会覆盖之前的样式，若想不覆盖之前的样式用方法1的方式

4.元素.style.csstext = "多个样式值"
一次添加多个，要保留之前的style，等号改为+=号，样式之前加分号

5.元素.className = "类名称"
保留之前的class， 等号改为+=号，新类名称前加空格，此种方法可以在内部样式中先写好新的样式，直接调用类名，可添加多个样式