0
点赞
收藏
分享

微信扫一扫

JavaScript中DOM操作

hoohack 2022-02-15 阅读 86
html执行程序点击事件
加载失败


目录


​​DOM介绍​​

​​获取元素​​

​​操作元素 ​​

​​节点操作​​

DOM介绍

JavaScript一共包括三部分，分别是ECMAScript也就是JavaScript基础、DOM和BOM，前面的文章已经讲过ECMAScrit了、这里是ECMAScript的链接​

今天来将一下DOM，先说说什么是DOM，DOM(Document Object Model)文档对象模型，所谓文档，也就是对网页中的内容、结构和样式进行操作，对象也就是在操作过程中返回值为对象类型，我们学习DOM主要就是对元素进行创建、增、删、改、查、属性操作、时间操作，来看下DOM树吧，最顶层就是Document

JavaScript中DOM操作_执行程序

获取元素

获取元素有很多方法，可以通过id获取，可以通过类获取，其中querySelector既可以通过id也能通过类，详细内容都在注释里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取元素</title>
</head>
<body>
<div id="time">2019.10.12</div>
<div class="box">盒子</div>
<div class="box">盒子</div>
<ul id="ul">
    <li>我是丽丽</li>
    <li>我是丽丽</li>
    <li>我是丽丽</li>
    <li>我是丽丽</li>
    <li>我是丽丽</li>
</ul>
<script>
    //js是从上往下执行的，所以js要写到div下面
    //通过id获得元素
    var time = document.getElementById('time');
    console.log(time);//这里就获得了<div id="time">2019.10.12</div>元素
    console.log(typeof time);//返回的time是一个object对象

    //获取多个元素
    var lis = document.getElementsByTagName('li');//这里返回的是个集合，伪数组的形式
    console.log(lis);//这里可以通过下标访问，第一个元素是lis[0]

    //如果这里有很多的li而你只想获得ul中的li可以如下指定获取方法
    var ul = document.getElementById('ul');
    var lis1 = ul.getElementsByTagName('li');
    console.log(lis1);

    //通过class获得元素
    var boxs = document.getElementsByClassName('box');
    console.log(boxs);

    //querySelector() 返回指定选择器的第一个元素，类要加. id要加#，这个比较常用
    var box = document.querySelector('.box');//这是类选择器
    console.log(box);
    var ul1 = document.querySelector('#ul');//这是id选择器
    console.log(ul1);
    var li = document.querySelector('li');//标签选择器
    console.log(li);

    //querySelectorAll() 返回一个集合，是个伪数组的形式
    var allBox = document.querySelectorAll('.box');
    console.log(allBox);
    var lis2 = document.querySelectorAll('li');
    console.log(lis2);
</script>
</body>
</html>

运行结果

JavaScript中DOM操作_点击事件_02

操作元素 

