一、认识DOM
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准。
DOM将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
将HTML代码分解为DOM节点层次图：
1-（1）-节点层次图
HTML文档可以说由节点构成的集合，三种常见的DOM节点：
1、元素节点：上图中<html>、<p>、<body>等都是元素节点，及标签。
2文本节点：向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3、属性节点：元素属性，如：<a>标签的链接属性href="http://www.imooc.com"。
例如：<a href="http://www.imooc.com">JavaScript DOM</a>
二、通过ID获取元素
网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。在网页中，我们通过id先找到标签，然后进行操作。
语法：
document.getElementById("id")
注：获取的元素是一个对象，如相对元素进行操作，我们需要通过他的方法或属性。三、innerHTML属性innerHTML属性用于获取或替换HTML元素的内容。语法：object.innerHTML注意：1、Object是获取的元素对象，如通过document.getElementById("ID")获取的元素。2、注意书写，innerHTML区分大小写。我们通过id="con"获取<p>元素，并将元素的内容输出和改变元素代码。
四、改变HTML样式
HTML DOM允许JavaScript改变HTML元素的样式。
语法：
object.style.property=new style;
注意：Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
基本属性表（property）：
注意：这只是一小部分css样式属性，其他样式也可以通过该方式设置和修改。
例如：
4-(1)-css样式属性
改变<p>元素的样式，将颜色改为红色，字号改为20，背景颜色改为蓝色：
4-（2）-例子
五、显示和隐藏（display属性）
网页中经常看到显示和隐藏的效果，可通过display属性来设置。
语法：
Object.sytle.display=value;
注意：Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
value取值：
none 此元素不会被显示（隐藏）
block 此元素将显示为块级元素（显示）
如图：
5-（1）-display
点击显示就显示文字，点击隐藏就隐藏文字，然后按钮上移
六、控制类名（className属性）
用代码的方式给元素赋予外观（css）
先定义变量
var p1=document.getElementById("p1");
后使用变量名调用.className属性
p1.className="class属性"
注：更完此次不会再更新JavaScript，要去看java了，本来想的就是后台，还没想过前端的事，晕晕晕。
2018年6月4日16:49:20
网友评论