JavaScript-DOM初探

DOM: Document Object Model -> 文档对象模型。
DOM就是描述整个HTML页面中描述节点关系到图谱，在DOM中，提供了很多的获取元素的方法和之间关系的属性，以及操作这些元素的方法。

1. 获取页面中获取元素的方法
   document.getElementById('元素的ID值');在整个文档中，通过元素的ID获取到这个元素对象，获取的是一个元素。
   注意：如果页面中id重复了，那么这个方法默认只获取第一个元素。在IE6、7下，会把表单元素(input)的name属性值当做id来使用。在IE7、7下，不区分id的大小写。
   项目实战注意：不要让表单元素的name和其他元素的id冲突。不要用id的大小写来区分不同的元素。
   如果没有获取到元素，返回的结果是null。

    var oDiv = document.getElementById('tab');

    // 可以直接的用元素的id来代表当前这个元素对象（不推荐使用）
    console.log(tab); // tab是id值

2. 通过元素的标签名，来获取一组元素（是多个元素，有几个满足条件的元素，就获取几个）。在整个文档中，通过元素的标签名获取一组元素。这一组元素是对象数据类型的结果，并且是一个类数组（以数字作为索引，索引从0开始，逐级递增，索引代表的是当前对应的某一个元素，有一个叫做length的属性，代表获取的个数）。

document.getElementsByTagName('元素标签名');

document称之为上下文（context），就是我们可以自己限定当前获取元素的范围，获取整个文档中的li。

    var oLis = document.getElementsByTagName('li');
    console.dir(oLis);
    console.log(oLis.length); // 代表获取元素的个数

document称之为上下文（context），就是我们可以自己限定当前获取元素的范围。getElementById的上下文只能是document。

    // 获得id为tab下的所有li
    var oTab = document.getElementById('tab');
    var oLis = oTab.getElementsByTagName('li');
    console.dir(oLis);

3. context.getElementsByName()通过元素name属性的值获取一组元素。在IE浏览器下，只对表单元素其作用，这个方法应用于获取具有同样name的表单元素。

    var oDivs = document.getElementsByName('element');
    console.log(oDivs);

4. context.getElementsByClassName()通过元素的类名(class值)获取一组元素。这个方法在项目中最常用的获取元素的方法，但是这个方法不兼容，在IE6-8中，会报错。获取多个元素的这几个方法，即使获取的只有一个，它也是类数组，也是一个集合，如果想用其中的第一个元素，也需要通过索引拿出来使用。

var oList = document.getElementsByClassName('tag');

    document.documentElement // 获取HTML元素
    document.body // 获取body元素

    // 兼容所有浏览器的获取当前屏幕的宽度,高度
    var curWidth = document.documentElement.clientWidth || document.body.clientWidth;
    var curHeight = document.documentElement.clientHeight || document.body.clientHeight;

6.在移动端获取元素常用的方法，（IE6-8下不兼容）。

     document.querySelector(); 获取一个
     document.querySelectorAll(); 获取多个，得到类数组集合
     var ele = document.querySelector('#id');
     var ele = document.querySelector('.class');
     var eles = document.querySelectorAll('#tab li');

---

DOM的节点关系
节点：Node 一个页面中标签，文字，注释...都是节点。
对于一个HTML文档：

<div id="div1">
    <h1>前端</h1>
    <!--这里是注释-->
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li id="li3">JavaScript</li>
        <li>HTML5移动端</li>
        <li>NodeJS</li>
    </ul>
</div>

则获取关系的属性如下：

    // childNodes: 获取元素的所有子节点
    // children: 获取所有的元素子节点
    // parentNode: 获取父亲节点
    // previousSibling: 获取上一个哥哥节点
    // nextSibling: 获取下一个弟弟节点
    // firstChild: 获得所有子节点中的第一个
    // lastChild: 获得所有子节点的最后一个
    console.log(oDiv.childNodes); // 获取所有的子节点
    console.log(oDiv.children)
    console.log(oDiv.parentNode);
    console.log(oDiv.previousSibling);
    console.log(oDiv.nextSibling);
    console.log(oDiv.firstChild);
    console.log(oDiv.lastChild);

// 在JavaScript中，需要我们掌握的节点类型：
// nodeType, nodeName, nodeValue
// 元素节点（元素标签）1, 大写的标签名, null
// 文本节点（文字）   3, #text, 文字内容
// 注释节点（注释）   8, #comment, 注释内容
// document        9, #document, null
var oDiv = document.getElementById('div1');
console.log(oDiv.nodeType); // 1
console.log(oDiv.nodeName); // "DIV"
console.log(oDiv.nodeValue); // null

---

实例
在标准浏览器下，把空格（space）和Enter（回车）都当做文本节点处理。 写一个方法，模拟children方法，实现获取指定元素下的元素。

    // 写一个方法，模拟children方法，实现获取指定元素下的元素子节点
    /*
    * getMyChildren: 获取指定元素下所有的元素节点
    * @parameter:
    *   ele: 我们要获取哪个元素下的元素节点，就传递什么元素
    * @parameter:
    *   tagName: 获取那种类型的元素，例如：传入div，只获取div
    * @return:
    *   最终获取的元素子节点
    * */
    function getMyChildren(ele, tagName) {
        var ary = [];
        var nodes = ele.childNodes;
        for (var i = 0; i < nodes.length; i++) {
            var cur = nodes[i];
            if (cur.nodeType === 1) {
                if (tagName) {
                    if (cur.nodeName.toLowerCase() === tagName.toLowerCase()) {
                        ary.push(cur);
                    }
                } else {
                    // 如果没有传递tagName，则默认把所有元素放到数组中
                    ary.push(cur);
                }
            }
        }
        return ary;
    }

---

元素的增删改
动态创建一个元素标签。

    // 动态创建一个元素标签
    // document.createElement(): 创建一个元素标签对象
    // appendChild: 把这个元素添加到指定的元素的末尾位置， -> 容器.appendChild(元素)。
    // insertBefore(): 把新的元素newEle添加到老的元素oldElem之前
    // oldEle.parentNode.insertBefore(newEle, oldEle)
    // removeChild: 删除指定元素

    // 动态创建一个div元素对象
    var oDiv = document.createElement('div');
    oDiv.id = 'div1';
    oDiv.style.width = '100px';
    oDiv.style.height = '100px';
    oDiv.style.border = '1px solid  red';

    // 把创建好的元素添加到页面中
    document.body.appendChild(oDiv);

    var oP = document.createElement('p');
    oP.id = 'p1';
    oP.style.width = '100px';
    oP.style.height = '100px';
    oP.style.border = '1px solid  black';
    document.body.insertBefore(oP, oDiv);

    oDiv.parentNode.removeChild(oP);

    var cloNode = oDiv.cloneNode(true);
    // 克隆一个元素 true -> 把元素里面子子孙孙都克隆，默认是false，只克隆当前的

    var dd = document.createElement('div');
    dd.style.background = 'blue';
    oP.parentNode.replaceChild(dd, oDiv); // 替换

    // setAttribute: 设置元素的属性，包含自定义的，是修改HTML元素的结构的，使用这个方法，可以再HTML上体现出来
    dd.setAttribute('data-new', '自定义属性');
    console.log(dd.getAttribute('data-new'));
    dd.removeAttribute('data-new');
    // 在IE6-8下，这个方法不能修改class属性