1、DOM 获取元素

学不死就往死里学

已于 2023-05-15 18:45:53 修改

阅读量641

点赞数

分类专栏： javascript 文章标签： javascript 前端

于 2023-05-12 21:25:35 首次发布

本文链接：https://blog.csdn.net/hzg_hou/article/details/130650488

版权

javascript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一. 基本概念介绍

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.通过标签名称获取

语法

<script>

  document.getElementsByTagName('标签名');

  例如:
  var  res =  document.getElementsByTagName('div');

</script>

返回值

返回的结果是一个伪数组

数组中每一个值都是一个具体的DOM标签对象

总结
getElementsByTagName()中设置的是标签的名字
返回的结果是一个伪数组,数组中每一个值是一个具体的标签对象
如果需要获取每一个DOM对象,则可以通过循环遍历

3.通过类名获取

语法

<script>
document.getElementsByClassName('标签类名');

例如
var  res = document.getElementsByClassName('标签类名');
</script>

返回值

返回结果是一个伪数组

总结
getElementsByClassName()设置的是标签类名不是类选择器,类名前面不能加点
返回的结果是伪数组
伪数组中每一个值都是一个具体的DOM对象
如果需要获取每一个DOM对象,则可以通过循环遍历

4.通过选择器获取一个标签

语法

<script>
   document.querySelector('css选择器');

   例如:

   var  res =  document.querySelector('.one');
</script>

返回值

返回的结果是一个DOM标签对象

如果没有符合条件的标签,则返回的结果是null

总结
document.querySelector() 支持css中所有的选择器
返回所有满足条件中的第一个结果

5.通过选择器获取多个标签

语法

<script>

   console.log(document.querySelectorAll('css选择器'));

   例如:
   var  res = document.querySelectorAll('div')
</script>

返回值

返回结果是一个伪数组,数组中每一个值都是一个具体的DOM对象

如果没有找到符合条件的标签,则返回一个空数组

总结
该方法支持所有的css选择器
返回的结果是一个伪数组

6.课堂案例

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

获取body标签

document.body

获取html标签

document.documentElement

三.操作标签属性

1. 操作图片标签src属性

a) 获取图片标签scr属性

步骤:

先获取图片标签
通过图片标签DOM对象.src 获取src

<script>

        var myimg = document.querySelector('img');
        myimg.src


</script>

b) 设置图片标签src属性

步骤:

先获取图片标签
通过图片标签DOM对象.src = 图片路径

<script>


        var myimg = document.querySelector('img');
        myimg.src = './img/1.jpg'


    </script>

c) 课堂案例

随机显示图片.gif

2. 操作a标签href属性

a) 获取a标签href属性

步骤:

先获取a标签
通过 DOM标签对象.href 获取href属性值

<body>
   <a href="http://www.baidu.com">百度</a>
   <script>
      console.log(document.querySelector('a').href);
   </script>
</body>

b) 设置a标签href属性

步骤:

先获取a标签
通过 DOM标签对象.href = 值设置

<body>
   <a href="http://www.baidu.com">百度</a>
   <script>
      document.querySelector('a').href = 'http://www.jd.com'
   </script>
</body>

3. 操作标签style样式属性

步骤:

先获取页面中对应标签
通过 DOM标签对象.sytle.css属性 = 值

<body>
   <div></div>
   <script>
      var div = document.querySelector('div');
      div.style.width = '200px';
      div.style.height = '200px';
      div.style.background = 'red';
   </script>
</body>

总结:

标签.style.css属性名给标签设置的是行内样式
标签.style.css属性名 css属性名如果遇到 _ 则需要按照驼峰命名法设置
backgroundColor
fontSize
backgroundImage

b)课堂案例

随机色.gif

4. 操作标签类名属性

a) 通过className方式操作类名

步骤:

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

代码演示:

<body>
   <div class="one two"></div>
   <script>
      var div = document.querySelector('div');
      console.log(div.className);
   </script>
</body>

<body>
   <div class="one two"></div>
   <script>
      var div = document.querySelector('div');
      div.className = 'three four'
   </script>
</body>

总结:

DOM对象.className 用来操作标签类样式
DOM对象.className 设置标签类名的时候会覆盖标签身上原来的类名
DOM对象.className 设置标签类名如果要设置多个类名,中间使用空格隔开

b) 通过classList方式操作类名

添加类名

获取标签
DOM标签对象.classList.add(‘类名’)
代码演示:

<body>
   <div class="one two"></div>
   <script>
      var div = document.querySelector('div');
      div.classList.add('one', 'two')
   </script>
</body>

总结:

classList.add() 添加类名的时候可以添加多个类名,类名之间使用逗号隔开
classList.add() 添加类名不会覆盖标签身上原来的类名

