当网页被加载时,浏览器会创建页面的文档对象模型(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:不是标准的属性,但是所有浏览器都支持(找到某个元素下的所有元素的子节点)(不包括换行)
例
此时使用children,就简单多了
var lis = oUl.children;
console.log(lis.length);//3
parentNode:查找某个元素的父节点
nextElementSibling:找到某个元素的下一个兄弟节点
previousElementSibling:找到某个元素的上一个兄弟节点
firstElementChild:某个元素的第一个子节点
lastElementChild:某个元素的最后一个子节点
childNodes:找到某个元素的所有子节点(包括文本节点,换行……)
children:找到某个元素的所有文本节点(但其不是标准的属性)
offsetParent:最近的有定位属性的祖先节点(如果都没有定位,则走向body)
offsetLeft:外边框到有定位父级的内边框的距离
offsetTop:上边框到有定位父级的上内边框的距离(无offsetRight和offsetBottom)
例:计算一个标签到body顶部的距离
getBoundingClientRect();//返回值为一个对象;
获取某个元素的信息(高版本:left, top, bottom, right, width, height)但需要注意的是,获取的值会根据滚动条的变化而变化
元素个属性操作:
node.getAttribute(attr):获取元素指定属性名的属性值
node.setAttribute(attr,value);:设置元素指定属性名的属性值
node.removeAttribute(attr):删除元素指定属性
特点:可以操作行间自定义的属性
可以获取src\href等的相对地址
例:elem.getAttribute('key');//获取元素行间的属性
elem.setAttribute('key','value');//设置元素的行间属性值
elem.removeAttribute('key');//删除元素的行间属性
让一个不确定宽高的元素居中显示
元素的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查找:
2.按标签名查找:
3.按name查找:
4.按class查找:
用选择器查找:
1.仅查找一个符合条件的:
2.查找多个符合条件的元素:
注意: 按HTML查找和按选择器查找的差别:
总结: 今后,只要一个条件即可找到想要的元素,首选按HTML查找 只要查找条件复杂,都选按选择器查找