DOM对象（节点关系、查找、操作）

一、DOM对象

1、什么是HTML DOM

HTML Document Object Model（文档对象模型）
HTML DOM 定义了访问和操作HTML文档的标准方法
HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树)

2、DOM树

画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。

3、DOM节点

3.1 节点类型：

HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的：
   整个文档是一个文档节点。（document）
   每个 HTML 标签是一个元素节点。（element）
   包含在 HTML 元素中的文本是文本节点。（text）
   每一个 HTML 属性是一个属性节点。（attribute）

3.2 节点关系

节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分，以及节点之间的关系：

访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素。

3.3 节点查找

直接查找节点

document.getElementById(“idname”)
document.getElementsByTagName(“tagname”)
document.getElementsByName(“name”)
document.getElementsByClassName(“name”)

<div id="div1">

    <div class="div2">i am div2</div>
    <div name="yuan">i am div2</div>
    <div id="div3">i am div2</div>
    <p>hello p</p>
</div>

<script>

   var div1=document.getElementById("div1");

////支持;
//   var ele= div1.getElementsByTagName("p");
//   alert(ele.length);
////支持
//   var ele2=div1.getElementsByClassName("div2");
//   alert(ele2.length);
////不支持
//   var ele3=div1.getElementById("div3");
//   alert(ele3.length);
////不支持
//   var ele4=div1.getElementsByName("yuan");
//   alert(ele4.length)

</script>

局部查找

导航节点属性

parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

lastElementChild        // 最后一个子标签元素

nextElementSibling      // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素

注意，js中没有办法找到所有的兄弟标签！

3.4 节点操作

创建节点：

createElement(标签名) ：创建一个指定名称的元素。

例：var tag=document.createElement(“input")
tag.setAttribute('type','text');

添加节点：

追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)
 
把增加的节点放到某个节点的前边
somenode.insertBefore(newnode,某个节点);

删除节点：

somenode.removeChild()：获得要删除的元素，通过父元素调用删除

替换节点:

somenode.replaceChild(newnode, somechildnode);

节点属性操作：

1、获取文本节点的值：

　　innerText 获取纯文本，修改成标签样式也只会是文本

　　innerHTML 获取节点下所有标签及文本

2、attribute操作

elementNode.setAttribute(name,value)    

elementNode.getAttribute(属性名)        <-------------->elementNode.属性名(DHTML)

elementNode.removeAttribute(“属性名”);

3、value获取当前选中的value值

　　1.input

　　2.select（selectIndex）

　　3.textarea

4、innerHTML 给节点添加html代码：
该方法不是w3c的标准，但是主流浏览器支持
tag.innerHTML = “<p>要显示内容</p>”;

5、关于class的操作：

elementNode.className
elementNode.classList.add
elementNode.classList.remove

6、改变css样式：

<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";
                             .style.fontSize=48px

二、课后作业

实现表格的增删改（目前只完成增、删）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .head {
            height: 40px;
            background: #1e2598;
        }

        .left {
            float: left;
            width: 15%;
            height: 600px;
            border-right: 1px black solid;

        }

        .right {
            float: left;
            width: 84%;
        }

        .add {
            margin: 10px 20px;
            width: 47px;
            height: 30px;
            color: white;
            background: royalblue;
            border-right: solid 1px black;
            border-bottom: solid 1px black;
            border-radius: 12%;
        }

        th, td {
            margin: 0 auto;
            text-align: center;
            border-bottom: 1px darkgray solid;

        }

        table tr {
            height: 40px;

        }

        tr {
            margin: 20px 0;
            padding: 20px;
            border-bottom: 1px darkgray solid;
        }

        .name {
            width: 6%;
        }

        .age {
            width: 6%;
        }

        .phone {
            width: 10%;
        }

        .city {
            width: 10%;
        }

        .control {
            width: 25%;
        }

        .bg {
            position: fixed;
            /*width: 100%;*/
            /*height: 100%;*/
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            background: darkgray;
            opacity: 0.5;
        }

        .add_text {
            background: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-top: -150px;
            margin-left: -150px;
            width: 350px;
            height: 300px;
        }

        .add_text input {

            width: 200px;
            height: 20px;
            font-size: 14px;
            margin: 10px;
        }

        .add_text p {
            float: right;
            margin-right: 35px;
            margin-top: 15px;
        }

        .add_text button {
            width: 50px;
            height: 20px;
            margin: 5px;
        }

        .hide {
            display: none;
        }

    </style>
</head>
<body>
<div class="bg hide handels"></div>
<div class="add_text hide handels">
    <p>姓名:<input name="user" placeholder="姓名"></p>
    <p>年龄:<input name="age" placeholder=""></p>
    <p>手机号:<input name="phone_number" placeholder=""></p>
    <p>城市:<input name="home_city" placeholder=""></p>
    <p id="butt">
        <button class="confirm">确定</button>
        <button class="cancel">取消</button>
    </p>
