前端-DOM

Dom：

DOM（Document object model）文档对象模型，通过Dom提供的调用方式，来操纵这个页面当中的元素。

js+dom：

js是脚本语言，可以写逻辑性代码，dom是文档对象模型，可以直接操作页面。

DOM的具体功能：

1.定位元素

1.1通过id进行定位

document.getElementById('inner1')

1.2通过class属性定位

document.getElementsByClassName('inner')

1.3通过标签进行定位

document.getElementsByTagName('input')

1.4通过标签的name属性进行定位

document.getElementsByName('username')

2、从能定位到的相邻的元素来定位

2.1获取子标签元素，通过.children[]方法来定位子标签元素

var tmp=document.getElementById('inner1')

tmp.children[1]

2.2获取第一个子标签元素、最后一个子标签元素

通过.firstElementChild方法来定位第一个子标签元素

通过.lastElementChild方法来定位最后一个子标签元素

var tmp=document.getElementById('inner1')

tmp.firstElementChild

tmp.lastElementChild

2.3获取父元素

通过.parentElement方法获取父节点标签元素

var tmp=document.getElementById('inner1')

tmp.parentElement

2.4获取下一个兄弟标签元素

通过.nextElementSibling方法获取下一个兄弟标签元素

var tmp=document.getElementById('inner1')

tmp.nextElementSibling

2.5获取上一个兄弟标签元素

通过.previousElementSibling方法获取上一个兄弟标签元素

var tmp=document.getElementById('inner1')

tmp.previousElementSibling

3.操纵元素

在dom中，只要能操纵的元素，就能修改。

3.1操纵行内标签、块级标签：获取元素值，通过.value方法来获取元素值。

var tmp=document.getElementById('inner1')

tmp.lastElementChild.value

3.2修改元素值，通过给获取到的元素赋值来修改

var tmp=document.getElementById('inner1')

tmp.lastElementChild.value='lrx'

3.3获取标签中所有内容，通过.innerHTML方法获取到标签中的所有内容

var tmp=document.getElementById('inner1')

tmp.innerHTML

tmp.innerText

4.操纵样式

4.1.className方法

通过.className方法，可以定位到同时有两个样式的元素：

var tmp=document.getElementById('clst')

tmp.className='tmp2 inner'

4.2.classList方法

通过.classList方法，可以获取到样式列表（这个列表不是真的列表，但可以用列表方式进行操作）：

缺点：只能操作已经存在样式的元素

使用.classList.remove('样式名')方法

使用.classList.add('样式名')方法