js学习第九天-CSDN博客

本文链接：https://blog.csdn.net/qq_45753238/article/details/134375225

1.document.html

<body>

console.dir(document) // 对象提供了很多操作dom的属性或方法

console.log(typeof document)

console.log(document.body) // 获取 body元素

console.log(document.documentElement) // 获取整个html元素

console.log(document.write)

</script>

2.查找元素

1 找元素 document.querySelector('css选择器')

返回满足条件的第一个元素(dom元素对象),找不到返回null

2 document.querySelectorAll('css选择器')

返回满足条件的所有元素

返回的结果是一个伪数组(有length,有序号),但是不能调用数组的方法如push、pop...

3 其他查找元素方法

1 document.getElementById('id的值')

const ele = document.getElementById('sh')
      console.log(ele)

2 根据标签名查找 document.getElementsByTagName()

3 根据class查找

onst list2 = document.getElementsByClassName('box')

console.log(list2)

4 根据name查找

const list3 = document.getElementsByName('username')

console.log(list3[0])

4.操作元素

</head>
  <body>
    <div>学好js,高薪在望</div>
    <ul>
      <li>HTML5</li>
      <li>CSS3</li>
      <li>JS</li>
    </ul>

    <script>
      // 1  获取元素
      const oDiv = document.querySelector('div')
      // 2 通过元素.innerText  获取文本内容
      console.dir(oDiv.innerText)
      // 3  修改文本内容
      //oDiv.innerText = '学好js,月薪过万'
      //  4 删除
      //oDiv.innerText = ''
      //oDiv.innerText += '!!!'

      // 元素.innerHTML
      const ul = document.querySelector('ul')
      console.log(ul.innerText) // 支持文本
      console.log(ul.innerHTML) // 支持标签
      oDiv.innerHTML = `<p>${oDiv.innerText}</p>`
    </script>
  </body>

5.操作元素属性

<script>
      // 1 获取元素
      const oImg = document.querySelector('img')
      console.dir(oImg)
      // 2 改图片src width  height
      //  oImg.src = './2.webp'
      // oImg.width = 300
      // oImg.height = 200

      // const arr = ['./1.webp', './2.webp', './3.webp']
      // const index = getRndNum(0, arr.length - 1)
      // oImg.src = arr[index]
    </script>

6.操作样式

<style>
      .box {
        width: 300px;
        height: 300px;
        background-color: teal;
      }
    </style>
  </head>
  <body>
    <div class="box demo box2">box</div>
    <script>
      // 逻辑
      //  1 获取元素
      const box = document.querySelector('div')
      //  2 设置行内样式
      /*  box.style.width = '200px'
      box.style.height = '200px'
      box.style.backgroundColor = 'teal' */

      // 3 设置类样式
      console.log(box.className) // "demo box box2"->'box box2'
      // box.className += ' box'
      /*  const arr = box.className.split(' ')
      const index = arr.indexOf('demo')
      arr.splice(index, 1)
      box.className = arr.join(' ') */
      // 4  通过classList属性操作类
      /* box.classList.add('box') // 在原有class基础上加一个类
      box.classList.remove('demo') // 删除demo这个类
      box.classList.toggle('active') //  切换 */
    </script>
  </body>

7.操作自定义属性

元素.getAttribute('属性名') 获取元素属性名

元素.setAttribute('属性名',值) 设置元素属性

针对data-开头的自定义属性名

 <body>
    <div id="box" class="box" a="1" data-num="10" data-msg="hello"></div>
    <script>
      //  1 获取元素
      const box = document.querySelector('.box')
      console.dir(box.className) //  原生属性 元素.原生属性名
      console.log(box.id)
      // 元素.getAttribute('属性名') 获取元素属性名
      console.dir(box.getAttribute('a'))
      console.dir(box.getAttribute('id'))
      //  元素.setAttribute('属性名',值) 设置元素属性
      box.setAttribute('a', 10)
      // 针对data-开头的自定义属性名
      console.log(box.getAttribute('data-num'))
      box.setAttribute('data-num', 'abc')
      console.log(box.dataset.num) // {num: "10", msg: 'hello'}
      console.log(box.dataset.msg)
      box.dataset.info = 123 //  添加一个属性data-info
    </script>
  </body>

8.表单元素属性

<body>
    <input type="text" name="username" id="username" value="123" />
    <button>按钮</button>
    <input type="checkbox" />唱歌
    <script>
      // 1 获取文本框
      const txt = document.querySelector('input[name="username"]')
      console.log(txt.value)
      // txt.value = '456' // 修改
      txt.value = '' // 清空

      txt.type = 'password'

      // 禁用按钮
      const btn = document.querySelector('button')
      btn.disabled = true // true 禁用

      // 设置复选框状态
      const cbox = document.querySelector('input[type="checkbox"]')
      // cbox.checked = 'true' // 有隐式转换 字符串'true'->true 不推荐这么使用
      cbox.checked = true
    </script>
  </body>

9 事件

js dom事件

用户对dom元素(比如按钮、div、span。。。)进行某种操作行为(单击、双击、鼠标移入 ,...键盘按下)

页面会做出响应

事件三要素 1 事件源(谁身上发生了) 2 事件名称(具体行为) 3 事件处理逻辑(当事件行为发生后,导致什么结果)

js处理事件事件源.事件名称 = function() { }