DOM元素总结

获取DOM元素

1. document.getElementById([ID])： 基于元素的ID获取到这个元素
   • document是获取元素的上下文（获取元素的范围），getElementById方法的上下文只能是document
   • 获取到的结果是一个对象（堆内存：里边储存很多内置的方法和属性）
2. [context].getElementByTagName([标签名]：) 在指定上下文中，基于标签名获取到页面中所有的元素标签的集合
   就算只有一个或没有，获取到的也是一个集合HTMLCollection（一个类数组：结构和数组非常相似，但不是数组）
3. [content].getElementsByClassName([标签名])：在指定上下文中，基于样式类名获取对应的元素集合
   • 不兼容IE6～8低版本浏览器
4. document.documentElement: 获取这个HTML元素对象(HTML是页面的根结点)
   • 在IE浏览器中（9及以下）只对表单元素作用
5. document.body 获取页面中的BODY元素
6. document.head 获取页面中的HEAD元素

---

不兼容IE6-8低版本浏览器
7. [context].querySelector([selector]) 在指定上下文中，通过选择器获取到指定的元素对象（只获取第一个匹配的）
8. [context].querySelectorAll([selector]) 在指定上下文中，通过选择器获取到指定的元素集合

基于JS获取到到的DOM元素是“对象数据类型”值，里边博阿含很多浏览器自带的、用来操作元素的键值对

获取DOM节点的属性和方法

节点 ： Node （页面中所有包含的东西都是DOM节点）
节点集合：NodeList （getElementsByName / querySelectorAll 获取的都是节点集合）

1. 元素节点 （元素标签）

• nodeType：1
• nodeName : “大写的标签名”
• nodeValue ：null

2. 文本节点：html文件中，文本或标签之间的空格和换行也被当作文本节点

• nodeType：3
• nodeName : ‘#text’
• nodeValue ：文本内容

3. 注释节点

• nodeType：8
• nodeName : ‘#comment’
• nodeValue ：注释内容

4. 文档节点 document

• nodeType：9
• nodeName : ‘#document’
• nodeValue ：null

描述这些节点之家关系的属性

• [NODE].childNodes ：获取所有的子节点（）各种类型的节点
• [NODE].children：获取所有的元素子节点（子元素标签集合）
  只有元素标签，在IE低版本浏览器中，也会把注释当作元素节点
• [NODE].parentNode：获取父亲节点
• [NODE].previousSibling：获取上一个哥哥节点
• [NODE].nextSibling：获取下一个弟弟节点
• [NODE].previousElementSibling / nextElementSibling ：获取哥哥和弟弟元素节点（不兼容IE6~8）
• [CONTAINER].firstChild：获取容器中第一个子节点
• [CONTAINER].lastChild：获取容器中最后一个子节点
• [CONTAINER].firstElementChild / [CONTAINER].lastElementChild ：获取容器中第一个和最后一个元素子节点 （不兼容IE6~8）

带Elemnt都不兼容IE6～8

修改DOM元素的样式

1. 元素.style.xxx： 修改/获取当前元素的行内样式
   • 修改的都是行内样式。如果把样式写在样式表中，获取不到
   • 如果样式很多用 元素.style.cssText = xxx :xxx; ...设置的结果也是行内样式
2. 元素.className: 操作的是当前元素的样式类，基于样式类的管理给予不同的格式
   • 这样会覆盖之前的样式类名
   • 如果不想覆盖，可以
     • 元素.className += ’ cssClassName’;(注意前边有个空格)
     • 元素.classList.add(‘cssClassName’);

给DOM元素设置内容

• innerHTML/innerText： 给非表单元素设置或操作其内容
• value： 操作表单元素的内容

对于DOM是对象的理解

获取到的元素是对象，储存在堆内存中，里边有很多键值对,正常对象中的键值对的操作都适用 box.id或box[“id”]

<div class="box">
    <ul>1</ul>
    <ul>2</ul>
    <ul>3</ul>
</div>

document.getElementById('box');
/* 
 * id : "box" 存储元素的ID
 * className ： "box" 存储样式类的信息
 * innerHTML ： "..." 存储元素的内容
 * tagName : "DIV" 存储元素的大写标签名
 * // style存储的是当前元素的行内样式，只有把样式写在行内，才会在这里有
 * style ： BBFFFOOO（这是一个对象的地址）
 * onclick : null 事件属性，点击时做的事情
 * onmouseover ： null 鼠标划过做的事情
 */