操作元素是个重头戏了，可以通过元素内容、元素属性、表单属性、样式属性进行操作，具体操作都有注释，由于运行是交互式的结果，这里就进行演示了，只能截一张表面上的图了，感兴趣的可以复制代码自己尝试下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作元素</title>
    <style>
        .d {
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .change {
            width: 500px;
            height: 500px;
            background-color: pink;
        }
    </style>
</head>
<body>
<button id="btn">点击我</button>
<div>点击按钮，我会发生变化</div>
<button id="btn1">盒子1</button>
<button id="btn2">盒子2</button><br>
<img src="btn1.jpg" alt="我是盒子1"><br>
<button id="btn3">按钮</button>
<input type="text" value="输入内容">
<div class="d"></div>
<div id="dd" data-index="2"></div>
<script>
    //元素内容操作
    var btn = document.querySelector('#btn');
    var div = document.querySelector('div');
    //这里用到了onclick点击事件，后面会着重讲解事件
    btn.onclick = function () {
        //div.innerText = '<strong>我变化了</strong>';
        //innerText是不能识别HTML标签的，而innerTHML可以识别HTML标签，后者比较常用
        div.innerHTML = '<strong>我变化了</strong>';
    }

    //元素属性操作
    var btn1 = document.querySelector('#btn1');
    var btn2 = document.querySelector('#btn2');
    var img = document.querySelector('img');
    btn1.onclick = function () {
        img.src = 'btn1.jpg';
        img.alt = '我是盒子1';
    }
    btn2.onclick = function () {
        img.src = 'btn2.jpg';
        img.alt = '我是盒子2';
    }

    //表单属性操作
    var btn3 = document.querySelector('#btn3');
    var input = document.querySelector('input');

    btn3.onclick = function () {
        input.value = '我被点击了';
        //当点击之后可以通过disabled禁用点击按钮
        btn3.disabled = true;//也可以用this.disabled = true;
    }

    //样式属性操作
    var di = document.querySelector('.d');
    di.onclick = function () {
        //单个改变样式
        // this.style.backgroundColor = 'blue';
        // this.style.width = '300px';

        //通过类的方式修改多个样式
        this.className = 'change';
    }

    //自定义属性操作
    var dd = document.querySelector('#dd');
    console.log(dd.id);//元素直接点属性，这里的属性是内置的属性
    console.log(dd.getAttribute('data-index'));//这里通过getAttribute()获得自定义属性，一般是data-开头
    dd.setAttribute('data-time',10);//这是设置属性
</script>
</body>
</html>

运行结果：

JavaScript中DOM操作_html_03

节点操作

在DOM中所有的节点组成了一棵树，树中的各个节点有父子关系和兄弟关系，这里演示了获得父节点、获得子节点、获得第一个和最后一个节点、获得兄弟节点、动态创建节点、删除节点还有辅助节点，在这里我都写到了一个文件中，方便读者复制了，自己运行，好好思考其中的意思

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点操作</title>
</head>
<body>
<div class="box">
    <span class="x">x</span>
</div>
<ul>
    <li>hello</li>
    <li></li>
    <li></li>
</ul>
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>
<div class="box1">我是div</div>
<span class="sp">我是span</span>
<script>
    //获得父节点
    var x = document.querySelector('.x');//这是拿到了span元素
    console.log(x);
    var div = x.parentNode;//用节点操作，可以直接拿到离它最近的父节点，节点也就是上面展示的DOM树
    console.log(div);

    //获得子节点
    var ul = document.querySelector('ul');
    var lis = ul.childNodes;//这里会得到7个元素，其中有3个元素节点li，4个文本节点这里是换行
    console.log(lis);
    var lis1 = ul.children;//这里得到的是4个元素，都是li
    console.log(lis1);

    //获得第一个和最后一个节点，当然了也可以通过上面获得的lis[0]来访问第一个，长度减1获得最后一个
    var ol = document.querySelector('ol');
    console.log(ol.firstChild);//这是第一个节点，但是这是text文本节点
    console.log(ol.lastChild);//这是最后一个节点，但是这是text文本节点
    console.log(ol.firstElementChild);//这是第一个元素，也就是li
    console.log(ol.lastElementChild);//这是最后一个元素，也就是li

    //获得兄弟节点
    var div1 = document.querySelector('.box1');
    console.log(div1.nextSibling);//这里获得的是下一个节点，这里是text文本节点
    console.log(div1.previousSibling);//这里获得的是上一个节点，这里是text文本节点
    console.log(div1.nextElementSibling);//这里获得的是span也就是下一个元素节点
    console.log(div1.previousElementSibling);//这里返回的是ol也就是上一个元素节点

    //动态创建节点
    var li = document.createElement('li');
    var ul1 = document.querySelector('ul');
    ul1.appendChild(li);//将li节点追加到ul后面
    var li1 = document.createElement('li');
    ul1.insertBefore(li1,ul.children[0]);//在某个元素前插入元素

    //删除节点
    var ul2 = document.querySelector('ul');
    ul2.removeChild(ul.children[0]);//删除父元素中的子节点

    //复制节点
    var ul3 = document.querySelector('ul');
    var li3 = ul3.children[0].cloneNode();//这里的复制是只复制标签，不复制内容
    ul3.appendChild(li3);
    var li4 = ul3.children[0].cloneNode(true);//这里父子的有内容
    ul3.appendChild(li4);
</script>
</body>
</html>

运行结果：

JavaScript中DOM操作_执行程序_04

事件操作 

事件注册操作

事件注册操作中，有两种常用的方法，一种是传统的方式，另一种是比较常用的方式，在这里一一列出，这里需要自己运行点击才能看到结果，所以这个就不截图了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件注册操作</title>
</head>
<body>
<button>传统注册事件</button>
<button>方法监听注册事件</button>
<script>
    //在下面的测试中，屏幕只会弹出一个world框框，该传统方式会把第一个框框覆盖掉
    var btns = document.querySelectorAll('button');
    btns[0].onclick = function () {
        alert('hello');
    }
    btns[0].onclick = function () {
        alert('world');
    }

    //这个是用事件监听注册事件，解决了传统的覆盖问题，比较常用
    btns[1].addEventListener('click',function () {
        alert('欢迎');
    });
    btns[1].addEventListener('click',function () {
        alert('光临');
    });
</script>
</body>
</html>

删除事件

有些事件你只想执行有限次，所以你需要用到删除事件，就像注册账号时，发送过一个验证码之后，需要等一定的事件才能再次发送一样，这里也是展示两种方式的删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除事件</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
    var divs = document.querySelectorAll('div');

    //传统方式删除事件
    divs[0].onclick = function () {
        alert('1');
        divs[0].onclick = null;
    }

    divs[1].addEventListener('click',fn);
    function fn() {
        alert('2');
        divs[1].removeEventListener('click',fn);
    }
</script>
</body>
</html>

DOM事件流

关于这个DOM事件流的描述，我都写到了注释里了，简单来说就是事件执行是有一定顺序的，可以理解为从父到子，从子到父

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM事件流</title>
    <style>
        .father {
            width: 200px;
            height: 200px;;
            background-color: green;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<!--DOM事件流分为三个阶段，一个是捕获阶段，一个是目标阶段，最后一个是冒泡阶段
如果我们给div注册了点击事件，那么首先是document接收到点击事件，没有执行程序，然后html接收到点击事件
没有执行程序，然后再是body接受到点击事件，也没有执行程序，这是捕获阶段。然后找到div，有执行程序，
找到div就是目标阶段了。 然后再回到body，收到点击事件，没有执行程序，再到html，也没有执行程序，最后到
document，也没有执行程序，这就是冒泡阶段-->
<div class="father">
    <div class="son">son</div>
</div>

<script>

    //捕获阶段，addEventListener 第三个参数为true
    // document->html->body->father->son
    var son = document.querySelector('.son');
    /*son.addEventListener('click',function () {
        alert('son');
    },true);

    var father = document.querySelector('.father');
    father.addEventListener('click',function () {
        alert('father');
    },true);*/

    //冒泡阶段, addEventListener 第三个参数为false，或者是省略
    // son->father->body->html->document
    son.addEventListener('click',function () {
        alert('son');
    },false);

    var father = document.querySelector('.father');
    father.addEventListener('click',function () {
        alert('father');
    },false);

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

事件对象

事件对象，也就相当于一个形参，是系统自动设置的，里面有很多的参数，这里截图展示下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象</title>
</head>
<body>
<div>点击试试</div>
<script>
    //传统方式
    var div = document.querySelector('div');
    // div.onclick = function (event) {
    //     //这里的event就是一个事件对象，是系统自动创建的，里面是事件的相关数据的集合
    //     //这里的event也可以写成e，反正只是个形参
    //     console.log(event);
    // }

    //添加监听方式
    div.addEventListener('click',function (e) {
        console.log(e);
    });
</script>
</body>
</html>

JavaScript中DOM操作_html_05

 上面有一个是target，返回的是div，在这里很容易与this产生混淆，这里举例单独说下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
<div>123</div>
<ul>
    <li>abc</li>
    <li>abc</li>
    <li>abc</li>
</ul>
<script>
    var div = document.querySelector('div');
    div.addEventListener('click',function (e) {
        console.log(e.target);//返回的是触发事件的对象
        console.log(this);//返回的是绑定事件的对象
    })
    var ul = document.querySelector('ul');
    ul.addEventListener('click',function (e) {
        console.log(e.target);//这里指向我们点击的对象，点击li返回就是li
        console.log(this);//这里指向的绑定事件，也就是ul
    })
</script>
</body>
</html>

当点击ul中的li的时候，返回的结果是不一样的

JavaScript中DOM操作_点击事件_06


举报

相关推荐

JavaScript中的 DOM操作

javascript前端html

JavaScript中DOM操作标签属性

javascriptlinqhtml

JavaScript：DOM操作

1024程序员节html元素节点删除节点编程语言

JavaScript操作 DOM

javascript前端html

Javascript——Dom操作

javascript前端javacss

javascript DOM操作中的insertAdjacentHTML方法

html字符串chrome虚拟化云计算

JavaScript中DOM操作获取标签对象

javascript前端html

javascript DOM的操作

javascriptHTML选择器JavaScript前端开发

【JavaScript】DOM操作表格

jqueryjavascriptDOMhtml加载JavaScript前端开发

JavaScript（DOM节点操作）

javascriptwebviewelementui
0 条评论
加载失败