js - DOM获取元素对象，及其尺寸和偏移量

/**
* DOM
* - 通过提供的一系列对象操作页面
*/

//1. 获取元素对象
var o_text = document.getElementById(‘id名称’);//返回：这个元素 或 null
var o_text = document.getElementsByClassName(‘类名’);//返回：伪数组 或 空伪数组
var o_text = document.getElementsByTagName(‘标签名’)//返回：伪数组 或 空伪数组
var o_text = document.querySelector(‘选择器’)//返回：第一个对应的选择器元素 或 null
var o_text = document.querySelectorAll(‘选择器’)//返回：伪数组 或 空伪数组
var o_body = document.body;//body
var o_html = documnent.documentElement;//html

//2. 获取元素尺寸
//2.1 相对宽高：width/height + border + padding
// 凡是offset获取的值都不带px单位！！！！
var o_width = o_text.offsetWidth;
var o_height = o_text.offsetHeight;
//2.2 可视宽高：width/height + padding
var o_width = o_text.clientWidth;
var o_height = o_text.clientHeight;

//3. 获取元素偏移量
//3.1 当前元素相对于 页面/父元素 左边/上边 的距离
// 与定位有关，有定位则相对于父元素
var l = o_div.offsetLeft;
var t = o_div.offsetTop;
//3.2 左/上边框的宽度（及边框厚度），以像素表示
var cr = o_div.clientLeft;
var ct = o_div.clientTop;

获取元素属性后可对其进行一系列操作，包括
1.操作元素尺寸、偏移量
2.操作元素样式：行内样式（元素.style.CSS属性）、非行内样式（getComputeStyle(元素).属性 //标准浏览器支持。元素.currentStyle.属性 //IE浏览器）
3.操作元素类名：对类名的增、删、改、查
4.操作元素属性：原生属性（ 元素.属性。元素[‘属性’]）、自定义属性（元素.getAttribute(“属性名”) :获取属性。元素.setAttribute(“属性名”,“属性值”) :设置属性。元素.removeAttribute(“属性名”) : 删除属性）、H5自定义属性（元素.dataset。属性）
5. 操作元素内容（innerHTML、innerText、value）