js中的dom对象（web开发之-js的dom操作）
这里我想了想还是讲一些吧，算是一个基础的了解，在真实的工作中，我们更多的是用到后面的jquery去操作，这里只是简单讲一下，让大家了解，怕大家到jquery那里不明白。
我们以下操作都会使用以下的html的文件：
<html>
<head>
<title>js</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div id="container_id">
我是div块
</div>
<div class="container_class">
我是div块1
</div>
<div class="container_class">
我是div块2
</div>
</body>
<script type="text/javascript" src="./index.js">
</script>
</html>
// 通过getElementId获取
var dom = document.getElementById("container_id");
console.log(dom.innerHtml);
console.log(dom.innerText);
// 通过getElementsByClassName获取
var doms = document.getElementsByClassName("container_class");
console.log(doms);
console.log(doms[0].innerText);
注：
getElementById：是通过html元素的id属性来获取，由于id是唯一的，所以，会直接获取dom元素；
getElementsByClassName：是通过html元素的class属性来获取，由于class可以被多个html元素使用，所以，获取到的是一个数组。
获取到dom元素之后，我们就可以获取到dom元素内部的内容，innerHtml会获取到内部的包含html标签的内容，从上面的例子我们可以看出来；而innerText只会获取到内部的文本内容。
js更改html中的内容上面既然能获取dom元素的内容，我们就能通过js来进行更改。
// 通过getElementId获取
var dom = document.getElementById("container_id");
console.log(dom.innerHTML);
console.log(dom.innerText);
// 通过getElementsByClassName获取
var doms = document.getElementsByClassName("container_class");
console.log(doms);
console.log(doms[0].innerText);
dom.innerHTML = "<div>我是新更改的</div>";
//dom.innerText = "我是另外新更改的"; // 可以尝试看下输出效果
注：
要更改dom元素内部的内容，直接 dom元素.innerHtml = "想要赋的值就行";或者dom元素.innerText = "想要赋的值就行";
js更改html中的属性
var dom = document.getElementById("container_id");
dom.setAttribute("style","color:red;background:blue");
注：以上代码我们通过setAttribute来给dom元素设置属性，这里我们设置了字体红色，背景蓝色。同样的你也可以添加其他属性。
js获取html中的属性
var dom = document.getElementById("container_id");
dom.setAttribute("style","color:red;background:blue");
var cssstyle = dom.getAttribute("style");
console.log(cssstyle);
var csscolor = dom.style.color;
console.log(csscolor);
注：我们通过getAttribute获取了dom元素的style的属性值；
使用dom元素.style.属性 我们获取了对应的style中的颜色值；
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
