Dom总结

最新推荐文章于 2022-11-01 17:55:57 发布

转载最新推荐文章于 2022-11-01 17:55:57 发布 · 62 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bainianminguo/p/7628696.html

本文详细介绍了DOM操作的基础知识，包括选择器的使用、事件处理、文本内容的修改、新增标签的方法、设置标签属性、表单提交及定时器的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Dom：Dom的代码放在body的最后，写在<script></script>中，为了防止Dom执行失败导致页面无法正常加载

一、选择器

选择器的意思是什么？就是找到标签，并对该标签做操作

先看一段html代码

 <meta charset="UTF-8">
    <title>查找标签</title>
    <style>
        .cc{
            border-width: 2px;
            border-style: solid;
            border-color: red;
        }
        .bb{
            color: green;
            font-size: 10px;
        }
    </style>
</head>
<body>
    <div id="aa" class="cc">
        这是一个div标签
    </div>
    <div>
        <input name="user" type="text" value="请输入关键字">
        <a class="cc" href="http://www.baidu.com">跳转到百度页面</a>
    </div>

方式1，通过ClassName查找，这里要特别注意，如果是Elements，最终得到的结果是一个对象的list，如果是Element，则为指定的对象，比如下面的例子，他get到的结果其实就是一个对象list

var c = document.getElementsByClassName("cc")
console.log(c[0].innerText)
console.log(c[1].innerText)

结果如下

这是一个div标签
跳转到百度页面

方法2，通过TagName查找，这里可以注意一下，Elements是一个复数，所以最终的结果还是一个对象的list

var i = document.getElementsByTagName("div")
console.log(i[0].innerText)

结果如下

这是一个div标签

方式3、通过id来查找，因为id虽然没有强制要求唯一，但是这个唯一需要程序员自己去保证，所以这里是Element是单数，所以得到的结果是一个对象

var a = document.getElementById("aa")
console.log(a.innerText)

结果如下

这是一个div标签

方式4、通过name属性来查找，可以看到Elements也是一个复数，所以得到的是对象的list

var b = document.getElementsByName("user")
console.log(b[0].value)

结果如下

请输入关键字

二、实现一个效果，点击按钮，数字“+1”，这里关键需要注册一个事件，onclick="Add()"，也就是说鼠标点击按钮，就会触发该事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自加1</title>
    <style>
        .cc{
            border-color: red;
            border-width: 4px;
            border-style: solid;
            outline-color: blue;
            outline-style: double;
            outline-width: 8px;
            width: 100px;
            height: 100px;
            background-color: aqua;
            color: black;
            float: right;

        }
    </style>
</head>
<body>
    <div class="cc">
        <div id="pp">1</div>
        <input type="button" value="加1" onclick="add()">
    </div>
    <script>
        function add() {
            var num = document.getElementById("pp")
            num.innerText ++

        }

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

三、实现如何通过Dom对html文件中的文本内容进行修改，这里需要注意一下，value主要用来获取用户输入的值，比如在标签select input testarea中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作文本的内容</title>
    <style>
        .cc{
            color: black;
            background-color: palegreen;
            font-size: 20px;
            border-style: solid;
            border-width: 2px;
            border-color: red;
            width: 100px;
            height: 100px;
            float: right;
            overflow: auto;
        }
        .bb{
            font-size: 10px;
            color: red;
            float: left;
        }
    </style>
</head>
<body>
    <div>
        <textare class="cc">这是一个多行文本输入框这是一个多行文本输入框这是一个多行文本输入框</textare>
    </div>
    <dic class="bb">
        <ul>
                <li>香蕉</li>
                <li>苹果</li>
                <li>面包</li>
                <li>牛奶</li>
                <li>羊奶</li>
        </ul>
        <ol>
                <li>香蕉</li>
                <li>苹果</li>
                <li>面包</li>
                <li>牛奶</li>
                <li>羊奶</li>
        </ol>
        用户名：<input name="user" type="text" value="cui">
          密码：<input name="pwd" type="password" value="123">
    </dic>
    <script>
        var a = document.getElementsByClassName("cc")
        alert(a[0].innerText)
        a[0].innerText = "这是替换后的文本内容"

        var b = document.getElementsByTagName("li")
        b[9].innerText = "我的父亲母亲"

        var c = document.getElementsByTagName("input")
        alert(c[0].value)
        alert(c[1].value)

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

