Python Dom 的介绍和使用day1

DOM:
　　1.查找元素：
　　　　1.直接查找
　　　　2.间接查找
　　　　　　1.节点（所有内容）
　　　　　　2.元素（被括号括起来的内容）
　　　　　　比如：

<div>
    111
    <a>1<a>
</div>

　　　　节点包括111和<a>1<a>，元素只有<a>1<a>
　　　2.操作元素：
　　　　1.ID
　　　　　　1.获得标签内容
　　　　　　　　1.通过ID查找到标签：t=document.getElementById("")
　　　　　　　　2.通过标签得到间接寻找相关节点：t.childNodes、t.parentNode
　　　　　　　　3.获得标签的值： t.value
　　　　　　　　4.获得标签的文本内容：t.innertext、t.innerHTML(

如：<a>一<span>111</span>二<a>)
t.innertext ————> 一111二
t.innerHTML ————> 一<span>111</span>二

　　　　　　2.修改标签内容
　　　　　　　　t.value = "66"
　　　　2.class
　　　　　　1.寻找标签,获得标签列表：t=document.getElementsByTagName("div")
　　　　　　2.切片，对目的对线进行操作：(当然，如果知道ID，就找得更快了)
　　　　　　　t[0].classList、t[0].classList.add('c4')、t[0].classList.remove()

　　　　　　3.样式

　　　　　　　同理：也可以对标签的其他样式进行修改：
　　　　　　　如t.style.color="red"，如果带-：如background-color就变成t.style.backgroundColor

　　　　　　4.属性(<div id='i1' name='haha'>)
　　　　　　　t.getAttribute(name) 获得属性
　　　　　　　t.setAttribute("name","xixi") 修改属性
　　　　　　t.removeAttribute("name") 移除属性
　　　　　　可以用来控制选择框的是否选中，即控制checked

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="全选" onclick="CheckAll()">
    <input type="button" value="取消" onclick="CancleALL()">
    <input type="button" value="反选" onclick="ReverseALL()">


    <table  border="1">
        <thead>
          <tr>
              <th>序号</th>
              <th>用户名</th>
              <th>密码</th>
          </tr>

        </thead>

        <tbody id="tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>11</td>
                <td>111</td>
            </tr>

            <tr>
                <td><input type="checkbox"></td>
                <td>22</td>
                <td>222</td>
            </tr>

            <tr>
                <td><input type="checkbox"></td>
                <td>33</td>
                <td>333</td>
            </tr>
        </tbody>
    </table>

    <script>
        function CheckAll() {
            var t1 = document.getElementById("tb");
            var t2=t1.children;
            for(var i=0;i<t2.length;i++)
            {
                t3=t2[i].firstElementChild.firstElementChild;
                t3.setAttribute("checked","checked");
                t3.checked = true;
            }

        }

        function CancleALL() {
            var t1 = document.getElementById("tb");
            var t2=t1.children;
            for(var i=0;i<t2.length;i++)
            {
                t3=t2[i].firstElementChild.firstElementChild;
                t3.removeAttribute("checked")
                t3.checked = false
            }

        }

        function ReverseALL() {
            var t1 = document.getElementById("tb");
            var t2=t1.children;
            for(var i=0;i<t2.length;i++)
            {
                t3=t2[i].firstElementChild.firstElementChild;
                var val =t3.getAttribute("checked");
                if ((t3.checked==true || val=="checked" )&&t3.checked!=false){t3.checked=false;t3.removeAttribute("checked")}
                else{t3.checked=true;t3.setAttribute("checked","checked");}
            }

        }
    </script>
</body>
</html>

例子

PS：当在网页上勾选单选框时，不会在标签中增加 checkde=checked，所以不能通过获取属性来判断，而是直接用

对象.checked == true or false 来改变单选框的是否选中

最后一点，因此两个方法都能改变，所以两种方法要同时兼顾。

当然，最好的方法就是统一使用对象.checked 来改变

　　3.使用的例子：

　　搜索框
　　　　1.创建输入框
　　　　2.给输入框绑定事件

　　　　3.在script上定义事件的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
　　//onfocus表示鼠标的焦点在对话框 onblur鼠标的焦点移出对话框
    <input id="i1" type="text" value="请输入内容" onfocus="f1();"onblur="f2();">
    <script>
        function f1() {
          var  t=document.getElementById("i1");
          var val=t.value
            if (val=="请输入内容"){t.value=""}
        }
         function f2() {
          var t=document.getElementById("i1");
          var val=t.value;
          // 去空格，看字符长度
            if (val.trim().length==0){t.value="请输入内容"}
        }
    </script>
</body>
</html>

View Code

　　弹出框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
      .bj{
          height: 2000px;
           100%;
          background-color: #9E9EA6;
      }
      .hide{
          display: none;!important;
      }
        .shade{
            position: fixed;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #5ab2ce;
            z-index: 100;
        }
        .modal{
             400px;
            height: 400px;
            position: fixed;
            background-color: white;
            top: 50%;
            left: 50%;
            margin-top:-200px ;
            margin-left: -200px;
            z-index: 101;
        }
    </style>
</head>
<body>
    <div class="bj">
        <input type="button" value="点我" onclick="f1()">
        <div id="shade" class="shade hide"></div>
        <div id="modal" class="modal hide">
            <a href="javascript:void(0);"onclick="f2()">取消</a>
        </div>
    </div>
    <script>
        function f1() {
            var t1 = document.getElementById("shade");
            var t2 = document.getElementById("modal");
            t1.classList.remove("hide");
            t2.classList.remove("hide");
        }
        function f2() {
            var t1 = document.getElementById("shade");
            var t2 = document.getElementById("modal");
            t1.classList.add("hide");
            t2.classList.add("hide");
        }
    </script>
</body>
</html>

View Code

　　4.标签操作

　　　　1.创建标签
　　　　　　方法一：创建对象
　　　　　　　　var tag = document.createElement('a')
　　　　　　　　tag.innerText = 'haha'
　　　　　　　　tag.className = 'c1'
　　　　　　　　tag.href = "http://www.baidu.com"
　　　　　　方法二：创建字符串
　　　　　　　　var tag = "<a class='c1' href='http://www.baidu.com'>haha</a>"
　　　　2.添加标签
　　　　　　方法一：创建对象
　　　　　　　　xx.appendChild(tag) 默认加到最后
　　　　　　　　xx.insertBefore(tag,xx.children[1]) 加到任意位置
　　　　　　　　xx.insertAdjacentElement("afterBegin",document.createElement('p'))
　　　　　　方法二：创建字符串
　　　　　　　　xx.insertAdjacentHTML("beforeEnd",tag); 当成标签传进去
　　　　　　　　xx.insertAdjacentText("beforeEnd",tag); 当成文本传进去
　　　　　　　　第一个参数只能是
　　　　　　　　“beforeBegin”在标签外面的前面添加，与标签同级；
　　　　　　　　“afterEnd”在标签外面的后面添加，与标签同级；
　　　　　　　　“beforeEnd”在标签里面的最后面添加，是标签的子级