webAPI编程-01

1.获取元素

• 通过HTML5新增的方法获取

document,getElementsByClassName('类名');  //根据类名返回元素对象集合

document.querySelector('选择器'); //根据指定选择器返回第一个元素对象（里面的选择器需要加符号，例如.box,#nav）

document.querySelectorAll('选择器'); //根据指定选择器返回所有元素对象集合

• 获取特殊元素（body,html）

  • 获取body元素

    • document.body  //返回body元素对象
      

  • 获取html元素

    • document.documentElement //返回html元素对象
      

2.事件处理

• 执行事件步骤

  • 1.获取事件源

    • var div = document.querySelector('div');
      

  • 2.绑定事件 注册事件

    • div.onclick

  • 3.添加事件处理程序

    • div.onclick = function() {
          console.log('xxxxxx')
      }
      

3.操作元素

• 改变元素内容

  • 1.element.innerText //从起始位置到终止位置的内容，但它不识别html标签，同时空格和换行也会去掉
  • 2.element.innerHTML //起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

• 表单属性设置

  • 表单里面的值，文字内容通过 value来修改

  • 如果想要某个表单被禁用，不能再点击，通过 disabled

    • this.disabled = true;
      

    • this指向的是时间函数的调用者

• 样式属性操作

  • 1.element.style //行内样式操作

  • 2.element.className //类名样式操作

  • JS里面的样式采取驼峰命名法，比如：frontSize,backgroundColor

  • JS修改style样式操作，产生的是行内样式

  • 如果样式修改较多，采取类名样式操作更改元素样式

  • className会直接更改元素的类名，会覆盖原先的类名，如果想要保留原先的类名，用多类名选择器

    • this.className = '原先的 修改的';
      

​