JS 入门教程-14-js HTML DOM，DOM 元素的查找方法，js 对HTML的操作
目录
- 目录
- HTML DOM
- DOM TREE
- JS 对于 DOM 的操作
- 对于 DOM 元素的查找
- 根据ID
- 根据标签名称
- 根据 Name
- 根据 class
- 获取 HTML 元素
- 获取 body 元素
- 移动端常用方法（IE6~8下不兼容）
- 对于 HTML 的改变
- 改变 HTML 输出流
- 改变 HTML 内容
- 改变 HTML 属性
- 对于 CSS 样式的改变
- 改变样式
- 使用事件
- 对于 Dom 节点的操作
- 新建节点
- 删除节点
- 目录导航
HTML DOM
当浏览器页面加载时，会创建 Document Object Model。
DOM TREE
如图：
JS 对于 DOM 的操作
JS 拥有以下的能力
改变页面中的所有 HTML 元素
改变页面中的所有 HTML 属性
改变页面中的所有 CSS 样式
对页面中的所有事件做出反应
对于 DOM 元素的查找
8 种查找方式
对于元素结点的操作，首先我们要找到这个元素。
根据ID
document.getElementById('${id}') 在整个文档中，通过元素的ID获取到这个元素对象(获取的是一个元素)
如果页面中的id重复了，那么这个方法默认只获得第一个元素
如果没有获取到，返回的 结果为null
不要用id的大小写来区分我们的不同元素
根据标签名称
通过元素的标签名，来获取一组元素
document.getElementsByTagName('${tagName}')获取的是一个对象数据类型结果，并且是一个类数组（以数字作为索引，索引从0开始，逐级递增，索引代表的是当前对应的某一个元素，有一个叫做length的属性代表获取的个数）
根据 Name
context.getElementsByName('${name}');通过元素的name属性的值获取一组元素
根据 class
context.getElementsByClassName('${class}');获取 HTML 元素
document.documentElement 获取 body 元素
document.body eg:
var curWidth = document.documentElement.clientWidth || document.body.clientWidth//兼容所有浏览器的获取当前屏幕的宽度
var curHeight = document.documentElement.clientHeight || document.body.clientHeight//兼容所有浏览器的获取当前屏幕的高度移动端常用方法（IE6~8下不兼容）
document.querySelector() //获取一个document.querySelectorAll() //获取多个对于 HTML 的改变
改变 HTML 输出流
<html>
<body>
<script>
document.write(Date());
script>
body>
html>改变 HTML 内容
<html>
<body>
<p id="p1">Hello World!p>
<script>
document.getElementById("p1").innerHTML="新文本!";
script>
body>
html>改变 HTML 属性
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
script>
body>
html>对于 CSS 样式的改变
改变样式
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
head>
<body>
<p id="p1">Hello World!p>
<p id="p2">Hello World!p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontSize="larger";
script>
<p>以上段落通过脚本修改。p>
body>
html>使用事件
<html>
<body>
<h1 id="id1">我的标题 1h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
点我!button>
body>
html>当点击(onclick)时，事件会被触发。
对于 Dom 节点的操作
新建节点
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<div id="div1">
<p id="p1">这是一个段落。p>
<p id="p2">这是另一个段落。p>
div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
script>删除节点
<div id="div1">
<p id="p1">这是一个段落。p>
<p id="p2">这是另一个段落。p>
div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
script>- 如果能够在不引用父元素的情况下删除某个元素，就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。
这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);目录导航
目录导航