JS：Dom的基本使用

冷不防 2022-06-02 00:59 88阅读 0赞

**前言：**  
文档对象模型（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 清除单次定时器

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

**三、事件**  
各类事件及触发条件：  
![这里写图片描述][SouthEast]

**四、样例：**

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>

效果：  
![这里写图片描述][SouthEast 1]

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莅临指导    </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>

效果：

![这里写图片描述][SouthEast 2]

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

![这里写图片描述][SouthEast 3]

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

[SouthEast]: /images/20220602/04656b0ace2247749b30f1e2e642bca8.png
[SouthEast 1]: /images/20220602/1508960e6c694559bc3a2b128a668a52.png
[SouthEast 2]: /images/20220602/4f336ce8849d47dabcea2ff7bf3ffe74.png
[SouthEast 3]: /images/20220602/a158582ef8554544b56d0c99f1faf15a.png