子节点部分：
childNodes: 是一个只读属性，代表一个子节点列表集合(标准浏览器下：包含了文本和元素类型的节点，非标准浏览器下：只包含元素类型的节点)。只包含子节点不包含孙级节点。(项目当中不推荐使用)
基本语法：元素 . childNodes
<body>
<ul>
<li>1111</li>
<li>2222</li>
</ul>
<script type="text/javascript">
var oUl = document.getElementsByTagName('ul');
alert(oUl[0].childNodes.length)//弹出 5 其中包含了3个空的文本节点
</script>
</body>
children： 是一个只读属性，代表一个子节点列表集合(只包含元素类型的节点)
基本语法：元素 . children
<body>
<ul class="ul1" style="color:red">
<li>1111</li>
<li>2222</li>
</ul>
<script type="text/javascript">
var oUl = document.getElementsByTagName('ul');
console.log(oUl[0].children[0])// 控制台显示 <li>1111</li>
</script>
</body>
firstChild || firstElementChild: 是一个只读属性，表示元素下的第一个子节点(标准下包含文本类型的节点) 所以引出了firstElementChild
元素 . firstChild == 元素 . childNodes[0] 元素 . firstElementChild == 元素 . children[0]
基本语法： 元素 . firstChild || 元素 . firstElementChild
lastChild || lastElementChild : 是一个只读属性，表示元素下的第一个子节点(标准下包含文本类型的节点) 所以引出了lastElementChild
元素 . lastChild == 元素 . childNodes[元素 . childNodes . length - 1] 元素 . lastElementChild == 元素 . children[元素. children . length - 1]
兄弟节点部分：
nextSibiling || nextElementSibiling： 是一个只读属性，表示元素的下一个兄弟节点(标准下包含文本类型的节点) 所以引出了nextElementSibiling
基本语法：元素 . nextSibiling || 元素 . nextElementSibiling
previousSibiling || previousElementSibiling : 是一个只读属性，表示元素的上一个兄弟节点(标准下包含文本类型的节点) 所以引出了previousElementSibiling
基本语法：元素 . previousSibiling || 元素 . previousElementSibiling
父节点部分：
parentNode：是一个只读属性，表示当前节点的父级节点
基本语法：元素 . parentNode
offsetParent : 是一个只读属性，表示离当前节点最近的具有定位样式的父级节点(当前节点需加上定位样式)
基本语法：元素 . offsetParent
元素的各种位置尺寸宽高：
offsetleft[top]: 是一个只读属性，表示当前元素到定位父级的距离(偏移值){当前元素到定位父级的内边框距离，不算边框的宽度}style . width(height): 是一个只读属性，属于样式宽高 { 语法：元素 . style . width(height) }
offsetWidth(height) == 样式宽高 + padding值 + border （占位宽高）
clientWidth(height) == 样式宽高 + padding值（称为可视区宽高）语法：元素 . clientWidth(height)
nodeType:是一个只读属性，表示当前元素的节点类型
基本语法：元素 . nodeType
元素节点：数字1
属性节点：数字2
文本节点：数字3
<body>
<ul>
<li>1111</li>
<li>2222</li>
</ul>
<script type="text/javascript">
var oUl = document.getElementsByTagName('ul');
alert(oUl[0].nodeType)//弹出数字1
alert(oUl[0].childNodes[0].nodeType)//弹出数字3
</script>
</body>
attributes：是一个只读属性，表示获取元素的属性列表，是一个属性集合
基本语法：元素 . attributes
<body>
<ul class="ul1" style="color:red">
<li>1111</li>
<li>2222</li>
</ul>
<script type="text/javascript">
var oUl = document.getElementsByTagName('ul');
console.log(oUl[0].attributes.length)//控制台显示元素属性的个数
console.log(oUl[0].attributes[0])//控制台显示[object Attr]
console.log(oUl[0].attributes[0].name)//控制台显示class，表示ul的第一个属性名class
console.log(oUl[0].attributes[1].value)//控制台显示color:red，表示ul的第一个属性名class的属性值
</script>
</body>