javaScriptDOM javaScriptDOM

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('选择器');
特点：查找多个符合选择器要求的函数，如果没找到，返回[]集合

Argentina
Brazil
Canada
Chile
China
Cuba
Denmark
Egypt
France
Greece
Spain

利用元素间关系查找元素

电子设备

母婴用品

个人护理

//使用id找
var ul=document.getElementById('tree');
tree.style.color='red';
//使用class查找返回一个动态集合
var list=document.getElementsByClassName('list');
for(var i=0; i
list[i].style.background='yellow';
}
//使用标签名查找
var li=document.getElementsByTagName('li');
for(var i=0; i
li[i].style.fontSize='30px';
}
//使用name属性查找只针对于表单元素
var input=document.getElementsByName('uname');
for(var i=0; i
input[i].style.color='green';
}

利用元素间关系查找元素

电子设备

手机

电视

电脑

母婴用品

奶粉

玩具

尿不湿

个人护理

面膜

爽肤水

BB霜

//按选择器找，只能找到一个
var li=document.querySelector('#tree>li:first-child>ul>li:nth-child(2)');
li.style.color='red';

//按选择器找，可以找到多个
var lis=document.querySelectorAll('#tree>li');
console.log(lis);
for(var i=0; i
lis[i].style.color='red';
}
【javaScriptDOM】