DOM概念
文档对象模型 DOM（Document Object Model）定义访问和处理 HTML 文档的标准方法。DOM 将 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。
HTML 文档可以说由节点构成的集合，三种常见的 DOM 节点:
- 元素节点，如 <html>、<body>、<p>等都是元素节点，即标签；
- 属性节点，元素属性，如 <a> 标签的链接属性href="http://www.imooc.com"。
- 文本节点，向用户展示的内容，如 <li>...</li> 中的JavaScript、DOM、CSS 等文本。
举例说明
<a href="http://www.imooc.com">JavaScript DOM</a>
DOM 节点树结构
通过ID获取元素
在网页中，我们通过 id 先找到标签，然后进行操作。
document.getElementById(“id”)
注意,获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。
innerHTML 属性
innerHTML 属性用于获取或替换 HTML 元素的内容(文本节点)。
var object = document.getElementById(“id”) ;
object.innerHTML
// 内容输出
document.write("内容输出："+ object.innerHTML);
// 内容改写
object.innerHTML = "Hello world!";
document.write("改写后的内容输出："+ object.innerHTML);
改变 HTML 样式
Object.style.property=new style;
部分基本属性表（property)
示例代码
<p id="pcon">Hello World!</p>
<script>
var mychar = document.getElementById("pcon");
mychar.style.color="red";
mychar.style.fontSize="20";
mychar.style.backgroundColor ="blue";
</script>
对于改变后的 元素样式，我们还可以通过下面的方式恢复初始状态。
mychar.removeAttribute("style")
显示和隐藏（display属性）
Object.style.display = value
/**
value 取值
none：隐藏此元素
block：显示此元素
*/
控制类名（className 属性）
var object = document.getElementById(“id”) ;
object.className = classname；
通过该语法，可以获取元素的 class 属性，为网页内的某个元素指定一个 css 样式来更改该元素的外观。
以上内容总结自慕课网-JavaScript入门篇
网友评论