jsDOM对象 

DOM对象   HTML Document Object model
    DOM 本身就是对象

DOM节点：节点就是标签对象
   * 整个文档是一个文档节点 -- document
   * 每个HTML标签是一个节点 -- element

    包含在HTML里的文本是文本节点
    每一个HTML属性是一个属性节点
    注释是注释节点

    节点关系：
        父节点有子节点，同级的子节点是同胞（兄弟）只能说上一个兄弟或下一个兄弟
            在节点树中，顶端节点被称为根（root）
            每个节点都有父节点、除了根（它没有父节点）
            一个节点可拥有任意数量的子
            同胞是拥有相同父节点的节点

查找标签
    直接查找：
        1：dom对象(返回该id值的标签) = document.getElementById("id的值");
            dom对象.innerHTML  -- 拿到标签内的文本
        2：数组对象(返回该calss值的标签的数组) = document.getElementsByClassName("class的值")
            通过索引取到标签对象，然后在操作标签
        3：数组对象(返回该标签名的数组) = document.getElementsByTagName("标签名")
            通过索引取到标签对象，然后在操作标签
        4：数组对象(返回该标签名的数组) = document.getElementsByName("标签内的name值")
            不太常用

    导航查找：依据某个标签定位其他标签
        节点属性,都是element去调用的
            element.parentElement           // 父节点标签元素
            element.children                // 所有子标签
            element.firstElementChild       // 第一个子标签元素
            element.lastElementChild        // 最后一个子标签元素
            element.nextElementtSibling     // 下一个兄弟标签元素
            element.previousElementSibling  // 上一个兄弟标签元素

    设计到寻找元素，注意<script>标签的位置！
    js的查找代码如果和html放在一起的话，需要放在dom树之后，加载顺序的问题


标签操作：
    文本操作
        取值
            element.innerText  只取文本
            element.innerHTML   可以取到标签
        赋值 -- 先清空
            element.innerText="新内容"   --- 清空所有内容，放新内容，不能识别标签，都是文本
            element.innerHTML="新内容"   --- 清空所有内容，放新内容，可以识别标签

    文本节点属性操作

        原生JS方式；
            element.setAttribute(name,value)    设置值
            element.getAttribute(属性名)       拿值
            element.removeAttribute(“属性名”);     删除

        DHTML简化方式：
            element.属性名
            element.属性名="值"

        关于class的操作：
            element.className     拿值
            element.classList.add()     添加值
            element.classList.remove()     删除属性
            重复添加或删除不会报错，也不会有任何操作

        关于css样式操作：
            element.style.属性="值";

        value固有属性：
            input
            select
            textarea


事件绑定

    绑定方式：
        方式1：
            HTML部分：
                <div id="div" onclick="foo(this)">内容</div>
                    this这里传递的是此标签,必须是this
            js ：
                function foo(self){     这里不能是this
                    触发时要做的事
                }

        方式2：解耦，在js中控制就可以

            标签对象.事件类型=function(){
                触发时要做的事
                this  -- 当前触发的标签
            }

事件绑定练习：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>

</head>
<body>
    <ul>
        <li class="item">111</li>
        <li class="item">222</li>
        <li class="item">333</li>
    </ul>

    <script>
        var ele_li = document.getElementsByClassName("item");

        for(var i=0;i<ele_li.length;i++){
            ele_li[i].onclick=function() {
            console.log(this.innerHTML)
            }
        }

    </script>

</body>
</html>
事件绑定
左侧菜单：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单</title>
    <link rel="stylesheet" href="index.css">
    <script src="index.js"></script>
</head>
<body>

    <div class="left">
        <div class="item">
            <div class="title" onclick="foo(this)">菜单一</div>
            <div class="conent">
                <p>111</p>
                <p>111</p>
                <p>111</p>
            </div>
        </div>

        <div class="item">
            <div class="title" onclick="foo(this)">菜单二</div>
            <div class="conent hide">
                <p>222</p>
                <p>222</p>
                <p>222</p>
            </div>
        </div>

        <div class="item">
            <div class="title" onclick="foo(this)">菜单三</div>
            <div class="conent hide">
                <p>333</p>
                <p>333</p>
                <p>333</p>
            </div>
        </div>
    </div>
    <div class="right">

    </div>


</body>
</html>
HTML部分
div.left,div.right{
    float: left;
}
div.left{
    width: 20%;
    height: 600px;
    background-color: wheat;
}
div.right{
    width: 80%;
    background-color: #99aecb;
    height: 600px;
}

div.title{
    background-color: #2459a2;
    padding: 10px;
    text-align: center;
}
div.item{
    margin: 10px;
}
.hide{
    display: none;
}
css部分
function foo(self){
    self.nextElementSibling.classList.remove("hide");

    var ele_conent = document.getElementsByClassName("title");
    // console.log(ele_conent)
    for(var i=0;i<ele_conent.length;i++){
        if(self != ele_conent[i]){
            ele_conent[i].nextElementSibling.classList.add("hide")
        }
    }
}
JS部分

 






posted @ 2017-11-10 15:16  chitalu  阅读(153)  评论(0)    收藏  举报