内置DOM操作属性和方法（3-3）

DOM

内置DOM操作属性和方法总结

获取页面元素方法

document.getElementById()
document.getElementsByTagName()

document.getElementsByClassName();//->IE6-8不兼容
document.getElementsByName();//->IE中只对表单元素的name起作用(不用处理，因为一般也只给表单设置name)
document.body
document.documentElement
context.querySelector/contetx.querySelectorAll//->在IE6-8不兼容，通过这个获取的节点集合不存在DOM映射

增加
children–>（兼容）获取某个容器中所有元素子节点（可筛选出制定标签）
//（jQuery没有这三种方法）
getElementsByClass（兼容）通过元素样式类名获取一组元素（jQuery无此方法，但邠选择器基于此方法的原理）

节点间关系的属性(常用节点：元素、文本、document、注释)

http://www.cnblogs.com/xiaohuochai/p/5785297.html

parentNode
childNodes
children->在IE6-8获取与标准的不一样

previousSibling / previousElementSibling
nextSibling/nextElementSibling
firstChild/firstElementChild
lastChild/lastElementChild
【注意】上面4个的前面都会将空格/换行当做节点处理，找到相应的元素会用后面几个（IE6,7,8不兼容）

增加
兼容的previousElementSibling
兼容的nextElementSibling
获取上一个哥哥元素(prev)，获取下一个弟弟元素节点（next），获取所有哥哥（prevAll），获取所有弟弟（nextAll），获取相邻的（sibling），获取所有兄弟（siblings）
兼容的firstElementChild获取第一个元素子节点
兼容的lastElementChild获取最后一个元素

index获取当前元素的索引

DOM增删改

creatElement
document.createDocumentFragment()
appendChild();向container末尾追加元素
insertBefore
cloneNode(true/false)
replaceChild
removeChild
get/set/removeAttribute

增加
prepend->向container开头追加元素（appendChild对应） 增加到某一个容器的开头
insertAfter->（insertBefore增加到某容器前面对应）增加到容器中某一个元素后面

DOM盒子模型

– 系列 Width/Height 值 Left/Top 值
无关溢出 client系列 clientWidth/clientHeight 设置+填充 clientLeft/clientTop 边框左/高
无关溢出 offset系列 offsetWidth/offsetHeight 设置+填充+边框 offsetLeft/offsetTop: 外边距父内边的偏移
有关溢出 scroll系列 scrollWidth/scrollHeight 真实内容+填充 scrollLeft/scrollTop 卷去的宽/高

增css样式类方法

css样式类的方法
hasClass 判断是否存在一个样式类名
addClass 增加样式类名
removeClass 删除样式类名

//jQuery的css方法包含下面3个方法
getCss
setCss
setGroupCss

在高级单例模式（自执行函数，形成不销毁的作用域）使用var flag = "getComputedStyle" in window; 只检测一次浏览器兼容性！
（flag不销毁，存储判断当前浏览器是否兼容属性，兼容–>标准浏览器。不兼容–>当前浏览器IE6-8）

1
2
3
4
5
6
7
8
var utils = (function() { 
    function afn(){};
    function bfn(){};
    return {
        a:afn,
        b:bfn
    }
})();

公用库函数

  • [x] children 
    • 1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      //->兼容：获取某个元素的所有子节点（还可以筛选出制定标签名）模拟jquery下的children
       children: function(ele, tagName) {
              var ary = [];
              //->IE6-8不能使用内置的children属性
              if (/MSIE(6|7|8)/i.test(navigator.userAgent)) {
                  var childs = ele.childNodes; //childNodes兼容
                  for (var i = 0; i < childs.length; i++) {
                      if (childs[i].nodeType == 1) {
                          ary.push(childs[i]);
                      }
                  }
              } else {
                  //标准浏览器下，直接使用children即可,但是获取的是元素集合（类数组），为了和IE6-8保持一致，借用数组原型slice，实现将类数组转化为数组
                  ary = Array.prototype.slice.call(ele.children);
              }
              //二次筛选（如果传tagName这个参数则需要二次筛选，与tagName同的留下，不同的删掉）
              if (typeof tagName == 'string') {
                  for (var i = 0; i < ary.length; i++) { //这种写法随着
                      var cur = ary[i];
                      if (cur.nodeName.toUpperCase() != tagName.toUpperCase()) {
                          ary.splice(i, 1);
                          i--;
                      }
                  }
              }
              return ary;
          }