DOM解读

DOM概念 - document object model：文档对象模型

操作文档的一套方法，document是一个对象，是dom的顶级对象，属于window的一个对象，并且可以说是最出色的一个儿子。

DOM元素的获取：

document.getElementById("id名字") //根据ID名字来获取标签；
document.getElementByTagName("标签名") //根据标签名来获取；
document.getElementByClassName("类名") //根据类名来获取；
document.getElementByName("name的属性值") //根据name属性来获取；
document.querySelector(css选择器) //根据CSS选择器来获取；
document.querySelectorAll(css选择器) //根据CSS选择器来获取所有满足条件的元素；

//3、5、6在IE中不兼容

DOM元素的操作：

内容操作：

元素.innerText //文本内容操作；
元素.innerHTML //带标签的内容操作；
元素.value //表单元素的内容操作（input类型）
元素.outText //包含自身的标签；
元素.outHTML //包含自身的标签；

属性操作：

元素.getAttribute("属性名") //获取属性的值，只能获取不能修改
元素.setAttribute("属性名","属性值") //修改属性的值，相当于重新设置
元素.removeAttribute("属性名") //删除属性

//也可以直接通过"."来操作元素.属性 = ""; //（通常不在标签上显示）

类名、样式操作：

元素.style.css(属性名) = "值"；//设置样式；
元素.className = "值"; //设置class类名；
元素.className = ""; //清空class类名；

DOM节点：

概念：组成HTML页面的所有内容，都叫做节点；

组成： //（元素、文本、注释、属性等节点）

元素节点：（主要介绍）

元素节点的获取：

元素.children //获取所有的子元素；
元素.firstElementChild //获取第一个子元素；
元素.lastElementChild //获取最后一个子元素；
元素.previousElementSibling //获取上一个兄弟元素；
元素.nextElementSibling //获取下一个兄弟元素；
元素.parentElement //获取父元素；

元素节点的操作：

var td = document.createElement('td'); //创建标签节点

插入节点：

父元素.appendChild(子元素) //在父元素最后追加；

父元素.insertBefore(新元素，旧元素) //将新的元素插入到指定的子元素前面；

删除节点：父元素.remove(子元素)；

复制节点：父元素.cloneNode(true)；

//有true就会连标签里面的内容也复制出来，没有true只会复制空标签；

替换节点：父元素.replaceChild(新元素，旧元素) //使用新的子元素替换掉旧的元素；

获取元素节点的样式:

window.getComputedStyle(元素)

元素.currentStyle (IE兼容)

封装之后：

function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele)[attr]
}else{
return ele.currentStyle[attr]
}
}
var div = document.getElementsByTagName("div")[0];
var w = getStyle(div,"width");
console.log(w);

获取元素位置：

元素.offsetLeft 元素.offsetTop //这个就是于offsetParent的距离

元素.offsetParent //获取到定位是参考的那个设置过定位的父元素；

获取节点：

元素.childNodes //获取所有子节点；
元素.parentNode //获取父节点；
元素.firstChild //获取第一个子节点；
元素.lastChild //获取最后一个子节点；
元素.previousSibling //获取上一个兄弟节点；
元素.nextSibling //获取下一个兄弟节点；

节点属性：

节点属性 nodeType节点类型元素节点1 文本节点3 注释节点8

nodeName节点名称元素节点大写的标签名文本节点#text 注释节点#comment

nodeValue节点的值元素节点null 文本节点文本内容注释节点注释的内容

获取/设置滚动过的距离

有文档声明的时候 document.documentElement.scrollTop document.documentElement.scrollLeft 没有文档声明的时候 document.body.scrollTop document.body.scrollLeft

//做一个回到顶部的效果

获取浏览器大小

document.documentElement.clientWidth document.documentElement.clientHeight //不包含滚动条的尺寸

获取html基本结构

document.documentElement是html标签 document.bodybody标签 document.headhead标签 document.titletitle标签

巴特西

DOM解读

DOM解读

DOM概念 - document object model：文档对象模型

DOM元素的获取：

DOM元素的操作：

内容操作：

属性操作：

类名、样式操作：

DOM节点：

概念：组成HTML页面的所有内容，都叫做节点；

组成： //（元素、文本、注释、属性等节点）

获取节点：

节点属性：

获取/设置滚动过的距离

获取浏览器大小

获取html基本结构

最新文章

热门文章