2018-05-21
Dom:
Document Object Model 文档对象模型
专门操作网页内容的API
1.Dom可进行的操作:
查找 修改 添加 删除
1)查找
A.元素间关系查找 案例见demo01
父子关系:
parentElement; 查找一个元素的父元素
children;查找一个元素的所有孩子
firstElementChild;查找第一个孩子
lastElementChild;查找最后一个孩子
兄弟关系:
previousElementSibling 前一个兄弟元素
nextElementSibling 下一个兄弟元素
B.使用HTML元素查找 案例见demo02
1.按id查找:
var ele=document.getElementById('id');
特点:只能找到一个
如果没找到返回null
2.按class查找:
var ele=document.getElementsByClassName('class');
可以找到多个,返回一个动态集合
如果没找到,返回空集合
3.按标签名查找:
var ele=document.getElementByTagName('标签名');
可以找到多个,返回一个动态集合
如果没找到,返回空集合
4.按name属性查找
var ele=document.getElementByName('name');
C.使用选择器查找
1.var ele=document.querySelector('选择器');
特点:只能找到一个,如果找不到,返回null
2.var ele=document.querySelectorAll('选择器');
特点:查找多个符合选择器要求的函数,如果没找到,返回[]集合