wabapi一

最新推荐文章于 2022-07-22 16:22:17 发布

HWRY

最新推荐文章于 2022-07-22 16:22:17 发布

阅读量96

点赞数

分类专栏： wabapi 文章标签： html5 javascript html

本文链接：https://blog.csdn.net/desolate_sad/article/details/120441086

版权

wabapi 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<body>
  <div id="mydiv" class="mydiv">
    我是一段文字1
  </div>
  <div class="mydiv">
    我是一段文字2
  </div>
  <input type="text" value="我是一段文字">
  <img src="./2-案例/images/close.png" alt="">
</body>
<script>
  // 什么是WebAPI?
  // 浏览器应用程序接口，主要是帮我们快速实现某些功能
  // 什么是DOM?
  // 文档对象模型，一个页面就是一个文档，里面的每个元素都是一个个对象
  // 获取元素：五种方式
  // 1.通过ID获取
  // 语法：document.getElementById('ID名')
  // eg:
  // var mydiv = document.getElementById('mydiv')
  // 注意：这里获取的是具体的对象，可以直接进行属性和样式的修改
  // mydiv.innerHTML = '我是修改的内容'
  // 2.通过标签名获取
  // 语法：document.getElementsByTagName('标签名')
  // eg:
  // var mydiv = document.getElementsByTagName('div')
  // 注意：这里获取的是元素对象集合，集合是一个伪数组，不能直接进行属性和样式的修改，需要通过索引号找到具体的对象才能修改！
  // mydiv[0].innerHTML = '我是通过标签名修改的内容'
  // ----------------------华丽的分隔符---------------------------------
  // H5新增的获取元素方法
  // 3.通过类名获取
  // 语法：document.getElementsByClassName('类名')
  // eg:
  // var mydiv = document.getElementsByClassName('mydiv')
  // 注意：这里获取的是元素对象集合，集合是一个伪数组，不能直接进行属性和样式的修改，需要通过索引号找到具体的对象才能修改！
  // mydiv[0].innerHTML = '我是通过类名修改的'
  // 4.通过选择器获取匹配到的第一个对象
  // 语法：document.querySelector('选择器')
  // eg: 
  // var mydiv = document.querySelector('div')
  // var mydiv = document.querySelector('#mydiv')
  // var mydiv = document.querySelector('.mydiv')
  // mydiv.innerText = '我是通过单个选择器修改的内容'
  // 打印对象的详细属性和方法
  // console.dir(mydiv)
  // 注意：通过选择器获取必须要给选择器加符号，并且只会返回匹配到第一个元素，是一个具体的对象可以直接设置属性和方法
  // 5.通过选择器获取匹配到的所有对象
  // 语法：document.querySelectorAll('选择器')
  // eg:
  // var mydiv = document.querySelectorAll('div') 
  // var mydiv = document.querySelectorAll('.mydiv') 
  // mydiv[1].innerHTML ='我是通过全部选择器修改的内容'
  // 注意：这里获取的是元素对象集合，集合是一个伪数组，不能直接进行属性和样式的修改，需要通过索引号找到具体的对象才能修改！
  // 总结：
  // 1.古老的获取方式有2种，是通过ID和标签名获取，H5新增的有三种，是通过选择器(单选择器、多选择器)和类名获取
  // 2.返回具体对象的方式有2种，一种是通过ID获取，一种是通过单选择器获取。返回元素对象集合的方式有3中，第一种是通过类名，第二种是通过标签名，第三种是通过全部选择器，元素对象集合是不能直接设置属性和样式的！

  // 操作元素：
  // 1.修改元素内容：
  // 获取：元素.innerHTML
  // 设置：元素.innerHTML = 设置的值
  // 一种是innerText，另一种innerHTML
  // 相同点：都是可以获取和设置元素内容的
  // 不同点：innerText不识别空格和换行，也不识别Html标签，不是W3C推荐使用的，所以今后使用更多的是innerHTML

  // 2.普通元素的属性：设置或获取元素的属性
  // 获取：元素.属性名
  // 设置：元素.属性名 = 设置的值
  // var myimg = document.querySelector('img')
  // console.log(myimg.src);
  // myimg.src = './2-案例/images/open.png'
  // myimg.alt = 'ldh'

  // 3.表单内容：
  // 获取：元素.value
  // 设置：元素.value = 设置的值
  // var inp = document.querySelector('input')
  // inp.value = '我是修改的内容'
  // console.log(inp.value);
  // 表单中的checked   disabled   selected 都是可以进行修改的
  // inp.disabled = true
  // inp.checked = true

  // 4.样式：style属性
  // 获取：元素.style.样式名
  // 设置：元素.style.样式名 = 设置的值
  // var mydiv = document.querySelector('div')
  // 1.修改的是行内样式
  // mydiv.style.display = 'none'
  // 2.修改类名
  // mydiv.className = 'class1'

  // 事件基础：
  // 事件三要素：事件源、事件类型、事件处理程序
  // 绑定方法：事件源.事件类型=事件处理程序
  // 事件类型：三种
  // 点击事件：onclick
  // 聚焦事件：onfoucs
  // 失去焦点：onblur