移除类名

获取标签
DOM标签对象.classList.remove(‘类名’)
代码演示:

<body>
   <div class="one two"></div>
   <script>
      var div = document.querySelector('div');
      div.classList.remove('one', 'two')
   </script>
</body>

切换类名

获取标签
DOM标签对象.classList.toggle(‘类名’)
代码演示:

<body>
   <div class="one two"></div>
   <script>
      var div = document.querySelector('div');
      div.classList.toggle('one')
   </script>
</body>

总结:

切换类名,标签身上如果包含该类名,则移除,否则添加
切换类名的时候,不能切换多个类名

是否包含类名

获取标签
DOM标签对象.classList.contains(‘类名’)

<body>
   <div class="one two"></div>
   <script>
      var div = document.querySelector('div');
      console.log(div.classList.contains('three'))
   </script>
</body>

总结

标签是否包含类名,包含返回true,否则返回false

5. 操作标签文字内容属性

a) 表单元素文字内容

获取表单元素标签文字内容

<body>
   <input type="input" value="请输入用户名">
   <script>
      // 获取表单元素文字语法:
      // 标签对象.value


      // 例如:
      var int = document.querySelector('input');
      console.log(int.value);
   </script>
</body>

设置表单元素标签文字内容

<body>
   <input type="input" value="请输入用户名">
   <script>
      // 获取表单元素文字语法:
      // 标签对象.value = 值


      // 例如:
      var int = document.querySelector('input');
       int.value = '呵呵呵'
   </script>
</body>

b) 非表单元素文字内容

获取非表单元素标签文字内容

<body>
   <div>我是div标签中的文字</div>
   <script>
      // 获取非表单元素文字语法:
      // 标签对象.innerHTML   或者   标签对象.innerText


      // 例如:
      var res = document.querySelector('div');
      console.log(res.innerHTML);
      console.log(res.innerText);
   </script>
</body>

总结:

innerText 和 innerHTML都可以获取标签中的内容
如果标签中只有纯文字,则二者无差别
如果标签中包含其他标签
innerText 只会获取标签中的纯文本
innerHTML 会将标签及内容都获取到

设置非表单元素标签文字内容

<body>
   <div></div>
   <script>
      // 设置非表单元素文字语法:
      // 标签对象.innerHTML = 值  或  标签对象.innerText = 值


      // 例如:
      var res = document.querySelector('div');
      res.innerHTML = '呵呵呵';
      res.innerText = '嘻嘻嘻';
   </script>
</body>

总结:

innerText 和 innerHTML都可以给标签设置文字内容
如果设置内容不包含其他标签,则二者无差别
如果设置内容包含标签
innerHTML 会将html内容渲染为对应的html标签
innerText 不会将html内容渲染为对应的html标签,按照普通文本设置

6. 操作标签自定义属性

a) 什么是自定义属性

标签自定义属性,特指程序员自己给标签添加的自定义属性
自定义属性两种格式
H5规范要求所有自定义属性必须以data-**开始
完全自己定义属性,没有任何的格式要求

备注:
标签本身自带的属性叫内置属性或标准属性例如: class , id, name …

b) 自定义属性有什么用

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

c) 自定义属性如何使用

通用方式

标签设置自定义属性/标准属性

<body>


   <div></div>


   <script>
      var div = document.querySelector('div');
      // 1. 设置自定义属性
      div.setAttribute('myage', 18);
      div.setAttribute('data-myname', '老段');
      // 2. 设置标准属性
      div.setAttribute('class', 'one');
   </script>
</body>

获取标签自定义属性/标准属性

<body>


   <div data-myage="18"  myheight="180" class="one"></div>


   <script>
      var div = document.querySelector('div');
      // 1. 获取标签自定义属性
      console.log(div.getAttribute('data-myage'));
      console.log(div.getAttribute('myheight'));
      
      // 2. 获取标签标准属性
      console.log(div.getAttribute('class'));
   </script>
</body>

只能操作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

随机切换轮播图

用户登录.gif

购物车

用户登录.gif

轮播图小圆点排他样式

用户登录.gif

开关修改背景色

用户登录.gif

开关隐藏/显示盒子

用户登录.gif

运动的风车

用户登录.gif

隔行变色

学不死就往死里学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1、DOM 获取元素

标签自定义属性,特指程序员自己给标签添加的自定义属性自定义属性两种格式H5规范要求所有自定义属性必须以data-**开始完全自己定义属性,没有任何的格式要求备注:标签本身自带的属性叫内置属性或标准属性例如: class , id, name …自定义属性本质上也是一个键值对,用来保存数据通用方式标签设置自定义属性/标准属性// 1. 设置自定义属性 div . setAttribute('myage' , 18);
复制链接

扫一扫