1、DOM 获取元素

您所在的位置：网站首页 › uniapp获取元素 › 1、DOM 获取元素

1、DOM 获取元素

2023-05-17 23:11| 来源: 网络整理| 查看: 265

一. 基本概念介绍 1. DOM

DOM全称: Document Object Model 既文档对象模型

1. Document -->文档, 整个网页 2. Object -->对象,网页中任何一个标签都是一个对象 3. Model --> 模型,用来描述标签之间的关系 2.DOM树

DOM树, 就是标签之间的关系模型,DOM树的作用就是用来描述标签之间的关系

节点在DOM树(文档对象模型)中任何的一个标签,标签的属性,标签内容,回车换行,注释都叫节点元素在DOM树(文档对象模型)中任何一个html标签都叫元素 3.DOM对象

DOM对象本质上是浏览器根据html标签生成的 JS标签对象

DOM对象的本质就是一个html标签操作DOM其实就是在操作网页中的标签二.获取标签(DOM对象) 1. 通过id获取-兼容性最好语法

document.getElementById(‘标签id名’); 例如: var elemt = document.getElementById(one’);

返回值

document.getElementById(‘标签id名’) 返回得到的结果是一个 DOM对象

兼容性

任何浏览器都支持

总结 document.getElementById() 只能根据标签id名获取一个标签如果页面中标签id重复(不推荐写法),通过getElementById()只能获取满足条件的第一个标签如果考虑兼容性,推荐使用该方式获取标签 2.通过标签名称获取语法 document.getElementsByTagName('标签名'); 例如: var res = document.getElementsByTagName('div'); 返回值返回的结果是一个伪数组数组中每一个值都是一个具体的DOM标签对象总结 getElementsByTagName()中设置的是标签的名字返回的结果是一个伪数组,数组中每一个值是一个具体的标签对象如果需要获取每一个DOM对象,则可以通过循环遍历 3.通过类名获取语法 document.getElementsByClassName('标签类名'); 例如 var res = document.getElementsByClassName('标签类名'); 返回值

返回结果是一个伪数组

总结 getElementsByClassName()设置的是标签类名不是类选择器,类名前面不能加点返回的结果是伪数组伪数组中每一个值都是一个具体的DOM对象如果需要获取每一个DOM对象,则可以通过循环遍历 4.通过选择器获取一个标签语法 document.querySelector('css选择器'); 例如: var res = document.querySelector('.one'); 返回值返回的结果是一个DOM标签对象如果没有符合条件的标签,则返回的结果是null 总结 document.querySelector() 支持css中所有的选择器返回所有满足条件中的第一个结果 5.通过选择器获取多个标签语法 console.log(document.querySelectorAll('css选择器')); 例如: var res = document.querySelectorAll('div') 返回值返回结果是一个伪数组,数组中每一个值都是一个具体的DOM对象如果没有找到符合条件的标签,则返回一个空数组总结该方法支持所有的css选择器返回的结果是一个伪数组 6.课堂案例

7. 补充获取页面特殊标签获取body标签

document.body

获取html标签

document.documentElement

三.操作标签属性 1. 操作图片标签src属性 a) 获取图片标签scr属性

步骤:

先获取图片标签通过图片标签DOM对象.src 获取src var myimg = document.querySelector('img'); myimg.src

b) 设置图片标签src属性

步骤:

先获取图片标签通过图片标签DOM对象.src = 图片路径 var myimg = document.querySelector('img'); myimg.src = './img/1.jpg'

c) 课堂案例

随机显示图片.gif

2. 操作a标签href属性 a) 获取a标签href属性

步骤:

先获取a标签通过 DOM标签对象.href 获取href属性值百度 console.log(document.querySelector('a').href); b) 设置a标签href属性

步骤:

先获取a标签通过 DOM标签对象.href = 值设置百度 document.querySelector('a').href = 'http://www.jd.com' 3. 操作标签style样式属性

步骤:

先获取页面中对应标签通过 DOM标签对象.sytle.css属性 = 值 var div = document.querySelector('div'); div.style.width = '200px'; div.style.height = '200px'; div.style.background = 'red';

总结:

标签.style.css属性名给标签设置的是行内样式标签.style.css属性名 css属性名如果遇到 _ 则需要按照驼峰命名法设置 backgroundColorfontSizebackgroundImage b)课堂案例

随机色.gif

4. 操作标签类名属性 a) 通过className方式操作类名

步骤:

先获DOM对象DOM对象.className 获取标签类名DOM对象.cassName = ‘类名’ 标签添加类名

代码演示:

var div = document.querySelector('div'); console.log(div.className); var div = document.querySelector('div'); div.className = 'three four'

总结:

DOM对象.className 用来操作标签类样式DOM对象.className 设置标签类名的时候会覆盖标签身上原来的类名DOM对象.className 设置标签类名如果要设置多个类名,中间使用空格隔开 b) 通过classList方式操作类名添加类名获取标签DOM标签对象.classList.add(‘类名’)代码演示: var div = document.querySelector('div'); div.classList.add('one', 'two')

总结:

