当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
Dom:document Object Model(文档对象模型)简单来说,就是document提供了一些API(接口),赋予开发者操作页面的能力
官方解释:是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
而对HTML的修改,很多要通过DOM对象的操作来实现的
一般分为三大关系:1、父级关系(父节点) 2、子级关系(子节点) 3、兄弟关系(兄弟节点)
按照节点类型分类(节点类型总共12个,但常用的有5个)
1、元素节点:就是标签,节点类型nodeType为1
2、document nodeType为9
3、文本节点:childNodes(获取某个节点下的所有节点包括文字、换行等) nodeType为3
4、注释节点 nodeType为8
5、属性节点:(attributes)
nodeValue:查看节点的属性值
nodeName:查看节点的属性名
children:不是标准的属性,但是所有浏览器都支持(找到某个元素下的所有元素的子节点)(不包括换行)
例
<ul id="ul1">
<li></li>
<li></li>
<li></li>
</ul>
var oUl = document.getElementById('ul1');
var lis = ul.childNodes;
console.log(lis.length);//7(包括换行),想要只找到li需要用到判断
for(var i=0; i<lis.length; i++){
if(lis[i].nodeType ===1){
alert(lis[i]是li)
}
}
此时使用children,就简单多了
var lis = oUl.children;
console.log(lis.length);//3
parentNode:查找某个元素的父节点
nextElementSibling:找到某个元素的下一个兄弟节点
previousElementSibling:找到某个元素的上一个兄弟节点
firstElementChild:某个元素的第一个子节点
lastElementChild:某个元素的最后一个子节点
childNodes:找到某个元素的所有子节点(包括文本节点,换行……)
children:找到某个元素的所有文本节点(但其不是标准的属性)
offsetParent:最近的有定位属性的祖先节点(如果都没有定位,则走向body)
offsetLeft:外边框到有定位父级的内边框的距离
offsetTop:上边框到有定位父级的上内边框的距离(无offsetRight和offsetBottom)
例:计算一个标签到body顶部的距离
<script>
window.onload = function(){
var oDiv3 = document.getElementById('div3');
function getTop(obj){
var iTop = 0;
while(obj){
iTop += obj.offsetTop;
obj = obj.offsetParent;
}
alert(iTop);
}
getTop(oDiv3);
};
</script
getBoundingClientRect();//返回值为一个对象;
获取某个元素的信息(高版本:left, top, bottom, right, width, height)但需要注意的是,获取的值会根据滚动条的变化而变化
oDiv3.getBoundingClientRect().top
元素个属性操作:
node.getAttribute(attr):获取元素指定属性名的属性值
node.setAttribute(attr,value);:设置元素指定属性名的属性值
node.removeAttribute(attr):删除元素指定属性
特点:可以操作行间自定义的属性
可以获取src\href等的相对地址
例:elem.getAttribute('key');//获取元素行间的属性
elem.setAttribute('key','value');//设置元素的行间属性值
elem.removeAttribute('key');//删除元素的行间属性
if(img.getAttribute('src')=='1mgs/1.jpg'){
alert('hah');
}else{
alert(0);
}
让一个不确定宽高的元素居中显示
元素的left= (可视区的宽 - 元素的宽)/2
元素的top = (可视区的高 - 元素的高)/2
可视区的宽:document.documentElement.clientWidth;
可视区的高:document.documentElement.clientHeight;
元素的宽高:
node.offsetWidth/ node.offsetHeight(计算边框 加padding)
node.clientWidth/node.clientHeight (不计算边框 加padding)
创建元素
1>document.createElement(tagName);//通过标签名的形式创建一个元素
2>parentNode.appendChild(childNode);//往一个节点里边添加一个子节点,注意是添加在最后
3>parent.insertBefore(childNode1,childNode2);//忘一个节点的指定子节点前边插入一个节点(注意:如果第二个参数为假的,那么会将某个元素添加到父元素的末位)
4>parentNode.removeChild(childNodes);//从一个节点中删除指定的子节点(注意:如果指定的子节点没有,那么就会报错)
obj.remove()//删除自身
5>parentNode.replaceChild(node,childNode) node是用来替换的节点,childNodes被替换的子节点(两个参数都必须写)
6>node.cloneNode(boolean)克隆一个节点
如果为true:克隆元素和元素包含的子孙节点
如果为false:克隆元素但不包含元素的子孙节点(事件是不会被克隆的)
注意:appendChild/insertBefore/replaceChild在操作一个已有的元素时,是将已有的元素移动,而不是复制一份进行操作
按HTML查找的四种方法
1.按id查找:
var elem=document.getElementById("id")
返回值: 一个元素
如果找不到返回null!
强调: 1. 只能在document上调用
2.按标签名查找:
var elems=parent.getElementsByTagName("标签名")
返回值: 多个元素的集合
如果找不到返回空集合
强调: 1. 可在任意父元素上调用
2. 不但找直接子元素,且在所有后代中查找
3.按name查找:
var elems=document.getElementsByName("name")
返回值: 多个元素的集合
如果找不到返回空集合
强调: 只能在document上调用
4.按class查找:
var elems=parent.getElementsByClassName("class")
返回值: 多个元素的集合
如果找不到返回空集合
强调: 1.可在任意父元素上调用
2.不但找直接子元素,且在所有后代中查找
3.只要元素的一个class名匹配,就能找到该元素
强调: 返回的集合都是动态集合
问题: 每次只能按一个条件查找
当查找条件复杂时,步骤很繁琐
解决: 用选择器查找:
用选择器查找:
1.仅查找一个符合条件的:
var elem=parent.querySelector("选择器")
返回值: 一个元素
如果找不到,返回null
2.查找多个符合条件的元素:
var elems=parent.querySelectorAll("选择器")
返回值: 多个元素的集合
如果找不到返回空集合
返回非动态集合: 实际存储属性值,即使反复访问集合,
也不会导致反复查找DOM树
强调: 1. 可在任何父元素上调用
2. 选择器只要相对于当前父元素内部即可
3. 选择器的兼容性,受制于当前浏览器的兼容性
注意: 按HTML查找和按选择器查找的差别:
1.返回值: 按HTML查找返回动态集合
按选择器查找返回非动态集合
2.效率: 首次查找: 按HTML查找效率高
按选择器查找效率低
3.易用性: 按HTML查找繁琐
按选择器查找简单
总结: 今后,只要一个条件即可找到想要的元素,首选按HTML查找 只要查找条件复杂,都选按选择器查找