JavaScript中的DOM对象

1.获取DOM对象

在JavaScript中，如何获取HTML标签

1、直接获取，通过id直接获取。（不推荐）
console.log(msg)

msg.innerHTML = "新的内容";

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

<div id="msg">这个是个div</div>

var _msg = document.getElementById("msg");
console.info(_msg)
_msg.innerHTML = "这个是通过id来获取的标签";

</script>

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

           var _show = document.getElementsByClassName("show"); //返回值是一个列表
           console.info(_show);
           _show[0].innerHTML = "这个是新的内容";
           _show[1].innerHTML = "这个是新的内容";

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

var _divs = document.getElementsByTagName("div");
console.info(_divs);
_divs[2].innerHTML = "<b>这个是第三个div</b>";

5、通过name属性来获取DOM对象，是专门为表单元素设计的

var _username = document.getElementsByName("username");
console.log(_username);

_username[1].value = "QAQ";

</script>

2.操作DOM对象的内容

1.innerHTML 操作内部内容

<div id="msg">
这个是一个div
<p>哈哈</p>

</div>

var _msg = document.getElementById("msg");
console.info(_msg.innerHTML);

_msg.innerHTML = "<strong>这个是一个新的内容，可以渲染HTML吗？</strong>";

</script>

2.操作内容的文本非W3C标准

</div>

var _msg = document.getElementById("msg");
console.info(_msg.innerHTML);

_msg.innerHTML = "<strong>这个是一个新的内容，可以渲染HTML吗？</strong>";

</script>

3.w3c标准下的操作文本内容

var _show = document.getElementById("show");
console.info(_show.textContent);
_show.textContent = "<b>可以加粗吗?</b>"

3.操作DOM对象的属性

DOM对象.属性名称 = 新值;
DOM对象["属性名称"] = 新值;
DOM对象.getAttribute("属性名称");
DOM对象.setAttribute("属性名称", "新值");

这个是一个div

</div>

var _msg = document.getElementById("msg");

_msg.title = "标题已经修改了";

_msg["title"] = "哈哈";

console.info(_msg.getAttribute("title"));

_msg.setAttribute("title","这个是新的内容");

4.操作DOM对象的样式

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

var _show = document.getElementById("show");

console.info(_show.style.height);

w3c为大家提供了一个api，用于获取样式

该api存在兼容性，IE9+

            console.info(_show.style.width);
            console.log(getComputedStyle(_show).height)
            console.log(getComputedStyle(_show).width)
            console.log(getComputedStyle(_show).backgroundColor)

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

console.info(_show.currentStyle.height)

5.操作DOM对象的样式

</style>
        <script>
            function change() {
              console.info(node)
                var _show = document.getElementById("show");
因为获取宽高的值进行操作，那么使用之前的方法，获取的值是携带单位的字符串
操作时需要先去掉单位，计算完成后，赋值时又需要拼接单位，
                offsetWidth offsetHeight 获取的时候是存在边框
                console.info(_show.offsetWidth);
                console.info(_show.offsetHeight);
                即便是存在边框，它也不获取
                console.log(_show.clientHeight);
                console.log(_show.clientWidth);
            }
        </script>
    </head>
    <body>
        <div id="show" onclick="change()">

        </div>