classList.add() 添加类名的时候可以添加多个类名,类名之间使用逗号隔开classList.add() 添加类名不会覆盖标签身上原来的类名移除类名获取标签DOM标签对象.classList.remove(‘类名’)代码演示: var div = document.querySelector('div'); div.classList.remove('one', 'two') 切换类名获取标签DOM标签对象.classList.toggle(‘类名’)代码演示: var div = document.querySelector('div'); div.classList.toggle('one')

总结:

切换类名,标签身上如果包含该类名,则移除,否则添加切换类名的时候,不能切换多个类名是否包含类名获取标签DOM标签对象.classList.contains(‘类名’) var div = document.querySelector('div'); console.log(div.classList.contains('three'))

总结

标签是否包含类名,包含返回true,否则返回false 5. 操作标签文字内容属性 a) 表单元素文字内容获取表单元素标签文字内容 // 获取表单元素文字语法: // 标签对象.value // 例如: var int = document.querySelector('input'); console.log(int.value); 设置表单元素标签文字内容 // 获取表单元素文字语法: // 标签对象.value = 值 // 例如: var int = document.querySelector('input'); int.value = '呵呵呵' b) 非表单元素文字内容获取非表单元素标签文字内容我是div标签中的文字 // 获取非表单元素文字语法: // 标签对象.innerHTML 或者标签对象.innerText // 例如: var res = document.querySelector('div'); console.log(res.innerHTML); console.log(res.innerText);

总结:

innerText 和 innerHTML都可以获取标签中的内容如果标签中只有纯文字,则二者无差别如果标签中包含其他标签innerText 只会获取标签中的纯文本innerHTML 会将标签及内容都获取到设置非表单元素标签文字内容 // 设置非表单元素文字语法: // 标签对象.innerHTML = 值或标签对象.innerText = 值 // 例如: var res = document.querySelector('div'); res.innerHTML = '呵呵呵'; res.innerText = '嘻嘻嘻';

总结:

innerText 和 innerHTML都可以给标签设置文字内容如果设置内容不包含其他标签,则二者无差别如果设置内容包含标签 innerHTML 会将html内容渲染为对应的html标签innerText 不会将html内容渲染为对应的html标签,按照普通文本设置 6. 操作标签自定义属性 a) 什么是自定义属性标签自定义属性,特指程序员自己给标签添加的自定义属性自定义属性两种格式 H5规范要求所有自定义属性必须以data-**开始完全自己定义属性,没有任何的格式要求

备注: 标签本身自带的属性叫内置属性或标准属性例如: class , id, name … b) 自定义属性有什么用

自定义属性本质上也是一个键值对,用来保存数据

c) 自定义属性如何使用通用方式标签设置自定义属性/标准属性 var div = document.querySelector('div'); // 1. 设置自定义属性 div.setAttribute('myage', 18); div.setAttribute('data-myname', '老段'); // 2. 设置标准属性 div.setAttribute('class', 'one'); 获取标签自定义属性/标准属性 var div = document.querySelector('div'); // 1. 获取标签自定义属性 console.log(div.getAttribute('data-myage')); console.log(div.getAttribute('myheight')); // 2. 获取标签标准属性 console.log(div.getAttribute('class')); 只能操作H5自定义属性方式获取标签自定义属性

标签设置自定义属性

四.注册事件 1. 什么是事件

当用户在浏览器中操作网页的时候,对网页的点击动作,拖拽动作等都称为事件

2. 事件组成(三要素) 事件源

事件源: 用户动作触发的源头,用户的动作作用到哪个标签身上,该标签就是事件源. 事件源的本质: 事件源本质就是一个DOM标签对象

事件类型

事件类型代表用户不同的动作

鼠标事件类型: 点击 click键盘事件类型焦点事件处理程序(回调函数)

处理程序本质就是一个回调函数(函数),处理程序就是当用户执行完动作后要实现的功能例如:

用户点击一个按钮,输出你好按钮就是事件源点击就是事件类型输出你好就是处理程序要做的事情 3. 事件语法

事件源.on事件类型 = function() {}

4. 事件总结注册事件时候必须先获取事件源(事件源必须是一个DOM对象)如果获取到的事件源保存到数组或者伪数组中,则需要进行循环遍历注册事件 5. 事件案例点击按钮修改图片的路径

切换图片.gif

点击按钮修改标签的背景颜色

设置背景颜色.gif

模拟用户登录

用户登录.gif

点击按钮设置背景颜色

用户登录.gif

五.this关键字全局作用域中this指向 window普通函数中this 指向 window方法中this 指向方法调用对象事件中this指向事件源六.排他思想1 tab栏切换

用户登录.gif

完整版tab栏切换

用户登录.gif

七.onload事件 1. 应用场景

代码顺序是从上往下进行加载，很多时候我们要对页面中的某一个模块进行操作，这时候我们常常使用javascript代码来进行操作。为了能够保证操作的模块或对象在js代码之前就加载了，我们不得不把js代码放在页面的底端。但是我们在设计页面的时候，为了把js代码放在一起，或者一个让页面更加简洁的位置，那就有可能将js写在body之前，会出现代码中操作的对象未被加载的情况，那么我们该如何去解决呢？这时候window.onload就被有了存在的意义了。

2. 如何使用onload事件

window.onload = function() {}

3. onload事件总结 window.onload事件当页面中所有资源全局加载完成后才会执行八.课堂案例随机点名

用户登录.gif