DOM

document对象

获取元素节点方法

getElementsByName("name")

返回带有指定名称的对象集合。

getElementsByTagName（"标签名"）

返回带有指定标签名的对象集合。

getElementById（"id"）

返回对拥有指定 id 的第一个对象的引用。

getElementsByClassName("classname")

• 可以根据class属性值对象集合，
• 但是该方法不支持IE8及以下的浏览器

querySelector("css选择器")

根据CSS选择器去页面中查找对象

• querySelector()只会返回一个符合条件的元素

• 如果符合条件的元素有多个，它只会返回第一个

    var box2 = document.querySelector("#box2");
  

querySelectorAll()

根据CSS选择器去页面查找一组元素

• 和querySelector()功能类似，都可以根据CSS选择器去查找

• 不同的是querySelectorAll()它会将所有符合条件的元素封装到一个数组中返回，

• 即使查询到的只有一个，也会返回数组

   var boxArr = document.querySelectorAll("#box");
  

createElement()

创建一个指定元素节点对象

var gzLi = document.createElement("li");

createTextNode()

可以根据文本内容创建一个文本节点对象

var gzText = document.createTextNode("广州");

document对象属性

body

获取页面中body元素

相当于 document.getElementsByTagName("body")[0]

document.body;  

documentElement

获取页面中的根元素（html元素）

document.documentElement;

all

获取页面中所有的元素，返回的是一个数组
相当于 document.getElementsByTagName("*")

---

DOM Element元素对象

属性

元素节点.nodeValue

dom.nodeValue;

元素节点.nodeName

获取节点值

元素节点.nodeType

获取节点类型

元素节点.innerHTML

可以用来获取标签内部的文本内容

元素节点.innerText

可以用来获取标签内部的文本内容，它会自动去除HTML标签

节点操作

childNodes

dom.childNodes;

• 根据DOM标准，空白的内容也会被当成子节点
• 注意在IE8及以下的浏览器中没有将空白当成子节点
• 所以IE8中childNodes不会返回空白的节点
• 返回的所有子节点（包括文本），代码中的换行空白部分也会被当成一个节点

children

获取所有的子元素（不包含文本）

firstChild

获取它的第一个子节点(包括文本)

firstElementChild

firstElementChild不支持IE8及以下的浏览器

获取它的第一个子节点(不包括文本)

parentNode

获取父节点

previousSibling

获取它的前一个兄弟节点

会将空白的文本当前兄弟节点

appendChild()

向父节点中添加新的子节点

父节点.appendChild(子节点)

boxDom.appendChild(imgDom);

insertBefore()

在指定的子节点前插入新的子节点

父节点.insertBefore(新的节点,旧的节点);

    var city = document.getElementById("city");
                    
    city.insertBefore(gzLi , bj);

replaceChild()

使用指定的子节点替换已有的子节点

父节点.replaceChild(新的节点,旧的节点);

removeChild()

删除一个子节点

父节点.removeChild(子节点);

实际上使用innerHTML也可以完成页面中元素的增删改查，而且比我们这种常规方式更加简单（最好只添加文本节点，添加元素节点的话其他的元素也会被重新添加）

---

CSS样式操作

修改元素样式

元素.style.样式名 = 样式值;

• 注意样式名中带有-不能直接写

• background-color

• border-width

• border-left-style

• 这种带有-的样式名，需要将其修改为驼峰命名法，然后在操作,将-去掉，然后将-后的字母改大写

• backgroundColor

• borderWidth

• 通过style修改的样式都是元素的内联样式，

• 而内联样式的优先级最高的，所以我们通过JS修改的样式往往会立即显示

• 但是如果在样式后添加了!important，则无法通过内联样式进行覆盖

• 所以我们要尽量去避免使用!important

读取元素样式

元素.style.样式名

• 通过style只可以读取内联样式，不能读取样式表中的样式
• 如果没有内联样式则不能读取

元素.currentStyle.样式名

