10.4获取元素和事件基础

获取元素和事件基础

获取元素

根据id获取

• 语法：document.getElementById(id)
• 作用：根据ID获取有且只能获取一个元素对象
• 参数：id值，区分大小写的字符串
• 返回值：元素对象 或 null

根据标签名称获取

• 语法：document.getElementsByTagName(‘标签名’) 或者 element.getElementsByTagName(‘标 签名’)

• 作用：根据标签名获取多个元素

• 参数：标签名

• 返回值：永远是一个数组(伪数组)即使获取的只有一个元素，也是以数组的方式存储

• 注意

  • 在js里写样式

    • 举例

      • p1.style.color='blue’意思是p1的颜色样式是blue

    • console.log(h1s.length) //获取长度

    • 通过js操作元素的css属性，css属性的写法有些不同：
      如果css属性是一个单词，如color、width、height、等，则写法保持不变
      如果css属性十多个单词组合而成，如background-color、font-size、background-image等则需要将第一个单词首字母小写其他单词首字母大写并且把连接符去掉(-)

  • 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历数组

  • 得到的元素都是动态的

  • getElementsByTagName()获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了 元素。

  • 举例

    • for (var i=0;i<h1s.length;i++) {
      h1s[i].style.color=‘red’
      }

      • style只能设置某一个具体元素的属性，但是getElementsByTagName返回的是一个数组
        所以不能直接使用，需要遍历数组

H5新增获取元素的方式

• document.getElementByClassName(‘类名’)根据类名返回对象集合

  • 举例

    • var boxs=document.getElementsByClassName(‘box’);        console.log(boxs);

• document.querySelector (‘选择器’) 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号

  • 举例

    • var firstBox = document.querySelector(’.box’);    console.log(firstBox);

• document. querySelectorAll(‘选择器’) 返回指定选择器的所有元素对象集合

  • 举例

    • var allBox = document.querySelectorAll(’.box’);  console.log(allBox);

• .querySelector能够根据元素的id、类别名称、标签名称获取元素，只需要遵循如下规则：
  1)id前面加上#
  2)类别名称前面加上.
  3)标签名称前面什么也不加

获取特殊元素

• 获取body元素

  • document.body

• 获取html元素

  • document.documentElement

操作样式

style.css属性操作：只能一个一个的设置元素样式

• 举例

  • // div.style.width(‘300px’)
    // div.style.height(‘150px’)
    // div.style.border(‘1px solid black’)
    // div.style.texyAline=‘center’
    // div.style.lineHeigh=‘150px’

className方法操作：可以一次设置元素的多个样式

• 举例

  • div.className=‘box’

XMind - Trial Version