dom文档对象模型

document对象

• 对象属性title 文档标题
• 文档对象方法 document.write()

获取html元素

• getElementById('id属性值') 根据id获取元素

<div id='box'>我是box1</div>
var box=document.getElementById('box')

• getElementsByClassName('class属性')通过类名获取元素，返回为伪数组

<div class='box'>我是box1</div>
<div class='box'>我是box2</div>
<div class='box'>我是box3</div>
var boxs=document.getElementsByClassName('box')

• getElementsByTagName('标签名')通过标签名获取元素，返回一个伪数组

<div class='box'>我是box1</div>
<div class='box'>我是box2</div>
<div class='box'>我是box3</div>
var boxs=document.getElementsByTagName('div')

• getElementsByName('name属性')根据name获取元素(通常用于input元素)

  <input name="season" type="text" value="春" />
  <input name="season" type="text" value="夏" />
  <input name="season" type="text" value="秋" />
  var inputs=document.getElementsByName('season')

• querySelector 选择器选择第一个元素，和css选择器一样

<div class='box'>我是box1</div>
<div class='box'>我是box2</div>
var box=document.querySelector('div')`选中的是第一个div`

-querySelectorAll选择器选中满足条件的所有元素，和css语法一样

<div class='box'>我是box1</div>
<div class='box'>我是box2</div>
var boxs=document.querySelectorAll('.box')

操作元素内容

• innerHTML可读可写，写入和读取文字和标签，
• innerText可读可写，写入和读取纯文本
• value可读可写，写入和读取表单值

操作css样式

• style行内样式

<div class='box'>我是box1</div>
var box=document.querySelector('div')
box.style.样式属性='样式属性值'

• className 添加css类，后面设置的会覆盖前面的，只能设置一个

<div class='box'>我是box1</div>
var box=document.querySelector('div')
box.className='类名'

• classList 添加css类，可以设置多个

<div class='box'>我是box1</div>
var box=document.querySelector('div')
box.classList.add('类名')`添加类`
box.classList.remove('类名')`删除类`

操作元素属性

• getAttribute('属性名')获取元素属性值

 <input name="season" type="text" value="秋" />
 var ipt=document.querySelector('input')
 ipt.getAttribute('value')

• setAttribute('属性名',"属性值")设置元素属性和属性值

<input name="season" type="text" value="秋" />
 var ipt=document.querySelector('input')
 ipt.setAttribute('checked',true)

• removeAttribute('属性名')删除元素的属性

<input name="season" type="text" value="秋" />
 var ipt=document.querySelector('input')
 ipt.removeAttribute('checked')