四、学习一下confirm，这个函数会弹出一个提示框，如果点确定，则返回true，如果点击否，则返回false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>confirm</title>
</head>
<body>
    <div>
        <input type="button" value="点我弹框出来" onmouseover="xx()"/>
    </div>
    <script>
        function xx() {
            var ret = confirm("是否确认")
            alert(ret)

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

五、实现给html文件新增标签的效果，这里有2个方法可以实现，方式1是通过直接拼接字符串实现，方式2是通过对象的createElement添加标签

a、先看用方式1实现添加标签，这个比较弱

在进入正题前，我们先看一个小代码；这里是用一个a标签来做测试，a标签本身自己有一个事件，这里我们又自定义了一个事件，正常情况下，会先执行自定义的事件，然后在执行默认的事件；如果在定义事件的时候没有return，那么不论自定义事件函数返回值是true还是false，执行自定义事件都会继续执行默认事件，但是如果在定义事件的时候有return关键字，那么如果事件函数返回true，则执行完成自定义事件后，又会执行默认事件，但是事件函数返回的值为false，那么执行完成自定义事件后，就不会执行默认事件了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建标签1</title>
</head>
<body>
    <a href="http://www.baidu.com" onclick="test1()">百度一下</a>
    <br>
    <a href="http://www.baidu.com" onclick="return test2()">百度一下</a>
     <br>
    <a href="http://www.baidu.com" onclick="return test3()">不能百度</a>
     <br>
    <a href="http://www.baidu.com" onclick="test4()">百度一下</a>
    <script>
        function test1() {
            alert("跳转到百度")
        }
        function test2() {
            alert("跳转到百度")
            return true
        }
        function test3() {
            alert("不跳转到百度")
            return false
        }
        function test4() {
            alert("跳转到百度")
            return false
        }
    </script>
</body>
</html>

b、我们接着往下学习，使用字符串来添加标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="添加超链接标签" onclick="aaa()">
    <input type="button" value="添加div标签" onclick="bbb()">
    <div id="ccc"></div>

    <a id="bb"></a>
    <script>
        function aaa(){
            var a = document.getElementById("bb");
            alert("添加一个百度的超链接");
            a.href = "http://www.baidu.com";
            a.innerText = "百度一下";
        }
        function bbb() {
            var b = document.getElementById("ccc")
            alert("追加一个div标签")
            a = "<input type='test' value='新增的标签'>"
            c = "<a href='http://www.baidu.com'>百度一下</a>"
            b.innerHTML = c
//            b.appendChild(a)

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

c、使用对象的createElement方法来创建对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="aa"><input type="button" value="添加网易" onclick="add1()"></div>
    <div id="cc"><input type="button" value="添加百度" onclick="add2()"></div>
    <div id="bb"></div>
    <script>
        function add1() {
            var b = document.getElementById("bb")
            html_obj = document.createElement("a")
            html_obj.href = "http://www.163.com"
            html_obj.innerText = "网易一下"
            b.appendChild(html_obj)
        }
        function add2() {
            var b = document.getElementById("bb")
            html_obj = document.createElement("h4")
//            html_obj.href = "http://www.baidu.com"
            html_obj.innerText = "百度一下"
            b.appendChild(html_obj)
        }
    </script>
</body>
</html>

六、设置标签的属性

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置标签属性</title>
</head>
<body>
    <div id="aaaa">aaaaaaa</div>
    <script>
        var nid = document.getElementById("aaaa")
        nid.setAttribute("name","bbb")
//        设置标签属性
        nid.setAttribute("sb","ccc")
        nid.getAttribute("sb")
//        超找标签属性
    </script>
</body>
</html>

七、提交表单，如果需要提交数据，就需要用form标签和submit标签了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提交表单</title>
</head>
<body>
    <form id="aaa" action="https://www.sogou.com/web" method="get">
        <input id="bbb" name="query" type="text" value="搜狗一下" onmousemove="f1()" >
        <input id="ccc" type="submit" value="提交" onclick="submit()">

    </form>
    <script>
        function  submit() {
            document.getElementById("aaa").submit()
        }
        function f1() {
            var b = document.getElementById("bbb")
            if(b.value.trim()){
                b.value = ""
            }else {
                b.value = "搜狗一下"
            }

        }

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

八、实现一个搜索框，效果是鼠标放上去，value值消失，鼠标移走，默认值恢复

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="s1" value="请输入关键字" onfocus="func()" onblur="func1()">
    <script>
        function func() {
            var i = document.getElementById("s1")
            if(i.value == "请输入关键字"){
                i.value = ""
            }
        }
//        实现的效果是把鼠标移动上去，把关键字去掉
        function  func1() {
            var i = document.getElementById("s1")
            if(i.value.trim() == ""){
                i.value = "请输入关键字"
            }

        }
//        实现的效果是移动走鼠标，吧关键字给恢复了
    </script>
</body>
</html>

九、实现一个定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title id="tt">我的父亲母球</title>
</head>
<body>
    <input type="button" value="点我停下来" onclick="kfc()">
    <script>
//        setInterval("操作","间隔") 间隔的默认单位是毫秒
//        setInterval("alert(123)","2000")
//        每个2秒钟执行一次alert
        setTimeout("alert(123)",1000)
//        这个意思是只执行一次，然后就退出，如果想清除他，则需要用clearTimeoutq去清除
        obj = setInterval(f,2000)
        function f() {
            var s = document.getElementById("tt")
            var first = s.innerText.charAt()
            var sub = s.innerText.substring(1,s.innerText.length)
            new_str = sub + first
            s.innerText = new_str
        }
        function kfc() {
//            清除定时器，定时器的任务就不会执行
            clearInterval(obj)

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

转载于:https://www.cnblogs.com/bainianminguo/p/7628696.html