javaScript-DOM（一）

一、文档树

HTML -> DOM

二、节点

1) 节点遍历

以 p 标签为例

node.parentNode // 父节点 --body
    .firstChild // 第一个子节点 --hello,
    .lastChild // 最后一个子节点 -- img
    .previousSibling // 前一个兄弟节点 -- null
    .nextSibling // 下一个兄弟节点 -- div
    
    //返回对象
    .childNodes //子节点, 返回NodeList 对象
    .children

注：element.childrenIE低版本不支持

2) 节点类型

ELEMENT_NODE // 元素节点(重点)
TEXT_NODE // 文本节点
...

3) 元素遍历

以 p 标签为例

p.firstElementChild // 第一个元素子节点--span
 .lastElementChild // 最后一个元素节点--img
 .nextElementSibling // 下一个元素兄弟节点
 .previousElementSibling // 上一个元素兄弟节点

三、节点操作

1) 获取节点

 // 从document文档中获取 指定Id元素 ，返回是节点对象(包含属性和接口)
document.getElementById(id)

// 通过元素调用！ 指定标签名称 返回集合Array() 返回值是动态的，后期的修改会动态的显示出来
element.getElementsByTagName(id) 

// 返回元素的数组
element.getElementsByName(name)

// 获取所有的后代元素
element.getElementsByTagName('*')

// 通过类名获取元素
element.getElementsByClassName(ClassName) 
 // 相当于 element.user.last同时具有多个类名 与顺序无关 
element.getElementsByClassName('user last')

/**
 *通过选择器 ie9+
 *querySelector 第一个符合条件的元素
 *All 所有符合条件的元素  返回list(列表) list不是动态的！ 
 */
element.querySelector('.class')
element.querySelectorAll('#id')

注：IE 6、7、8不支持getElementsByClassName querySelector/All

兼容getElementsByClassName:

function getElementsByClassName(root, className){
  if(root.getElementsByClassName) {                // 特性侦测
    return root.getElementsByClassName(className); // 优先使用W3C规范
  }else {
    var elements = root.getElementsByTagName('*'); // 获取所有的后代元素
    var result = [];
    var element,
        classNameStr,
        flag;
    names = names.split(' ');
    for(var i = 0; element = elements[i]; i++){
      classNameStr = ' ' + element.className + ' ';
      flag = true;
      // 选择包含类名的元素
      for (var j = 0, name; name = names[j]; j++) {
        if (classNameStr.indexOf(' ' + name + ' ') == -1) {
          flag = false;
          break;
        }
      }
      if (flag){
        result.push(element);
      }
    }
    return result;
  }
}

// 
var users = getElementsByClassName(document, 'className');

2) 创建节点

document.createElement(tagName);

3) 修改节点

// 节点及其后代节点的文本内容
element.textContent //  ie9+
element.innerText // 不规范 ff不支持

 // 节点的HTML内容(新的节点)！ 清除掉原来节点上的click方法等 内存泄漏  安全问题(不检查插入的内容)
element.innerHTML

兼容innerText:

if (!('innerText' in document.body)) {
  HTMLElement.prototype._defineGetter_('innerText', function(){
    return this.textContent;
  });
  HTMLElement.prototype._defineSetter_('innerText', function(s){
    return this.textContent = s;
  });
}

4) 插入节点

element.appendChild(achild)

// 在指定元素的前面添加
element.insertBefore(achild, referenceChild)

5) 删除节点

element.removeChild()