<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.dayhd{
position: relative;
}
</style>
</head>
<body>
<div id="dayhd">
<div id="yhd">
<div>11111</div>
<div>22222</div>
</div>
</div>
<script>
var oDiv=document.getElementById('yhd')
var yhd=oDiv.childNodes
//获取DOM子节点的两种方法
console.log(oDiv.childNodes)//childNode获取节点会获取到换行和空格
console.log(oDiv.children)//childNode获取元素节点
//DOM获取我们的父亲点
console.log(oDiv.parentNode)//id的标准
console.log(oDiv.parentElement)
//没有定位就会获取到body
console.log(oDiv.offsetParent)//获取定位
console.log(yhd[0].nodeType,'我是第一个，我是文本节点')//获取类型
console.log(yhd[1].nodeType,)
console.log(yhd[2].nodeType,)
console.log(yhd[3].nodeType,)
console.log(yhd.children[4].nodeType,)
</script>
</body>
<div id="yhd">
<div>我是1</div>
<div>我是2</div>
<div id="three">我是3</div>
<div>我是4</div>
<div>我是5</div>
</div>
<script>
var oDiv=document.getElementById('yhd')
var san=document.getElementById('three')
//获取第一个子节点
//console.log(oDiv.firstChild)
//console.log(oDiv.firstElementChild)
console.log(oDiv.lastChild)
console.log(oDiv.lastElementChild)
//获取兄弟节点
console.log(san.previousElementSibling)
console.log(san.nextElementSibling)
</script>
</body>
<div id="yhd" vaule ="9">123456</div>
<script>
var oDiv=document.getElementById("yhd")
//第一种改变属性的方法
oDiv.style.color='red'
//第二种改变属性的方法
oDiv.style['color']='blue'
//通过DOM获取修改属性的方法
console.log("我是改变前的id:"+oDiv.getAttribute('id'))
console.log("我是改变前的value:"+oDiv.getAttribute('value'))
oDiv.setAttribute('id','tim')
oDiv.setAttribute('value','100')
console.log("我是改变")
oDiv.removeAttribute('value')
</script>
</body>
