DOM

最新推荐文章于 2024-07-29 11:53:27 发布
最新推荐文章于 2024-07-29 11:53:27 发布
阅读量97 收藏
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56366181/article/details/117083105
版权

DOM树

获取元素

使用getElementByld()方法可以获取带有ID的元素对象

<body>
    <div id="time">2020-10-10</div>
    <script>
        //我们的文档页面是从上往下加载，所以先得有标签
        //get 获得element元素by通过驼峰命名法
        //参数是 id 大小写敏感的字符串
        //返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        //console.dir()打印我们返回的元素对象，更好的查看对象里面的属性何方法
        console.dir(timer);
    </script>
    </body>

使用标签名getElementsTagName()方法返回带有指定标签名的对象的集合

<div class="box">盒子</div>
    <div class="box">盒子</div>
    <div>
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>

    <script>
        //1. getElementsByClassName  根据类名获取某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        // querySelector()返回指定选择器的第一个元素对象
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        // querySelectorAll() 返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
    </script>

获取特殊元素（body html）

<script>
        //获取body标签
        var bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle);
        //获取html标签
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>

事件三要素

<button id="btn">唐伯虎</button>
    <script>
        //点击一个按钮，弹出对话框
        //1. 事件是由三部分组成   事件源   事件类型   事件处理程序   成为事件的三要素
        //事件源  事件被触发的对象
        var btn = document.getElementById('btn');
        //事件类型   如何触发什么时间   比如鼠标点击(onclick)  还是鼠标经过   还是键盘按下
        //事件处理程序  通过一个函数赋值的方式 完成
        btn.onclick = function () {
            alert('点秋香');
        }
    </script>

<body>
    <div>123</div>
    <script>
        //执行时间步骤
        //点击div 控制台输出 我被选中了
        //获取事件源
        var div = document.querySelector('div');
        //绑定事件
        //div.onclick
        //3.添加事件处理程序
        div.onclick = function() {
            alert('我被选中了');
        }
    </script>
</body>

常见的鼠标事件

在这里插入图片描述

改变元素内容

element.innerText 可以修改元素的内容

<button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>张三</p>
    <script>
        //当我们点击了按钮，div里面的文字会发生变化
        //获取元素
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        //注册事件
        btn.onclick = function () {
            div.innerText = getDate();

        }
        function getDate() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var array = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            return '今天是' + year + '年' + month + '月' + dates + '日' + array[day];
        }
        //元素可以不用添加事件
        var p = document.querySelector('p');
        p.innerText = getDate();
    </script>

innerText 和innerHTML 的区别

innerText 不识别html标签 去除空格和换行
innerHTML 识别html标签 保留空格和换行

 <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        //innerText 和 innerHTML 的区别
        //1. innerText  不识别html标签  去除空格和换行
        var div = document.querySelector('div');
        // div.innerText = '今天是2021年5月21号';
        //innerHTML  识别html标签  保留空格和换行
        div.innerHTML = '<strong>今天是</strong>2021年5月21号';
        //这两个元素是可读写的，可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);

    </script>

操作元素修改元素属性

<button id="xiao">小标签</button>
    <button id="11">二维码</button>
    <img src="images/regetype.png" alt="">
    <script>
        //修改元素属性 src
        var ldh = document.getElementById('xiao');
        var zxy = document.getElementById('11');
        var img = document.querySelector('img');
        //注册事件处理程序
        zxy.onclick = function () {
            img.src = 'images\account.png';
        }
        ldh.onclick = function () {
            img.src = 'images/regetype.png';
        }


    </script>

修改表单元素

<button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        //获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        //注册事件，处理程序
        //表单里面的值是通过value来修改的
        btn.onclick = function () {
            input.value = '点击后';
            //禁用表单  不能进行再次点击  disabled  
            //btn.disabled = true;
            this.disabled = true;//this指向的是事件函数的调用者
        }
    </script>

样式属性操作

element.style 行内样式操作
element.className 类名样式操作

常见的正则表达式服符号

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

创建正则表达式对象：
在这里插入图片描述
在这里插入图片描述
正则表达式对象的 test()方法
true/ false = 正则表达式.test(用户填写的字符串);

获取属性值

<div id="demo" index='1'></div>
    <script>
        //获取元素的属性值
        //element.属性
        var div = document.querySelector('div');
        console.log(div.id);
        //element.getAttribute('属性')   可以获取得到自定义属性
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
    </script>

