dom
#dom1{
color:rebeccapurple;
}
.classdom{
color:aqua;
}
</style>
</head>
<body>
<div id="dom1" class="classdom">我是dom1</div>
<div class="classdom">我是dom2</div>
<div class="classdom">我是dom3</div>
<!--
DOM：Document Object Model（文档对象模型）
是HTML文档对象模型（HTML DOM）定义的一套标准方法，用来访问和操纵HTML文档
-->
<script>
/* 兼容低版本浏览器 比如ie8 以及 以下 */
/* 通过id属性获取对象 */
/* console.log( document.getElementById('dom1') ) */
/* 通过标签名获取对象 */
/* getElementsByTagName是获取到元素的集合
通过下标来选取对应的元素 */
/* console.log( document.getElementsByTagName('div')[2] ) */
/* 通过class属性获取对象 */
/* getElementsByClassName也是一个元素集合
通过下标来选择元素 */
/* console.log( document.getElementsByClassName('classdom')[1] ); */
/* 适合用于高版本浏览器 */
/* 通过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] )
</script>
</body>
节点属性
<div>
<h1>我是h1</h1>
<ul>
<li>我是li</li>
</ul>
<h2>我是h2</h2>
</div>
<script>
/* 高版本的浏览器可以识别
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'
/* firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 */
// let div = document.querySelector('div');
// console.log( div.firstChild )
/* lastChild 返回节点的最后一个子节点 */
// let div = document.querySelector('div');
// console.log( div.lastChild )
/* nextSibling 下一个节点 */
// let div = document.querySelector('div');
// console.log( div.firstChild.nextSibling )
/* previousSibling 上一个节点 */
/* let div = document.querySelector('div');
console.log( div.lastChild.previousSibling ) */
/* childNodes 返回子节点集合，childNodes[i] */
/* 只返回子节点 如果存在空格或者换行 也会被算成一个子节点 */
// let div = document.querySelector('div');
// let c = div.childNodes;
// console.log(c);
// c[1].style.background = 'red'
// c[1].style.fontSize = '20px'
// c[3].style.background = 'green'
// c[5].style.width = '200px'
// c[5].style.height = '100px'
// c[5].style.background = 'blue'
/*
选择器 选择到 div
通过div 来找到h1 把h1改成背景是红色 字体大小变成20px
通过div 来找到ul 把ul改成背景是绿色
通过div 来找到h2 把h2的宽度变成200px 高度变成100px
背景色改成蓝色
*/
// let li = document.querySelector('li');
// /* parentNode 返回节点的父节点 */
// console.log(li.parentNode);
/* 选择器 选择到li 通过查找父节点的方式 把他的父节点
background变成红色 */
// li.parentNode.style.width = '100px'
// li.parentNode.style.height = '100px'
// li.parentNode.style.background = 'red'
</script>
</body>