</div>
<div class="head"></div>
<div class="middle">
    <div class="left"></div>
    <div class="right">
        <button class="add">添加</button>
        <table>
            <tr class="title">
                <th class="name">姓名</th>
                <th class="age">年龄</th>
                <th class="phone">手机号</th>
                <th class="city">城市</th>
                <th class="control">操作</th>
            </tr>
            <tr class="row hide">
                <td class="name">egon</td>
                <td class="age">34</td>
                <td class="phone">12345678901</td>
                <td class="city">北京</td>
                <td class="control">
                    <button>编辑</button>
                    <button onclick="dell(this)">删除</button>
                </td>
            </tr>
            <tr>
                <td class="name">egon</td>
                <td class="age">34</td>
                <td class="phone">12345678901</td>
                <td class="city">北京</td>
                <td class="control">
                    <button>编辑</button>
                    <button onclick="dell(this)">删除</button>
                </td>
            </tr>
        </table>

    </div>
</div>

<script>
    function dell(self) {

        self.parentNode.parentNode.parentNode.removeChild(self.parentNode.parentNode)

    }

    var add = document.getElementsByClassName("add")[0];
    var hides = document.getElementsByClassName("handels");

    add.onclick = function () {

        for (var i = 0; i < hides.length; i++) {
            hides[i].classList.remove("hide");
        }

        var input = document.getElementsByTagName("input");
        for (i = 0; i < input.length; i++) {
            input[i].value = "";
        }
    };

    var confirm = document.getElementsByClassName("confirm")[0];
    confirm.onclick = function () {
        var message = [];
        var input = document.getElementsByTagName("input");
        for (var i = 0; i < input.length; i++) {
            message.push(input[i].value)
        }
        console.log(message);
        for (i = 0; i < hides.length; i++) {
            hides[i].classList.add("hide");
        }
        var row = document.getElementsByClassName("row")[0];
        var new_row = row.cloneNode(true);
        new_row.classList.remove("hide")

        for (var j = 0; j < message.length; j ++) {
            console.log(new_row.children[j].innerText)
            new_row.children[j].innerText = message[j]
        }
//        for (var j = 1; j < new_row.childNodes.length - 2; j += 2) {
//            console.log(new_row.childNodes[j].innerText)
//            new_row.childNodes[j].innerText = message[(j + 1) / 2 - 1]
//        }
        var flag;
        for (var me in message) {
            if (message[me].length == 0) {
                flag = 0;
                break;
            }
        }
        if (flag == undefined) {
            row.parentNode.appendChild(new_row);
        }
    };

    var cancel = document.getElementsByClassName("cancel")[0];
    cancel.onclick = function () {
        for (var i = 0; i < hides.length; i++) {
            hides[i].classList.add("hide");
        }
    }

    var error = document.createElement("p");
    error.innerText = "2-10个字符，可使用字母、汉字、数字、不能是纯数字"
    error.style.color = "red"
    error.style.fontSize = "12px"
    error.style.lineHeight = "12px"
    error.style.float = "none"
    error.style.margin = "0"
    error.style.textAlign = "center"
    var error1 = error.cloneNode(true);
    error1.innerText = "请输入正确年龄"
    var error2 = error.cloneNode(true);
    error2.innerText = "请输入正确的手机号码"

    var user = document.getElementsByName("user")[0];
    user.onblur = function () {

        if (!isNaN(user.value) || user.value.length > 10 || user.value.length < 2) {
//            error = document.createElement("p");
//            error.innerText = "2-10个字符，可使用字母、汉字、数字、不能是纯数字"
//            error.style.color = "red"
//            error.style.fontSize = "12px"
//            error.style.lineHeight = "12px"
//            error.style.float = "none"
//            error.style.margin = "0"
//            error.style.textAlign = "center"

            if (!this.nextElementSibling) {
                this.parentNode.appendChild(error)
            }
        }
        else {
            if (this.nextElementSibling) {
                this.parentNode.removeChild(this.nextElementSibling)
            }
        }

    }

    var age = document.getElementsByName("age")[0];
    age.onblur = function () {

        if (isNaN(age.value) || age.value < 0 || age.value > 150 || age.value.length == 0) {
//            var error1 = document.createElement("p");
//            error1.innerText = "请输入正确年龄"
//            error1.style.color = "red"
//            error1.style.fontSize = "12px"
//            error1.style.lineHeight = "12px"
//            error1.style.float = "none"
//            error1.style.margin = "0"
//            error1.style.textAlign = "center"

            if (!this.nextElementSibling) {
                this.parentNode.appendChild(error1)
            }
        }
        else {
            if (this.nextElementSibling) {
                this.parentNode.removeChild(this.nextElementSibling)
            }
        }
    }

    var phone = document.getElementsByName("phone_number")[0];
    phone.onblur = function () {

        if (isNaN(phone.value) || phone.value.length != 11) {
//            var error2 = document.createElement("p");
//            error2.innerText = "请输入正确的手机号码"
//            error2.style.color = "red"
//            error2.style.fontSize = "12px"
//            error2.style.lineHeight = "12px"
//            error2.style.float = "none"
//            error2.style.margin = "0"
//            error2.style.textAlign = "center"
            if (!this.nextElementSibling) {
                this.parentNode.appendChild(error2)
            }
        }
        else {
            if (this.nextElementSibling) {
                this.parentNode.removeChild(this.nextElementSibling)
            }
        }
    }
</script>
</body>
</html>

参考答案

posted @ 2017-08-09 16:06 maple-shaw 阅读(693) 评论(0) 收藏举报

刷新页面返回顶部

maple-shaw

Make the best use of what is in your power, and take the rest as it happens.