Day10 DOM

自定义属性及getAttribute方法

• getAttribute() 获取特定元素节点属性的值，某些低版本浏览器不支持.

for(var i=0;i

• setAttribute() 设置特定元素节点属性的值，某些低版本浏览器不支持
• removeAttribute() 移除特定元素节点属性，某些低版本浏览器不支持

outerHTML/innerHTML/innerText

• innerHTML(可读可写)：获取和设置元素节点里的内容，从对象的起始位置到终止位置的全部内容,不包括自身Html 标签。
• outerHTML：除了包含innerHTML的全部内容外, 还包含对象标签本身。
• innerText：获取某个网页元素的文本内容（忽略标签，不常用）

DOM元素类型(元素和文本)

• 节点可以分为元素节点、属性节点和文本节点...，而这些节点又有三个非常有用的属性 ，分别为：nodeName（节点的名称）、nodeType（节点类型） 和 nodeValue（文本）
• nodeType：元素(1) 属性(2) 文本(3)

//children:子元素，获取元素对象的子元素。类数组(下标和length)
oUl.children.length)//[object HTMLCollection] 4
oUl.children[0];//获取ul里面第一个元素。

获取元素内容用innerHTML，表单使用value

childNodes/过滤空白节点

• childNodes 获取当前元素节点的所有子节点,这里面包含空白节点，在IE9之前，IE浏览器会自动忽略空白节点（兼容问题）.

高级选取firstChild/lastChild/parentNode/previousSibling/nextSibling

• firstChild/firstElementChild 获取当前元素节点的第一个子节点
  firstChild包含空白节点
• lastChild 获取当前元素节点的最后一个子节点
• ownerDocument 获取该节点的文档根节点（document）
• document.documentElement 获取的html标签元素
• parentNode 获取当前节点的父节点
• previousSibling 获取当前节点的前一个兄弟节点
• nextSibling 获取当前节点的后一个兄弟节点

获取非行内样式

• offsetWidth、offsetHeight、offsetLeft、offsetTop、offsetParent(定位父级)没有单位
  盒子的偏移值，如果存在定位父级，以父级为基准，没有定位父级以body元素为基准
  注意，只能获取，不能赋值
  oUl.style.width只能获取行内元素css
  求元素的绝对位置

function getpostion(obj) {
    //存储最终的值
    var _left = 0;
    var _top = 0;
    while (obj) { //检测定位父级是否存在
        _left += obj.offsetLeft;
        _top += obj.offsetTop;
        obj = obj.offsetParent; //获取当前元素的定位父级
    }
    return { //结果返回一个对象，两个值
        left: _left,
        top: _top
    }
}

• 获取选择器里面的css相关属性的值。
  • 标准浏览器：getComputedStyle()
  • IE8及其以下浏览器：currentStyle()
    兼容操作

function getstyle(obj,attr){
                if(obj.currentStyle){
                    return obj.currentStyle[attr];
                }else{
                    return getComputedStyle(obj)[attr];
                }
            }

文档碎片（createDocumentFragment）

文档碎片在理论上可以提高DOM操作的执行效率，将要追加的dom操作先放置在文档碎片中，最后在追加给对应的元素。

应用

1. 进度条

   
   
   

   进度条

2. 简易年历

3. 自动登录勾选提示

   
   
   

   勾选提示

综合应用

1．点击按钮换图片
2．tab切换案例
3．扩展案例： QQ延迟提示框，两个盒子兄弟关系，中间有空隙。
4．扩展案例： 密码强度
5．扩展案例： 求一个盒子的绝对位置。