JavaScript如何操作DOM对象

DOM操作

/* 
 * DOM: document object model文档对象模型，提供系列的属性和方法，让用户能在JS中操作页面中的元素
 *   获取元素的属性和方法
 *     document.getElementId([ID]);
 *     [context].getElementsByTagName([TAG-NAME]); 获得元素集合
 *     [context].getElementsByClassName([CLASS-NAME]) 在IE6~8中不兼容
 *     document.getElementsByName([NAME]) 在IE浏览器中只对表单元素有NAME属性的有作用
 *     [context].querySelector([SELECTOR]) 在IE6~8中不兼容
 *     [context].querySelectorAll([SELECTOR]) 在IE6~8中不兼容
 *  
 * -----------------------------------------------------------
 *     document
 *     document.documentElement
 *     document.head
 *     document.body
 *     childNodes     获取所有的子节点
 *     children       获取所有元素子节点(在IE6~8中会把注释节点当做元素节点获取到)
 *     parentNode     获取父节点
 *     firstChild / firstElementChild
 *     lastChild / lastElementChild
 *     previousSibling / previousElementSibling 获取上一个兄弟节点
 *     nextSibling / nextElementSibling 获取下一个兄弟节点
 *     // =>所有带Element的在IE6~8中不兼容
 * 
 * 
 * --------------------------------------------------------------
 * DOM的增删改操作
 *   1、新增
 *    document.createElement([TAG-NAME]);
 *    document.createTextNode([TEXT CONTENT]);
 *    字符串拼接（模板字符串），然后基于innerHTML/innerText存放到容器中
 *    [parent].appendchild([ELEMENT]);
 *    [parent].insertBefore([ELEMENT], [NEW-ELEMENT])
 * 
 *   2、克隆
 *    [ELEMENT].cloneNode([TRUE/FALSE]);
 *   
 *   3、移除
 *    [PARENT].removeChild([ELEMENT])
 * 
 *   4、设置自定义属性
 *    [ELEMENT].xxx = xxx;
 *    [ELEMENT].setAttribute(属性名，属性值)
 *    获取：
 *    [ELEMENT].xxx
 *    [ELEMENT].getAttribute(属性名)
 *    删除
 *    delete [ELEMENT].xxx
 *    [ELEMENT].removeAttribute(属性名)
 * 
 * 
 * ----------------------------------------------------------------------------
 *  获取元素样式和操作样式
 *   1、修改元素样式
 *     [ELEMENT].style.xxx = xxx  修改行内样式
 *     [ELEMENT].calssName = xxx  设置样式类
 *   2、获取元素样式
 *     [ELEMENT].style.xxx   获取的是当前元素写在行内上的样式，如果没有这个样式就获取不到，或者有这个样式，但是没有写在style中，也获取不到
 * 
 * 

JS盒子模型属性

/*
*    基于一些属性和方法，让用户能够获取当前元素的样式信息，例如clientWidth、offsetWidth等
*  1、client
*    width / height
*    top / left
*  2、offset
*    width / height
*    top / left
*    parent
*  3、scroll
*    width / height
*    top / left
* 
* 方法：
*  window.getComputedStyle([ELEMENT],[伪类])
*  [ELEMENT].currentStyle
*/


/* 
* client系列
*   let box = document.getElementById('box);
*   // =>获取盒子可视区域的宽高
*   // 1、内容溢出与否对他没有影响
*   // 2、获取的值是一个没有单位的number类型值(其余的盒子模型属性也是)
*   // 3、获取的结果是整数，会自己进行四舍五入(其余的盒子模型属性也是)
*   box.clientWidth （内容宽度+左右padding）
*   box.clientHeight (内容高度+上下padding)
* 
* 
* offset系列
*   // =>获取盒子本身的宽高（在CLIENT的基础上加上border）
*   // 1、内容溢出与否对它也没有影响
* 
* 
* scroll系列
*  // =>在没有内容溢出的情况下，获取的结果和CLIENT是一样的
*  // =>在有内容溢出的情况下，获取的结果约等于真实内容的宽高(上/左padding + 真实内容的高度/宽度)
*  // 1、不同浏览器获取到的结果不一样
*  // 2、设置overflow属性值对最后的结果也会产生一定的影响
* 
* 
* // 获取整个页面真实的高度
* document.documentElement.scrollHeight || document.body.scrollHeight
* 
* 
*  Element.scrollTop;  =>竖向滚动条卷去的高度
*  Element.scrollLeft; =>横向滚动条卷去的宽度
*  // scrollTop的边界值：
*       min：0
*       max：整个的高度scrollHeight - 一屏幕高度clientHeight
* 
*  // =>13个盒子模型属性中，只有scrollTop和scrollLeft这两个是可读写的（既可以获取也可以设置），其余的都是只读的（既只能获取不能设置）
* 
* 
*/