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
网友评论