DOM对象

DOM（document object model）文档对象模型

获取DOM对象的方法

1、直接获取，通过id直接获取（不推荐）

2、通过id，使用document对象getElementById方法来获取

var id = document.getElementById（“id”）

console.info（id）

3、通过class类名称，来获取DOM对象

var class=document.getElementsByClassName（“class”）

console.info（class）

4、通过标签名称来获取DOM对象

var divs=document.getElementsByTagname（“div”）

console.info（divs）

5、通过name属性来获取DOM对象，只针对表单元素

var name=document.getElementsByName（“name”）

操作DOM对象的内容

1、innerHTML操作内容

var id=document.getElementById（“id”）

console.info（id.innerHTML）

id.innerHTML=”内容”

2、innerTEXT 操作内容的文本 非w3c

var id=document.gerElementById（“id”）

console.info（id.innerText）

id.innerText=”内容”

3、w3c下的操作文本内容

var id=document.getElementById（“id”）

console.info（id.textContent）

id.textContent=”内容”

操作DOM对象的属性

1、DOM对象.属性名称=新值

2、DOM对象["属性名称"] = 新值;

3、DOM对象.getAttribute("属性名称");

4、DOM对象.setAttribute("属性名称", "新值");

操作DOM对象的样式

1、通过 DOM对象.style.样式名称，获取样式值，这种方式只能获取行内样式，无法获取页面或外联样式

console.info（id.style.height）

2、w3c有一个api，用于获取样式，不过该api存在兼容性，IE9+

console.log（getComputedStyle（class）.height）

console.log（getComputedStyle（class）.width）

针对IE8 及其以下的浏览器，MS专门提供了一个api

console.info（id.currentStyle.height）

3、因为获取宽高的值进行操作，那么使用之前的方法，获取的值是携带单位的字符串，操作时需要先去掉单位，计算完成后，赋值的时候又需要拼接单位

offsetWidth  offsetHeight获取的时候存在边框

console.info（id.offsetWidth）

console.info（id.offsetHeight）

clientHeight  clientWidth即便是存在边框，它也不获取

console.log（id.clientWidth）

console.log（id.clientHeight）