DOM属性讲解：父子兄弟节点以及宽高位置节点类型

子节点部分：

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>