JS：Dom的基本使用

前言：
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

一、查找对象（元素）
1、直接查找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合

因为标签的tag id是唯一的，所以第一种方式获取到的元素是唯一的对象，后三种获取到的对象是一个数组（list），需要用for循环来操作。

2、间接关系查找
parentNode // 父节点（标签）
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点

parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素

获取到元素之后，为了让它‘动’起来，需要操作元素。

二、操作元素
1、内容
innerText 标签内的文本内容
outerText
innerHTML HTML内容
value 值

以上均可以方法均可以直接查看，也可以使用“=”重新赋值

2、属性

attributes // 获取所有标签属性，可以用”=”重新赋值
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性

var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(attr);

3、class操作
className // 获取所有类名
classList.remove(cls) // 删除指定类
classList.add(cls) // 添加类

4、其他操作
document.geElementById(‘form’).submit() 提交表单

表单提交的默认方式为：在form标签中，submit类的标签点击按钮可以提交form表单内部的所有input text类型标签中的文本，使用Dom操作这个方式，可以给任意标签定义事件触发提交表单动作。

//窗口操作
console.log 输出框
alert 弹出框
confirm 确认框

// URL和刷新
location.href 获取URL
location.href = “url” 重定向
location.reload() 重新加载

// 定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器

有了操作，那么就得有触发操作的事件发生.

三、事件
各类事件及触发条件：
这里写图片描述

四、样例：

1.修改标签内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="d1">我是标题</div>
    <span>我是子标签</span>
    <span>我是子标签</span>
    <span>我是子标签</span>
    <span>我是子标签</span>
    <script>
        document.getElementById('d1').innerText='我是新标题';
        tags=document.getElementsByTagName('span'); //通过标签名称类型来获取标签对象数组
        for (var i =0;i<tags.length;i+=1) {
            tags[i].innerText='新子标题';
        }

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

2.提交栏，点击出现提交栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Add Info</title>
    <style>
        .c1{
            background-color: black;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index:2;
            opacity: 0.4;
        }
        .c2{
            background-color: white;
            height: 300px;
            width: 300px;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -300px;
            z-index: 3;  //层次级别，越大越置顶
        }
        .hide{
            display: none;
        }
    </style>
</head>

        <!--显示层-->
<body style="margin: 0 auto">
    <div id="d1" style="margin-left: 100px;margin-top: 100px">
        <input type="button" value="Add" style="background-color: aqua;height: 30px;width: 70px;" onclick="show_tags();"/>
    </div>

    <!--遮罩层-->
    <div id='d2' class="c1 hide"></div>


    <!--提交层-->
    <div id='d3' class="c2 hide">
        <div>名称：</div>
        <div><input type="text" style="height: 30px;width: 200px;margin-left: 40px"/></div>
        <div>资料：</div>
        <div><input type="text" style="height: 30px;width: 200px;margin-left: 40px"></div>
        <div>备注：</div>
        <div><input type="text" style="height: 30px;width: 200px;margin-left: 40px"></div>
        <div style="margin-top: 20px">
        <input type="button" value="submit" onclick="hide_tags();" style="margin-left: 40px">
        <input type="button" value="cancel" onclick="hide_tags();" style="margin-right: 40px">
        </div>
    </div>
    <script>
        function hide_tags() {
            document.getElementById('d2').classList.add('hide');
            document.getElementById('d3').classList.add('hide');

        }
        function show_tags() {
            document.getElementById('d2').classList.remove('hide');
            document.getElementById('d3').classList.remove('hide');
        }
    </script>
</body>
</html>

效果：
这里写图片描述

3.滚动横幅（有关很的low网站内常见）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="n1" style="font-size: 30px">欢迎XXX莅临指导&nbsp;&nbsp;&nbsp;&nbsp;</div>
    <script>
        function run() {
            var lable_info=document.getElementById("n1");  //根据标签id获取元素div
            var content=lable_info.innerText;    //获取元素标签内的文字内容
            var f =content.charAt(0);            //获取字符串内的第一个字符
            var other = content.substring(1,content.length);  //获取第二个字符到最后一个字符
            var new_info =other + f;
            lable_info.innerText= new_info;
        }

        setInterval('run()',300);   //间隔运行，单位ms
    </script>
</body>
</html>

效果：

这里写图片描述

4.创建标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>
        <input type="button" value="Add" onclick="AddEle1();"/>
        <input type="button" value="Add" onclick="AddEle2();"/>
    </p>
    <div id="1">
        <p><input type="text" style="height: 30px;width: 200px"/></p>
    </div>

    <script>
        function AddEle1() {
            ele="<p><input type='text' style='height: 30px;width: 200px'/></p>";
            obj=document.getElementById('1');
            obj.insertAdjacentHTML("beforeEnd",ele);
            //直接以字符串的形式添加标签及设定样式,再insertAdjacentHTML("beforeEnd",ele);指定位置，插入元素，位置参数只有
            //四个选项，分别是beforeBegin、AfterBegin、beforeEnd、afterEnd
        }

        function AddEle2() {
            tag_input=document.createElement("input");
            tag_input.setAttribute("type","text");
            tag_input.style.height='30px';
            tag_input.style.width="200px";

            tag_p=document.createElement('p');
            tag_p.appendChild(tag_input);

            obj=document.getElementById('1');
            obj.appendChild(tag_p);
            //document.createElement方式创建input标签，再设定属性，指定style，再将input标签放入p标签中，最后将p标签放入obj中,

        }
    </script>
</body>

</html>

5.鼠标悬停变色，挪走还原

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1px" width="200px">
        <tr><td>a</td><td>d</td></tr>
        <tr><td>b</td><td>e</td></tr>
        <tr><td>c</td><td>f</td></tr>
    </table>
    <script>
        var obj = document.getElementsByTagName('td');
        for (var i =0;i<obj.length;i++) {
            obj[i].onmouseover = function() {
                this.style.backgroundColor="green";
                //this代指obj[i]这个对象，这里不能直接使用obj[i]，会报错
            };

            obj[i].onmouseout= function() {
                this.style.backgroundColor='';
            }
        }
    </script>
</body>
</html>

5.练习
对照某当网主页，借用了几张图片，写了个相似的页面出来，非广告党 o(￣︶￣)o

这里写图片描述

使用以上Dom知识点，实现了悬停展开下拉栏、搜索框默认文字鼠标触碰消失、边缘固定返回顶部button等

JS：Dom的基本使用

猜你喜欢