dom知识点总结

当网页被加载时，浏览器会创建页面的文档对象模型（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查找   只要查找条件复杂，都选按选择器查找