？？网易微专业-DOM编程艺术 02节点操作

作者: Marks | 来源:发表于2017-04-04 18:29 被阅读15次

前端工程师之DOM编程艺术（持续更新）
？？网易微专业-DOM编程艺术 02节点操作
网易微专业-DOM编程艺术表单操作
网易微专业-DOM编程艺术 03属性操作
网易微专业-DOM编程艺术 05 事件
网易微专业-DOM编程艺术 04样式操作
DOM编程艺术-节点操作之获取节点
「DOM 编程」节点操作
网易微专业大纲 - 3DOM编程艺术
【DOM】DOM的操作（增删改查）

Q1:面向对象？？
Q2：API??
Q3：element.children兼容中nodeType ??
Q4：getElementByClass兼容classNameStr = ' ' + element.className + ' ';中【‘ ’】什么意思？？

▪获取节点
▪创建节点
▪修改节点
▪插入节点
▪删除节点
▪innerHTML

一、获取节点
1、获取节点

为什么用DOM接口来获取节点而不是直接用这种方式？节点关系联系很紧密，一些微小的变化都会导致节点关系的变化，可维护性很差。

通过接口获取节点

2、getElementById

3、getElementsByTagName

collection动态变化

获取所有后代元素

4、getElementsByClassName

兼容

Q1:如何兼容？？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加用户</title>
    <style>
        html, body,h2, ul, li{margin: 0;padding: 0;}
        body{font-family: arial;}
        #users{margin: 30px;width: 210px;box-shadow: 0px 1px 2px #bbb;}
        h2{height: 50px;line-height: 50px;padding-left: 20px;font-size: 18px;border-bottom: 1px solid #dfdfdf;}
        ul{padding: 10px 0;overflow: hidden;}
        .user{float: left;width: 50px;margin: 10px;list-style: none;}
        .user a{color: #666;text-decoration: none;font-size: 12px;}
    </style>
</head>
<body>
    <div id="users">
        <h2>8882人在学习该课程:</h2>
        <ul>
            <li class="user">
                ![](1.jpg)
                <a href="/user/1">Satoshi</a>
            </li>
            <li class="user">
                ![](2.jpg)
                <a href="/user/2">春来草青</a>
            </li>
            <li class="user last">
                ![](3.jpg)
                <a href="/user/3">Kash</a>
            </li>
        </ul>
    </div>
    <script>
        function getElementsByClassName(element, names) {
             if (element.getElementsByClassName) {
                 return element.getElementsByClassName(names);
             } else {
                var elements = element.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, 'user');
        alert(users.length + ' users');

        // var lastUser = getElementsByClassName(document, 'user last')[0];
        // alert('last user is ' + lastUser.innerText);
    </script>
</body>
</html>

5、querySelector/All