javascript学习笔记三

【百事可乐】

已于 2023-07-31 14:50:25 修改

阅读量131

点赞数

文章标签：学习笔记

于 2023-07-28 18:23:31 首次发布

本文链接：https://blog.csdn.net/weixin_55712128/article/details/131979333

版权

学习目标：

DOM

学习内容：

DOM树和DOM对象
获取DOM元素
DOM修改元素内容

学习时间：

7.28

学习产出：

DOM的认识和作用

DOM对象的理解：

理解document,后续javascript操作网页内容都是通过document

<body>
<ul class="nav">
  <li>测试一</li>
  <li>测试二</li>
  <li>测试三</li>
</ul>
<script>
 const ul= document.querySelector('.nav')
 console.log(ul)
 // lies是一个伪数组；
 const lies=document.querySelectorAll('ul li')
 for (let i = 0; i < lies.length; i++) {
   console.log(lies[i])
 }
</script>
</body>

DOM修改元素的内容：innertext,innerHTML,innerHTML和innertext的区别如下：
<body>
<div>
  这是一个div标签
</div>
<script>
  /*const str=document.querySelector('div')
  console.log(str.innerText)
  str.innerText='我修改了div标签'*/

  // 使用innerHTML标签可以带HTML元素
  const str=document.querySelector('div')
  console.log(str.innerHTML)
  str.innerHTML='<strong>我修改了div标签<strong>'
</script>
</body>
DOM修改元素常见属性：
先通过document.queryselector获取到要修改的对象
通过：对象.属性='要修改的值'。

三种方式操作CSS

style（修改单个元素的时候）：对象.style.样式='修改的值'
className
classList(最常用)

获取设置表单的值：

<body>
<input type="text" value="表单的值是通过value获取的喔">
<script>
  const zhi=document.querySelector('input')
  console.log(zhi.value)
</script>
</body>

定时器的开关：

<script>
  let n= setInterval(function () {
    console.log('间歇函数')
  },1000)
  clearInterval(n)
</script>

<body>
<button disabled >还剩5秒解开</button>
<script>
  const btn=document.querySelector('button')
  let i=5
  const n=setInterval(function () {
    i--
    btn.innerHTML=`还剩${i}秒解开`
    if(i===0){
      btn.innerHTML=`解开`
      clearInterval(n)
      btn.disabled=false
      btn.addEventListener('click',function () {
        alert('哈哈，你等待了呀')
      })
    }
  },1000)
</script>
</body>