JavaScript入门总结（三）：DOM操作

此笔记为慕课网前端学习笔记JavaScript入门篇课程
[toc]

1.什么是DOM

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。可对HTML元素进行操作，可添加、改变或者移除CSS样式。
将HTML代码分解为DOM节点层次图：

HTML文档可以说由节点构成的集合，三种常见的DOM节点:
  1. 元素节点：上图中、、

等都是元素节点，即标签;
  2.文本节点:向用户展示的内容，如

...

中的JavaScript、DOM、CSS等文本;
  3.属性节点:元素属性，如标签的链接属性href=”http://www.imooc.com”。

2.通过ID获取元素

语法如下：

document.getElementById(“id”)
例子如下：

<script type="text/javascript">
    var mye=document.getElementById("com");//获取元素存在变量mye中
    document.write(mye);//输出变量mye
    script>

“document.write(mye)”输出结果为：null或者[object HTMLParagraphElement]，如果要输出原始的内容，详见下节。

3.innerHTML 属性

innerHTML 属性用于获取或替换 HTML 元素的内容。
语法如下;

Object.innerHTML

注意：
  1.Object是获取的元素对象，如通过document.getElementById(“ID”)获取的元素;
  2.注意书写，innerHTML区分大小写。
例子如下：通过id=”con”获取

元素，并将元素的内容输出和改变元素内容
代码：

结果：

4.改变 HTML 样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
语法如下：

Object.style.property=new style;

**注意:**Object是获取的元素对象，如通过document.getElementById(“id”)获取的元素。
基本属性表（部分）如下：

例子如下：改变

元素的样式，将颜色改为红色，字号改为20,背景颜色改为蓝：

<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>

结果为;

5.显示和隐藏（display属性)

通过display属性来设置网页显示和隐藏的效果。
语法如下：

Object.style.display = value

参数说明：
  value取值:none（此元素隐藏）；block（此元素显示为块级元素，即显示）。
例子如下：

6.控制类名（className 属性）

className 属性设置或返回元素的class 属性。
语法如下：

object.className = classname

作用：
  1.获取元素的class 属性;
  2. 为网页内的某个元素指定一个css样式来更改该元素的外观。
例子：获得

元素的 class 属性和改变className