DOM学习总结

初识DOM

DOM是Document Object Model，即是文档对象模型。

文档对象模型有三种节点关系。分别是父节点，兄弟节点，子孙节点。

DOM节点类型

元素节点            　　Node.ELEMENT_NODE(1)
属性节点            　　Node.ATTRIBUTE_NODE(2)
文本节点            　　Node.TEXT_NODE(3)
CDATA节点             Node.CDATA_SECTION_NODE(4)
实体引用名称节点    　　 Node.ENTRY_REFERENCE_NODE(5)
实体名称节点        　　Node.ENTITY_NODE(6)
处理指令节点        　　Node.PROCESSING_INSTRUCTION_NODE(7)
注释节点            　 Node.COMMENT_NODE(8)
文档节点            　 Node.DOCUMENT_NODE(9)
文档类型节点        　　Node.DOCUMENT_TYPE_NODE(10)
文档片段节点        　　Node.DOCUMENT_FRAGMENT_NODE(11)
DTD声明节点            Node.NOTATION_NODE(12)

nodeType

nodeType查看节点类型
Object.nodeName查看节点属性名
nodeValue：查看值

Object.childNodes：获得元素下的所有子节点集合：
children：获得元素的子节点集合：

Object.attributes查看节点的属性，比如说ID

parentNode

object.parentNode

nextElementSibling和previousElementSibling

同级

lastElementChild和firstElementChild

子元素节点

offsetParent

定位
/适用条件就是 父级有定位，本级也要有定位，并且设置可width与height/
/指向最近的有定位属性的祖先节点，如果都没有，则指向body/

offsetLeft和offsetLeftTop

offsetLeft·：当前元素（子元素）的外边框到定位父元素的内边框的距离
offsetTop

加边框的绝对位置

parseInt(getComputedStyle(elem).borderLeftWidth)//需要添加上边框最后再减去；

getBoundingClientRect

获取某个元素相对于视窗的位置集合。返回值是一个对象

元素的属性操作

获取元素的属性。获取行间属性，无法获取自定义属性
elem.getAttribute('key');
设置元素的属性
elem.setAttribute('key'，'value');//是可以凭空进行设置的
删除元素的行间属性
elem.removeAttribute('key');

img.getAttribute('src';//这里输出的值就是可预测的

元素的尺寸

获取元素的宽高，文字溢出不会被计算，都不支持padding值

elem.clientWidth（获取某个元素的宽高）：不计算边框，加上padding
elem.offsetHeight（获取某个元素的宽高）：计算边框，加上padding

document.documentElement？指的是html

document.documentElement.clientWidth//获取可视区域的宽
document.documentElement.clientHeight//获取可视区域的高

使得一个不确定宽高的元素居中

        div.style.left = (document.documentElement.clientWidth - div.offsetLeft)/2 - parseInt(getComputedStyle(div).width)/2+'px';

元素的操作

document.createElement('标签的名字'); //创建元素
parentNode.appendChild(childNode);//向元素末尾添加一个子元素
parentNode.inserBefore(newElement，nowElement)//向nowElement元素之前添加newElement元素。如果第二个元素为假，那会添加到元素的末位
elem.removeChild(DeleteChildElement)；//删除元素。如果元素并不存在，那么将会报错。

elem.remove();//把这个元素给删除掉了

elemParent.replaceChild(替换成什么,被替换)；//是替换，并没有分身。

element.cloneNode(Boolean);//克隆。克隆之后还没有添加到body上面去.如果Boolean是false，不会克隆子元素，事件不会被克隆。

appendChild/insertBefore/replaceChild在操作一个已有的元素时， 是将已有的元素移动，而不是复制一份进行操作。

表格的操作

//get是table的id
    /*获取头部*/
    get.tHead.style.backgroundColor = 'yellow';
    /*获取底部*/
    get.tFoot.style.backgroundColor = 'blue';
    /*tBodies的内容是一个集合，可有很多tbody*/
    get.tBodies[1].style.background = 'red';


    /*获取tr.tr表示的是一行，rows表示的是一行.rows是一个复数*/
    get.rows[1].style.backgroundColor = 'green';


    /*cells[]单元格*/
    get.rows[2].cells[2].style.background = 'pink';