DOM 1. 操作元素

黑马学习笔记

元素选择

• 老的方式
  document.getElementByXXX
  返回元素数组
• 新的方式
  直接传入selector。 这里的selector是CSS的tag, className, id等selector。
  document.querySelector('selector')
  返回第一个元素
  document.querySelectorAll('selector')
  返回满足条件的数组

事件

1. onblur, onfocus 失去焦点，获得焦点
2. 鼠标经过 onmouseover, 鼠标离开onmouseout

element.onclick = function(){} function里面的this是element

操作元素

1. 操作元素内容

• innerText, innerHTML改变元素内容

2. 操作常见元素属性

• src, href

3. 操作表单元素属性

• id, alt, title

4. 操作元素样式属性

• style操作

• display: none, block
• background, background-position( 精灵图示例）
• element.className='first second'

• 通过修改className进行多样式调整
• 多className, second里面的样式覆盖fist中的重复的样式

6. 自定义属性的操作
   目的是保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中

• element.属性， element.属性= 值
  获取内置属性
• element.getAttribute('属性')， element.setAttribute('属性', '值')
  获取用户自定义属性，当然它也可以获取内置属性
• 对于class属性，使用的是class而不是className
• removeAttribute
  element.removeAttribute('属性')

7. H5自定义属性

H5规定自定义属性data-开头作为属性名并且赋值

1. 兼容性获取element.getAttribute('data-index')
2. H5新增element.dataset.index或者element.dataset['index']
3. 驼峰命名法，如果自定义为'data-list-name'， 则使用element.dataset.listName来获得'data-list-name'

• elemnet.innerText
  从起始位置到终止位置的内容，但它去除html标签，同时空格换行也去掉
• element.innerHTML
  起始位置到终止位置的全部内容，包括html标签，同事保留空格和换行

innerHTML是W3C标准，innerText是IE发起的，老版本的火狐不支持
innerText和innerHTML都是可读可写的
innerHTML用的较多

元素属性

• alt属性
  The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.

表单元素的属性操作

利用DOM可以操作如下表单元素的属性

type, value, checked, selected, disabled

1. 表单里面的内容是通过修改value来改变的
   示例

  First name:
  


  Last name:
  


  

样式属性操作

1. element.style 行内样式操作
2. element.className 类名样式操作

注意

示例