HTML DOM （文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。如下图
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
-
通过id去获取元素:
document.getElementById<html> <body <p id="test">通过id方法来改变我的内容哦</p> <br> <button type="button" onclick="changText()">点击我改变上面文本的内容</button> <script> function changText(){ var x = document.getElementById('test') x.innerHTML = "我是通过id获取元素来改变的" } </script> </body> </html>
上面例子中点击按钮调用JS方法通过元素的id获取到元素，然后改变它的内容
-
通过标签名获取所有的标签，
document.getElementsByTagName.例子如下<html> <body> <p>Hello World!</p> <p>什么鬼东西啊</p> <script> var y=document.getElementsByTagName("p"); document.write('第二p标签中的第一段文本是：' + y[0].innerHTML); </script> </body> </html> -
改变HTML属性:
document.getElementById(id).attribute=new value
如下例子，点击按钮替换img的src属性<html> <body>  <button type="button" onclick="changeImg()">点击切换一个更好看的美女图片行不</button> <script> function changeImg(){ var x = document.getElementById("image") x.src = "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1474525644&di=eabddabe6fac4f92a6158697ab3c0d9d&src=http://e.hiphotos.baidu.com/image/pic/item/314e251f95cad1c8037ed8c97b3e6709c83d5112.jpg" } </script </body> </html> -
改变 HTML 样式
document.getElementById(id).style.property=new style
例子：
<p id="p2">Hello World!</p><script> document.getElementById("p2").style.color="blue"; </script> -
使用 HTML DOM 来分配事件
<html> <body> <p>点击按钮就弹窗</p> <button id="btn">点我出弹窗</button> <script> var x = document.getElementById('btn').onclick = function(){alert("该弹窗的要弹窗啊")} </script> </body> </html> onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
<html>
<body onload="checkCookies()">
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
{
alert("已启用 cookie")
}
else
{
alert("未启用 cookie")
}
}
</script>
<p>提示框会告诉你，浏览器是否已启用 cookie。</p>
</body>
</html>
7.onchange 事件
onchange 事件常结合对输入字段的验证来使用。
<p>输入小写字母变大写</p>
<input type="text" id="userName" onchange="upperName()">
<script>
function upperName() {
var x = document.getElementById("userName")
x.value = x.value.toUpperCase();
}
</script>
8.onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数
<html>
<body>
<p onmouseover="mouseOn()" onmouseout="mouseM()">鼠标移动到我上面，或者移走都会有不能的效果</p>
<script>
function mouseOn(){
alert("鼠标移动上来了")
}
function mouseM(){
alert("鼠标移动走了")
}
</script>
</body>
</html>
9.onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}
function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>
</body>
</html>
10 . 创建新的 HTML 元素
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<p>不好意思我需要自己去实现</p>
<div id="yjDiv">
<p>很明显这是一个标签</p>
<p>这是第二个标签</p>
</div>
<button type="button" onclick="appendTag()">新增一个标签</button>
<script>
function appendTag(){
var pTag = document.createElement("p"); // 创建一个p标签
var childNode = document.createTextNode("我需要新建一个标签"); // 新建一个节点
pTag.appendChild(childNode); // 添加节点到元素中
var newDiv = document.getElementById("yjDiv"); //获取div元素
newDiv.appendChild(pTag); // 往元素中添加标签
}
</script>
11.删除已有的HTML元素
如需删除 HTML 元素，您必须首先获得该元素的父元素
<div id="yjDiv">
<p id="yjP">我是段落1</p>
<p id="yjp1">我是段落2</p>
</div>
<button type="button" onclick="deleteP()">点击删除一个段落</button>
<script>
function deleteP(){
var parent = document.getElementById("yjDiv"); // 获取父元素
var child = document.getElementById("yjP"); // 获取需要删除的标签
parent.removeChild(child)
}
</script>
11、获取浏览器内部窗口的宽高(不包括内滚动条/工具栏)
<p id ="test">点击下面的按钮获取窗口的宽高</p>
<button type="button" onclick="getWindowInfo()">点击获取</button>
<script>
function getWindowInfo() {
var h=window.innerHeight||document.documentElement.clientHeigh||document.body.clientHeigh;
var w = window.innerWidth || document.documentElement.clientWidth||docuemnt.body.clientWidth;
var x = document.getElementById("test");
x.innerHTML = "获取到的宽高 "+ w +",高度："+ h +""
}
</script>