• 读取元素的当前生效的样式
• currentStyle只有IE浏览器支持，在其他的浏览器中不好使

getComputedStyle()

• 这个方法就是window的方法，可以直接使用
• 参数：
  • 1.要获取样式的元素对象
  • 2.要获取的元素的伪类，如果不需要可以传null
• 这个方法会返回一个对象，在这个对象中封装了元素的当前样式
• 注意此方法IE8及以下的浏览器不支持
• 通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改
• 如果需要修改，则需要使用style。

自定义用来获取任意浏览器中任意元素的当前样式

function getStyle(obj , name){

//判断浏览器中是否含有getComputedStyle这个方法
if(window.getComputedStyle){
//支持正常的浏览器
return getComputedStyle(obj,null)[name];
}else{
//只支持IE
return obj.currentStyle[name];
}

* 参数：
* obj 要获取样式的元素
* name 要获取的样式的名字
* 
* 在读取元素的样式时，如果元素没有设置样式，
* 火狐、Chrome等浏览器会自动计算元素的样式值
* 而IE浏览器，有使用不会自动计算，而是返回默认值，比如宽度会返回auto

---

属性操作

元素节点.属性名

获取标签对应属性的内容

dom.src;

class属性 需要用classname代替，因为class是js中的保留字

dom.classsname

getAttribute()

获取属性值

var attrVal = boxDom.getAttribute("class")

setAttribute()

把指定属性设置或修改为指定的值。

boxDom.setAttribute("class", "box");

removeAttribute（）

移除属性值

boxDom.removeAttribute("class");

classList 操作class属性

• 在HTML5 API里，页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类（即class属性值）。
• 使用classList，程序员还可以用它来判断某个节点是否被赋予了某个CSS类。

length

div01.classList.length

add

div01.classList.add("box-blue");

remove

div01.classList.remove("box-green");

contains

检查是否包含指定class名

div01.classList.contains("box-green")

item

返回指定角标的class名

div01.classList.item(2)

toggle

如果class属性存在指定了类名删除该类名，否则添加

div01.classList.toggle("box-green")

dataset设置/读取自定义属性

div01.dataset.goodsDesc

H5中（data-goods-desc）      js中（div01.dataset.goodsDesc）

只可以传递字符串或数字

一般存储一个json字符串，然后获取到转换为json对象

---

获取元素的宽高/偏移量

clientWidth/clientHeight

• 获取元素的可见宽度和高度

• 获取到的值包括元素的内容区和内边距

• 这些属性都是只读，只能看不能修改

  document.documentElement.clientHeight;//获取视口高度
  

offsetWidth/offsetHeight

• 可以用来获取元素整个的可见框的大小
• 它获取到的值，包括内容区、内边距和边框

getBoundingClientRect()

返回元素的大小及其相对于视口的位置信息集合。

var rect = boxDom.getBoundingClientRect();//返回元素的大小及其相对于视口的位置信息集合。

rect.top;//元素顶部距离视口顶部的距离
rect.bottom;//元素底部距离视口顶部的距离
rect.left;//元素左边框距离视口左边框的距离
rect.right;//元素右边框距离视口右边框的距离
rect.height;//元素高度
rect.width;//元素宽度

offsetParent

• 可以返回当前元素的定位父元素
• 定位父元素，指离当前元素最近的开启了定位的祖先元素
  如果所有的祖先元素都没有开启定位，则返回body

offsetLeft（水平偏移量）/offsetTop（垂直偏移量）

• 获取当前元素相对于其定位父元素的偏移量

scrollHeight

• 可以获取元素滚动区域的高度

scrollWidth

• 可以获取元素滚动区域的宽度

    alert(box1.scrollWidth);
  

scrollTop

• 垂直滚动条滚动的距离

scrollLeft

• 水平滚动条滚动的距离

判断垂直滚动条是否滚动到底

scrollHeight - scrollTop = clientHeight

判断水平滚动条是否滚动到底

scrollWidth - scrollLeft = clientWidth