DOM

图片发自App

1.DOM:文档对象模型，操作页面中的元素，增删改查

(1)查:

1，通过元素间关系:

      父子关系:

//查找某个元素的父元素:parentElement

//查找某个元素的子元素:返回一个动态集合(数组)

children

//查找第一个子元素 获取中间的元素加下标

firstElementChild

//查找最后一个子元素

lastElementChild

兄弟关系

//前一个兄弟元素

previousElementSibling

//下一个兄弟元素

nextElementSibling

2,通过HTTML查找

1) ID 只能找到一个，找不到返回null

var ele=document.getElementById('id名');

2)  class  特点:可以找到多个，返回一个动态集合; 没有找到返回一个空集合; 多个class名设置样式需要遍历

var ele=document.getElementsByClassName('class名');

3) 标签: var ele=document.getElementsByTagName('标签名');

可以找到多个，返回一个动态集合

找不到返回空集合 设置样式需要遍历

4)name属性 只适用于表单元素

var ele=document.getElementsByName('name名');

返回一个动态集合，设置样式需要遍历

3.通过选择器查找

var ele=document.querySelector('选择器');

特点:只能找一个

设置样式不需要遍历

var ele=document.querySelectorAll('选择器');

能找到多个 返回一个动态集合 设置样式需要遍历