DOM

2018-03-13 本文已影响0人把早晨六点的太阳留给我

获取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 = "<b>因为</b>爱情";

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

2.innerText

_div.innerText = "<b>因为</b>爱情";

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

3.textContent

_div.textContent = "<b>因为</b>爱情";

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

操作DOM对象的属性

1..属性名称

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function() {
                var _div = document.getElementById("show");
                    _div.title = "因为爱情";    
            }
        </script>
    </head>
    <body>
        <div id="show" class="msg" title="这个是很漂亮的标题" style="height: 30px;">
            这个是div
        </div>
    </body>
</html>

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)

DOM