DOM

获取DOM对象的几种方式

1.直接通过id来获取

通过id来调取div
var_div=document.getElementById("one");
div.innerHTML = "这个getElementById获取的";

2.通过标签名称获取对应的标签

var_divs=document.getElementsByTagName("div");
console.info(_divs)
_divs[0].innerHTML = "啊啊这个是使用getElementById获取的";

3.通过class获取对应的标签

var_divs=document.getElementsByClassName("show");
console.info(_divs)
_divs[1].innerHTML = "是不是";

4.通过name属性获取对应的标签

使用场景只有form标签

var_name=document.getElementsByName("username")
console.info(_name)
_name[0].value = "因为爱情";

操作DOM对象的内容

1.innerHTML

_div.innerHTML = "因为爱情";

特点：innerHTML可以插入HTML片段，能够解析HTML文本

2.innerText

_div.innerText = "因为爱情";

特点：innerText不能解析HTML片段，只能插入文本内容。非w3c规定

3.textContent

_div.textContent = "因为爱情";

特点：textContent不能解析HTML片段，只能插入文本内容。w3c规定

操作DOM对象的属性

1..属性名称

    
        
        
        
    
    
        

            这个是div
        
    

2.获取class的时候 使用className来获取

var _title = _div.getAttribute("title");
console.info(_title)

3.数组的这种方式，一般用来获取id title属性，其他一般不用

_div["title"] = "这个是一个新的标题";
console.info(_div["style"])
_div.setAttribute("title","因为生活")

操作DOM的样式

获取样式的值（有单位）

1、行内样式：标签对象.style.样式名称

通过dom对象.style.样式属性 这种方式
只能获取行内样式，无法获取外联样式

console.info(_show.style.height);

2、getComputedStyle(标签对象).样式名称 【兼容IE9+】

针对于dom无法获取外联样式，w3c为大家提供了一个getComputedStyle

console.info(getComputedStyle(_show).width);

3、标签对象.currentStyle.样式名称 【低版本IE】

console.info(_show.currentStyle.width)

获取样式的数值（无单位，数字）

1.offsetHeight

获取样式对应值，注意：offsetHeight 获取的值包含边框

console.info(_show.offsetHeight)

2.clientHeight

获取样式对应值，注意：clientHeight 获取的值不包含边框

console.info(_show.clientHeight)