兼容低版本浏览器 比如ie8 以及 以下
通过id属性获取对象
getElementById
console.log( document.getElementById('dom1') )
通过标签名获取对象
getElementsByTagName是获取到元素的集合
通过下标来选取对应的元素
console.log( document.getElementsByTagName('div')[2] )
通过class属性获取对象
getElementsByClassName也是一个元素集合
通过下标来选择元素
console.log( document.getElementsByClassName('classdom')[1] );
适合用于高版本浏览器
querySelector
通过querySelector获取含有指定id选择器的元素
console.log( document.querySelector('#dom1') ）
通过querySelector获取含有指定class选择器的元素 含有相同class的元素有很多
但是只获取第一个
console.log( document.querySelector('.classdom') )
通过querySelector获取含有指定元素选择器的元素 有多个元素能匹配上
但是只能获取到第一个
console.log( document.querySelector('div') )
使用querySelectorAll可以获取多个含有对应元素选择器的dom元素
通过下标可以选择第几个
console.log( document.querySelectorAll('div')[1] ）
使用querySelectorAll可以获取多个含有对应类选择器的dom元素
通过下标可以选择第几个
console.log( document.querySelectorAll('.classdom')[2] ）
innerText
只会把文字显示在对应的区域，不会转义标签元素，也会替换原来的内容
document.querySelector('#dom1').innerText = '<h1>平安夜平安</h1>'
使用document.querySelector可以使用后代选择器
使用变量存起来的方式 不用每次都再找一遍 性能更好
dom元素.的方式 设置值，只能设置在元素身上原来就有的属性
比如 src 比如 alt width height
通过集合的方式直接去修改是改不了的
document.querySelectorAll也不可以
只能通过循环遍历的方式去修改*/
let ds = document.getElementsByClassName('cname')
for(var i=0;i<ds.length;i++){
ds[i].innerHTML = '<h1>平安夜平安</h1>'
}
document.querySelectorAll('.cname').innerHTML = '123'
节点属性
/* 高版本的浏览器可以识别
firstElementChild和firstChild的区别是 忽略空格和换行直接获取元素节点
中间带Element的选择节点属性也是忽略空格和换行直接获取元素节点*/
let div = document.querySelector('div');
/* firstElementChild 返回节点的第一个子节点 */
/* lastElementChild 返回节点的最后一个子节点 */
/* nextElementSibling 下一个节点 */
/* console.log(div.firstElementChild.nextElementSibling) */
/* previousElementSibling 上一个节点 */
/* console.log(div.lastElementChild.previousElementSibling) */
/* 老的浏览器也可以用 比如ie6 7 */
/* 获得 div元素 通过使用firstChild 和 nextSibling */
/* 的方式 把ul的color 属性变成 红色 */
// let div = document.querySelector('div');
// console.log(div.childNodes);
// div.firstChild.nextSibling.nextSibling.nextSibling.style.color = 'red'
// /* 获得 div元素 通过使用lastChild 和 previousSibling */
// /* 的方式 把h2的font-size属性变成 50px*/
// div.lastChild.previousSibling.style.fontSize = '50px'