更改属性值和移除属性

<div id="demo" index='1'></div>
    <script>
        //获取元素的属性值
        //element.属性
        var div = document.querySelector('div');
        console.log(div.id);
        //element.getAttribute('属性')   可以获取得到自定义属性
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
        //设置元素属性值
        //element.属性 = 值
        div.id = 'test';
        //element.setAttribute('属性', '值');  主要针对于自定义属性
        div.setAttribute('index', '2');
        //移除属性removeAttribute(属性)
        div.removeAttribute('index');
    </script>

H5规定自定义属性data-开头最为属性名并且赋值
比如<div data-index = '1'><div>

节点操作 利用DOM提供的方法进行获取元素

逻辑性不强，繁琐

利用节点层次关系获取元素

利用父子兄关系节点关系获取元素
逻辑性强，但是兼容性差

节点

至少拥有三个基本属性
节点类型：nodeType
节点名称：nodeName
节点值：nodeValue

节点层级

利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

父级节点

node.parentNode

<div class="box">
        <span class="erweimma"></span>
    </div>
    <script>
        //1.父节点parentNode  得到的是距离元素最近的父级节点
        var erweima = document.querySelector('.erweima');
        // var box = document.querySelector('.box');
        var box = erweima.parentNode;
    </script>

子节点

childNodes 得到所有的子节点包含元素节点和文本节点等等

children 返回所有的元素节点其余节点不返回

 <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="demo">
        <div class="box">
            <span class="erweima"></span>
        </div>
    </div>
    <script>
        //DOM提供的方法获取
        var ul = document.querySelector('ul');
        //var lis = ul.querySelectorAll('li');
        //子节点  childNodes得到所有的子节点包含元素节点和文本节点等等
        console.log(ul.childNodes);
        //children(非标准)  返回所有的元素节点其余节点不返回
        console.log(ul.children);
    </script>

获取第一个子节点，找不到返回null,包含所有的节点
firstChild
获取最后一个子节点
lastChild
第一个元素节点
firstElementChild

<ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        //firstChild
        console.log(ol.firstChild);
        //lastChild
        console.log(ol.lastChild);
        //firstElementChild
        console.log(ol.firstElementChild); 
        //实际上
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);
    </script>

兄弟节点

nextSibling
previousSibling
nextElementSibling
previousElementSibling

<div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div');
        //nextSibling得到的是下一个兄弟节点  包含元素节点 和文本节点等等
        console.log(div.nextSibling);
        console.log(div.previousSibling);
        //返回下一个兄弟元素节点
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);
    </script>

创建和添加节点

creatElement(‘tagName’)
appendChild(child)

 <ul>
        <li>123</li>
    </ul>
    <script>
        //创建节点元素节点
        var li = document.createElement('li');
        //添加节点
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        var lili = document.createElement('li');
        ul.appendChild(lili, ul.children[0]);
    </script>

删除节点（父节点里面的子节点）

node.remove(child)

 <button>删除</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>
    <script>
        //获取元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        //删除元素   node.remove(child)
        //ul.removeChild(ul.children[0]);
        //点击按钮依次删除里面的孩子
        btn.onclick = function () {
            if (ul.children.length == 0) {
                this.disabled = true;
            } else {
                ul.removeChild(ul.children[0]);
            }
        }

    </script>

复制节点

node.cloneNode()
注意：
/括号里面的参数为空或者里面是false,则是浅拷贝，只复制标签，不复制里面的内容
//括号里面的参数里面是true,则是深拷贝，复制标签和里面的内容

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        //node.cloneNode()
        //括号里面的参数为空或者里面是false,则是浅拷贝，只复制标签，不复制里面的内容
        //括号里面的参数里面是true,则是深拷贝，复制标签和里面的内容
        var ul = document.querySelector('ul');
        var lili = ul.children[0].cloneNode();
        ul.appendChild(lili);
    </script>

注册事件

给元素添加事件称为注册事件或者绑定事件
两种方式：传统方式和方法监听注册方式
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <script>
        var btns = document.querySelectorAll('button');
        //传统方式注册事件
        btns[0].onclick = function () {
            alert('hi');
        }
        btns[0].onclick = function () {
            alert('how are you');
        }
        //事件监听注册事件  addEventListener里面的事件类型值字符串需要加引号  不要on
        //同一个元素同一个事件可以添加多个监听器
        btns[1].addEventListener('click', function () {
            alert(22);
        })
        btns[1].addEventListener('click', function () {
            alert(33);
        })
    </script>

