网页制作之DOM操作篇

最新推荐文章于 2024-07-17 19:09:25 发布

Xue__Feng

最新推荐文章于 2024-07-17 19:09:25 发布

阅读量712

点赞数

分类专栏：网页制作文章标签： dom javascript

本文链接：https://blog.csdn.net/zuefeng/article/details/107708652

版权

网页制作专栏收录该内容

22 篇文章 0 订阅

订阅专栏

找到标签

 	a.  直接查找
    document.getElementById("i1")           ID
    document.getElementByTagName("div")     标签名
    document.getElementByName("div")        name
    document.getElementByClassName("div")   类
    b.  间接查找
    tag = document.getElementById("i1")
    tag.parentElement                       查找该标签的父标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="name">
    <input type="button" οnclick="GetData()" value="提交">
    <script>
        function GetData() {
            var i = document.getElementById(id="name")
            alert(i.value)
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .mainm{
            background-color: #382eff;
        }
        .mainm .con{
            background-color: white;
            /*display: none;*/
        }
    </style>
</head>
<body>
    <div>
        <div id="t1" class="mainm" οnclick="ShowT('t1')">菜单1
            <div class="con">内容1</div>
            <div class="con">内容1</div>
            <div class="con">内容1</div>
        </div>
        <div id="t2" class="mainm" οnclick="ShowT('t2')">菜单2
            <div class="con">内容2</div>
            <div class="con">内容2</div>
            <div class="con">内容2</div>
        </div>
        <div id="t3" class="mainm" οnclick="ShowT('t3')">菜单3
            <div class="con">内容3</div>
            <div class="con">内容3</div>
            <div class="con">内容3</div>
        </div>
        <div id="t4" class="mainm" οnclick="ShowT('t4')">菜单4
            <div class="con">内容4</div>
            <div class="con">内容4</div>
            <div class="con">内容4</div>
        </div>
    </div>
    <script>
        function ShowT(nid) {
            var cur_tag = document.getElementById(nid)
            var tag_list = cur_tag.parentElement.children
            for(var i=0;i<tag_list.length;i++){
                for(var j=0;j<tag_list[i].children.length;j++){
                    tag_list[i].children[j].classList.add("hide")
                }
            }
            for(var n=0;n<cur_tag.children.length;n++){
                cur_tag.children[n].classList.remove("hide")
            }
        }
    </script>
</body>
</html>

标签操作

    a.  innerText(仅文本)
    tmp = label.innerText                   获取标签的值
    label.innerText = "Hello"               修改标签的值
    b.  className
    tag = document.getElementById("i1")
    tag.className = "c1"                    直接完整的改变样式为c1
    tag.classList.jadd("c2")                 添加样式c2
    tag.classList.remove("c2")              删除样式c2

文本内容操作

     innertext   仅文本
     innerHTML   全内容
     value
         input   value获取当前标签中的值
         select  获取选中的value值（selectedIndex）
         textarea    value获取当前标签的value值
         搜索框的实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width:600px;margin: 0 auto;">
        <input id="i1" οnfοcus="Focus()" οnblur="Blur()" type="text" value="请输入关键字"/>
        <input placeholder="请输入关键字"/>
    </div>
    <script>
        function Focus() {
            var tag=document.getElementById("i1");
            var val=tag.value;
            if(val=="请输入关键字"){
                tag.value = "";
            }
        }
        function Blur() {
            var tag = document.getElementById("i1");
            var  val = tag.value;
            if (val==""){
                tag.value = "请输入关键字";
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <p id="show"></p>
<!--        <input id="status" type="text" />-->
        <input type="button" οnclick="Delete()" value="删除">
    </div>
    <script>
        function Delete() {
            var tag = document.getElementById("show");
            tag.innerText="已删除";
            setTimeout(function () {
                tag.innerText="";
            },3000);
        }
    </script>
</body>
</html>

样式操作

     对象操作
         tag.className
         tag.classList
     细节操作
         tag.style.color="red";
         tag.style.backgroundColor="red";
         tag.style.fontSize="18px";

<!DOCTYPE html>
<!--DOM1-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1px" width="300px">
        <tr οnmοuseοver="Over(0)" οnmοuseοut="Out(0)"><td>1</td><td>2</td><td>3</td></tr>
        <tr οnmοuseοver="Over(1)" οnmοuseοut="Out(1)"><td>1</td><td>2</td><td>3</td></tr>
        <tr οnmοuseοver="Over(2)" οnmοuseοut="Out(2)"><td>1</td><td>2</td><td>3</td></tr>
    </table>
    <script>
        function Over(n) {
            var tag = document.getElementsByTagName("tr");
            tag[n].style.backgroundColor="red";
        }
        function Out(n) {
            var tag = document.getElementsByTagName("tr");
            tag[n].style.backgroundColor="";
        }
    </script>
</body>
</html>

属性操作

     attributes
     getAttributes
     setAttributes

创建标签，并添加到HTML中

     a.  字符串形式
     b.  对象的方式
         document.createElement("input")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1">
        <input type="button" οnclick="AddEle()" value="+" />
        <input type="button" οnclick="AddElement()" value="+" />
        <input type="text" />
    </div>
    <script>
        function AddEle() {
            var tag="<p><input type='text' /></p>";
            document.getElementById("i1").insertAdjacentHTML("beforeend",tag);
        }
        function AddElement() {
            var input = document.createElement("input");
            input.setAttribute("type","text");
            input.style.color = "red";
            input.style.fontSize = "22px";
            var p = document.createElement("p");
            p.appendChild(input);
            document.getElementById("i1").appendChild(p);
        }
    </script>
</body>
</html>

提交表单

     任何标签都可以通过dom中的submit进行表单的提交
     document.getElementById("form").submit()

其它

    location.href                       获取当前地址
    location.href = location.href       页面刷新
    location.reload()
    location.href = "url"               重定向，跳转

    var obj=setInterval(function(){     创建定时器obj
            console.log(1);
        },2000);
    clearInterval(obj)                  清除定时器obj
    var Tim = setTimeout(func,2000)     2秒后执行func
    clearTimeout(Tim)                   清除定时操作

事件

    onclick,onblur,onfocus
    行为  样式  结构   相分离的页面？
    JS    CSS  HTML

    绑定事件：
        a   直接标签绑定
        b   现获取dom对象，然后在JS进行绑定

    this 当前触发事件的标签：
        a   第一种绑定方式
            <input id="i1" type="button" onclick="ClickOn(this)"
            function ClickOn(self){
                //self    当前点击的标签
            }
        b   第二种绑定方式
            tag.onclick=function(){
                //this代指当前点击的标签
                this.style.color="red";
            }
        c   第三种绑定方式
            tag.addEventListener("click",function(){
                console.log("aaa");
            },false);
            // 第一个参数表示标签要添加的事件名，第二个参数表示相应事件，
            // 第三个参数表示的是添加事件的顺序：true 捕捉 从下往上添加
            //                             false 冒泡 从上往下添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1">
        点我
    </div>
    <script>
        var tag = document.getElementById("i1");
        tag.addEventListener("click",function () {
            console.log("aaa");
        },false);
        tag.addEventListener("click",function () {
            console.log("bbb");
        },false);
    </script>
</body>
</html>

        active object=====> AO
            1.形式参数
            2.局部变量
            3.函数声明表达式

            1.形式参数
                AO.age=undefined
                AO.age=3
            2.局部变量
                AO.age=undefined
            3.函数声明表达式
                AO.age=function

            <script>
                function t1(age) {
                    console.log(age);   // function 由于function的优先级最高，直接替代了实参的传递
                    var age = 27;
                    console.log(age);   // 27
                    function age() {};
                    console.log(age)    // 27
                }
                t1(3);
            </script>

<!DOCTYPE html>
<!--DOM1-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1px" width="300px">
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
    </table>
    <script>
        var tag = document.getElementsByTagName("tr");
        var len = tag.length
        for (var i=0;i<len;i++){
            tag[i].οnmοuseοver=function () {
                this.style.backgroundColor="red";
            }
            tag[i].οnmοuseοut=function () {
                this.style.backgroundColor="";
            }
        }
    </script>
</body>
</html>