学习笔记：DOM基础知识(重要)

/*获取页面中元素的方法：

    document.getElementById()

    context.getElementsByTagName(TAGNAME)把指定容器中子子孙孙所有标签名为

    TAGNAME的都获取到

    context.getELementsByClassName(CLASSNAME) 在IE6-8下不兼容

    document.getElementsByName()：在浏览器中只对表单元素的name起作用

    document.body:获取body

    document.documentElement:获取整个html

    document.querySelector/context.querySelectorAll:通过选择器来获取一个元素

    通过它获取到的元素是不存在DOM映射关系的，在IE6-8下不兼容

    */

   /*描述节点和节点之间关系的属性(在标准的浏览器中会把空格和换行当作文本节点处理)：

   childNodes：所有的节点（文本，注释和元素都有）

   children:获取所有的元素子节点(只有文本，没有元素也没有注释)

   IE6-8下获取的结果和标准浏览器获取的结果不一致

   parentNode:父亲节点

   previousSibling:获取上一个哥哥节点，不一定是元素，可能是文本/注释

   previousElementSibling:获取上一个哥哥元素节点

   nextSibling/nextElementSibling:获取下一个弟弟节点或者获取下一个弟弟元素节点

   lastChild/lastElementChild:获取最后一个子节点

   firstChild/firstElementChild：同上

  // 注意：所有带Element的在IE678下都不兼容

   */

   /*node类型的三个属性

   每个节点都有一个nodeType属性，用于表明节点的类型节点类型由Node类型中定义12个常量表示:

   页面中最常用的节点有四种：各自的nodeType为,nodeName为,nodeValue为

   元素:1,大写的标签名，null

   文本:3,#test,文本内容

   注释:8，#coment,注释内容

   document:9，#document,

   通过nodetype可以知道是不是文本

   */

 

 

/*动态操作DOM的方法：关于DOM的增删改

  createElement：创建

  document.createDocumentFragment():文档碎片

  appendChild:增加到某一个容器的末尾

  insertBefore:增加到某一个之前

  cloneNode(true/false):当前元素都克隆一份/只克隆元素的标签

  replaceChild：替换

  removeChild：删除

  get/set/removeAttribute:获取/设置/删除自定义属性

  */

 /*DOM的盒子模型属性：

 clientHeight：内容的高+上下填充（与溢出内容无关，已设定死高度）

clientWidth：内容的宽+左右填充（同上）

clientLeft：左边框宽度

clientTop：上边框宽度

 offsetWidth：clientWidth+左右边框

offsetHeight：clientHeight+上下边框

offsetLeft：当前元素的外边框距离父级参照物的内边框的偏移量

offsetTop：同上

offsetParent：当前元素的父级参照物

 scrollWidth:若无溢出同clientWidth；若有溢出，真实内容（包含溢出）+左填充

scrollHeight：同上

scrollLeft：滚动条卷去的宽度

scrollTop：同上

 window.getcomputedStyle（当前要操作的元素，当前元素的伪类null）：获取所有经过浏览器计算过的样式（只要当前元素标签可在页面中呈现，都是经计算/渲染过的）

 window.currentStyle：同上，只在IE678用

 */