删除事件

<div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function () {
            alert(11);
            //传统方式删除事件
            divs[0].onclick = null;
        }
        divs[1].addEventListener('click', fn)//里面的fn调用不需要加()
        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
    </script>

DOM事件流

在这里插入图片描述
冒泡阶段和捕获阶段

   <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        //dom 事件流 三个阶段
        //  1.js代码中只能执行捕获或者冒泡其中的一个阶段
        //  2.onclick 和 attachEvent(ie) 只能得到冒泡阶段
        //  3.捕获阶段  如果addEventListener 第三个参数是 true那么则处于捕获阶段
        // var son = document.querySelector('.son');
        // son.addEventListener('click', function () {
        //     alert('son');
        // }, true);
        // var father = document.querySelector('.father');
        // father.addEventListener('click', function () {
        //     alert('father');
        // }, true);
        //  4.冒泡阶段  如果addEventListener 第三个参数是 false或者省略那么则处于冒泡阶段
        var son = document.querySelector('.son');
        son.addEventListener('click', function () {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function () {
            alert('father');
        }, false);
        document.addEventListener('click', function () {
            alert('document')
        }, false)
    </script>

事件对象

 <div>123</div>
    <script>
        //事件对象
        var div = document.querySelector('div');
        div.onclick = function (e) {
            // console.log(e);
            // console.log(window.event);
            e = e || window.event;
            console.log(e);
        }
        //1.event就是一个事件对象，写到我们侦听函数的小括号里面当形参来看
        //2.事件对象只有有了事件才会存在 他是系统创建的，不需要我们传递参数
        //3.事件对象是事件的一系列相关数据的集合 跟事件相关的
        // 4.这个事件对象可以自己命名
        //5. 事件对象又兼容性问题  兼容性写法
    </script>

事件对象常见的属性和方法
在这里插入图片描述

  <div>123</div>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub">
    </form>
    <script>
        //常见对象的属性和方法
        //1.返回事件类型
        var div = document.querySelector('div');
        div.addEventListener('click', fn);
        div.addEventListener('mouseover', fn);
        div.addEventListener('mouseout', fn);
        function fn() {
            console.log(e.type);
        }
        //阻止默认行为（事件）让链接不跳转 或者让提交按钮不提交
        var a = document.querySelector('a');
        a.addEventListener('click', function (e) {
            e.preventDefault();
        })
        //传统的注册方式
        a.onclick = function (e) {
            //普通浏览器
            e.preventDefault();
            //低版本浏览器   returnValue
            e.returnValue;
            //可以利用return falsez阻止默认行为，而且没有兼容性问题
            return false;
        }
    </script>

组织冒泡事件

e.stopPropagation() 阻止冒泡标准（兼容性问题）
e.cancleBubble = true; //传统方法

事件委托（委派 代理）

原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

<ul>
    <li>点我应有弹框在手</li>
    <li>点我应有弹框在手</li>
    <li>点我应有弹框在手</li>
    <li>点我应有弹框在手</li>
    <li>点我应有弹框在手</li>
</ul>
<script>
    //事件委托的核心原理：给父节点添加一个时间按监听器，然后利用冒泡原理影响设置每个子节点
    var ul = document.querySelector('ul');
    ul.addEventListener('click', function (e) {
        //alert('点我应有弹框在手');
        //e.target 这个可以得到我们点击的对象
        e.target.style.backgroundColor = 'pink';
    })

</script>

常用的鼠标事件
在这里插入图片描述
鼠标事件对象
在这里插入图片描述
常用的键盘事件
在这里插入图片描述
在这里插入图片描述
案例


```javascript
   <input type="text">
    <script>
        var serrch = document.querySelector('input');
        document.addEventListener('keyup', function (e) {
            if (e.keyCode == 83) {
                serrch.focus();
            }
        })
    </script>
凌霜傲雪9527
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
getElementsByTagName()
weixin_30443075的博客
11-01 3011
getElementsByTagName()：方法的用途是寻找有着给定标签名的所有的元素。 element = document.getElementsByTagName(tagName); 这个方法返回一个节点的集合，这个集合可以当做一个数组来处理。这个集合的length属性等于当前文档里有着给定标签名的所有元素的总个数。这个数组里面的每个元素都是一个对象，他们都有着nodeName...
getElementsByTagName() 方法
m0_57835615的博客
05-29 2062
getElementsByTagName() 方法返回带有指定标签名的所有元素。 语法格式： node.getElementsByTagName('标签名');
用document.getElementsTagName为控件添加事件。
Fanbin168的专栏
03-23 3868
DOCTYPE htmlPUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html xmlns="http://www.w3.org/1999/xhtml"> head>     title>tit
js 获取getElementsTagName()方法返回值的内容
weixin_30449453的博客
01-30 308
<div id="news-top" class="section"> <h3>Some title</h3> <div class="content"> <ul> <li><span>HTML</span&g...
HTML DOM
姚格格---小豹blog
09-27 147
HTML DOM 1.首先： DOM 是W3C的标准，定义了访问HTML和XML文档的标准。 2.W3C DOM标准被分成3个不同的部分： &gt;核心DOM &gt;XML DOM &gt;HTML DOM 3.最主要就是介绍HTML DOM ： 定义了所有HTML元素的对象和属性，以及访问他们的方法。 &gt;HTML的标准对象模型 ...
Dom
03-09
**DOM（Document Object Model）详解** DOM，全称为文档对象模型（Document Object Model），是W3C组织制定的一种标准，它提供了一种结构化的表示XML或HTML文档的方式，并且允许程序和脚本动态地访问和更新文档的...
dom
02-24
DOM，全称为“Document Object Model”，中文译为“文档对象模型”，是Web开发中的一个核心概念，尤其是在JavaScript中。它是一种标准，定义了如何表示HTML或XML文档，并提供了与这些文档交互的API（应用程序编程...
getElementsByTagName的详解
热门推荐
木雷双雄7
06-30 2万+
今天在看《JavaScript权威指南第六版》根据元素标签获取元素时，有讲到getElementsByTagName返回对象为NodeList，经过测试多个浏览器的运行结果都是HTML集合HTMLCollection。 getElementsByTagName var tagDiv = document.getElementsByTagName("div"); console
JavaScript getElementsByTagName()方法介绍
路虽远，行则必至！
06-25 1万+
getElementsByTagName() 根据 标签名 获取一组元素节点对象 getElementsByTagName()可以根据 标签名 获取一组元素节点对象，该方法所有浏览器均可使用，即使查询到的元素只有一个，也会封装到数组中返回 注意：这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中，如下图： 我们若要查找具体元素，就必须使用索引，如下图： 我们可以通过 in...
Javascript当中的 getElementsByTagName() 方法
代码人生的博客
04-26 5896
定义和用法 getElementsByTagName() 方法可返回带有指定标签名的对象的集合。 语法 document.getElementsByTagName(tagname) 说明 getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。 如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。 提示和注释 注释：传递给 getElementsByTagNa
getElementsByTagName()获取第一层子标签的集合
莫不静好
12-27 5669
&amp;lt;div id=&quot;warp&quot; class=&quot;tab-content&quot;&amp;gt; &amp;lt;div class=&quot;first&quot;&amp;gt; &amp;lt;div class=&quot;item-top&quot;&amp;gt;&amp;lt;/div&amp;gt;
1号店的总结
Vipwxs的博客
01-24 1689
Dom对象转成jQuery对象： jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。我们使用jQuery的同时也能混合JavaScript原生代码一起使用。在很多场景中，我们需要jQuery与DOM能够相互的转换，它们都是可以操作的DOM元素，jQuery是一个类数组对象，而DOM对
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 635
JavaScript青少年简明教程：函数及其相关知识（下）
【React 】开发环境搭建详细指南
lph159的博客
07-24 1299
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
最新发布
努力做最接地气的编程干货分享，感谢关注
07-29 665
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 251
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 207
【代码】vue el-select的下拉树形结构。
JavaScript DOM 高级编程指南
"JavaScript DOM 高级程序设计（加）桑贝斯" JavaScript DOM（Document Object Model）高级程序设计是Web开发中的重要主题，它涉及到如何使用JavaScript与网页的结构进行交互，包括创建、修改和操作HTML和XML文档的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值