HTML DOM (文档对象模型)
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
1.通过 id 找到 HTML 元素 document.getElementById("txtName") 返回出来的是一个值
2.通过标签名找到 HTML 元素 getElementsByTagName("p"); 返回出来的是一个数组
3.通过类名找到 HTML 元素 document.getElementsByClassName("p1")
文档中的每一个元素都是一个对象。利用DOM提供的方法能得到任何一个对象。
我们可以把一个页面结构看做是一颗树，一棵树是由一个个节点构成的
节点及类型：
1.元素节点 （标签（例<h1></h1>、<head></head>）、原点、节点）
2.属性节点：元素的属性，我们可以通过属性的方式来操作 <body background="">里的 background=""代表属性节点
在元素节点里可以定义属性节点
3.文本节点：是元素节点的子节点，也就是存文本
在属性节点里可以写文本节点
包含关系：元素节点包含属性节点和文本节点
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>DOM简介</title>
</head>
<body >
</body>
</html>
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
1.getElementByID方法（根据id值）
它是document对象特有的函数。该方法返回一个与那个有着给定id属性值的元素节点对应的对象。
2.getElementsByTagName方法（根据n标签名获取元素节点，返回数组）
可返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。
该方法也只有一个参数，该参数是标签的名字。
3.getElementsByClassName方法（根据class值获取元素节点，放回数组）
HTML5 DOM中新增的一个方法。这个方法让我们能通过class属性中的类名来访问元素。
4.getElementsByName方法（根据name值获取元素）
getElementsByName() 方法可返回带有指定名称的对象的集合
该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。
另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），
所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>改变 HTML</title>
<script>
// 创建方法：function 方法名(){ }
function changeHtml(){
//getElementByID：根据id名获取元素节点，因id是唯一的，所以返回单个值
//在DOM里都通过document对象里方法或属性来实现的
// .innerText="这里是改变文本节点的内容"
// .innerHTML="这里是改变html的内容"
document.getElementById("header").innerText="大标题"; //此处不能加粗字体，
// 改变id名为p1的
document.getElementById("p1").innerHTML="<strong>你好，世界</strong>"; //<strong>加粗
//.innerText 和.innerHTML的区别：在innterText中不能加标签（例加粗标签），在innterHTML里可以写文本也可以标签
//getElementsByName方法：根据name的值获取元素 name可以有多个值，所以返回一个数组
var arr=document.getElementsByName("Name");//定义一个数组来获取这几个元素节点
arr[0].value="张三";
arr[1].value="李四";
arr[2].value="王五";
arr[3].value="李六";
arr[4].value="赵七";
//getElementsByTagName方法根据标签名获取元素节点（例<a></a> a就是），返回数组
var arr1=document.getElementsByTagName("a");
for(var i=0;i<arr1.length;i++){
arr1[i].innerText="快点我";
}
//getElementsByClassName方法:根据class值获取元素节点，返回数组
var arr2=document.getElementsByClassName("test"); //定义数组接受
//改变它的值
arr2[0].innerText="2018双11";
arr2[1].innerText="2018俄罗斯世界杯";
}
</script>
<style>
.test{
color:green;
}
</style>
</head>
<body>
<div>
<h1 id="header">标题一</h1>
<p id="p1">Hello World!</p>
<input type="text" name="Name" id="UserName" value="" /><br />
<input type="text" name="Name" value="" /><br />
<input type="text" name="Name" value="" /><br />
<input type="text" name="Name" value="" /><br />
<input type="text" name="Name" value="" /><br />
<ul>
<li><a href="#">新浪</a></li>
<li><a href="#">百度</a></li>
<li><a href="#">腾讯</a></li>
<li><a href="#">搜狐</a></li>
<li><a href="#">网易</a></li>
</ul>
<p class="test">
白日依山尽，黄河入海流。
</p>
<p class="test">
北京欢迎您!
</p>
<input type="button" name="name" value="改变HTML内容"
onclick="changeHtml();" />
</div>
</body>
</html>
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=新样式
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HTML DOM - 改变CSS</title>
<script>
//将p1颜色改为红色 p2改为蓝色 p2背景色改为灰色
function getCss(){
//获取标签
document.getElementById("p1").style.color="red";
document.getElementById("p2").style.backgroundColor="#808080"
}
//隐藏和显示文本(hidden visibility)
function show(){
//获取要隐藏的p标签
var text=document.getElementById("text");
//判断文本框的状态，若当前显示则实现隐藏
var state=text.style.visibility;
if(state=="hidden"){ //如果状态尾隐藏
//显示
text.style.visibility="visible";
//改变按钮的值
document.getElementsByClassName("btn")[0].innerText="隐藏文本";
}else{
//隐藏
text.style.visibility="visible";
document.getElementsByClassName("btn")[0].innerText="显示文本";
}
}
//
</script>
</head>
<body>
<p id="p1">文腾8225</p>
<p id="p2">文腾8225</p>
<button id="btnOK" onclick="getCss()">改变CSS</button>
<p id="text">文腾8225</p>
<button class="btn" onclick="show();">隐藏文本</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>getAttribute获取属性</title>
<!--getAttribute方法只有一个参数，我们要查询的属性的名字。 就是说获取属性的值
该方法不属于document对象，只能通过元素节点对象调用。比如与getElementById方法合用：-->
<script>
//获取元素属性
function getAtrr(){
//获取元素节点
var a=document.getElementsByTagName("a")[0];
//改变id为p1的元素节点的文本节点为第一个A标签的href属性的值
document.getElementById("p1").innerText=a.getAttribute("href");
}
</script>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.sohu.com" target="_parent">搜狐</a>
<a href="http://www.sina.com" target="_blank">新浪</a>
<a href="http://www.csdn.com" target="_blank">CSDN</a>
<div class="container" title="main">
</div>
<button onclick="getAtrr()">获取属性</button>
<p id="p1"></p>
<p id="p2"></p>
<!--
getAttribute获取属性 将
-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>setAttribute设置属性</title>
<!--
setAttribute方法允许我们用属性节点的值做修改。
与getAttribute一样，setAttribute也只能用于元素节点。
setAttribute()方法需要我们向它传递两个参数：obiect.setAttribute(attribute,value) attribute属性名称 value修改后的属性值
-->
<script>
//文档加载事件：当html整个页面加载完成以后再执行该脚本（执行完<body>里的内容在执行此处）
//文档加载以后再行该方法
window.onload=function(){
//将div title属性值改为like
//1.获取div
document.getElementById("divHobby").setAttribute("title","like");
//改好以后，获取title的值
var title=document.getElementById("divHobby").getAttribute("title");
alert(title);
}
</script>
</head>
<body>
<div id="divHobby" title="hobby">
<ul>
<li>游泳</li>
<li>上网</li>
<li>拳击</li>
<li>音乐</li>
</ul>
</div>
</body>
<!--<script> 不用文档加载，也可以将《script>标签放到文档下面
//文档加载事件：当html整个页面加载完成以后再执行该脚本（执行完<body>里的内容在执行此处）
//文档加载以后再行该方法
function(){
//将div title属性值改为like
//1.获取div
document.getElementById("divHobby").setAttribute("title","like");
//改好以后，获取title的值
var title=document.getElementById("divHobby").getAttribute("title");
alert(title);
}
</script>-->
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM常用属性</title>
<!--
1.nodeName 属性 :节点名称
nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document
2.nodeValue 属性：节点的值。
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值
3.nodeType属性，可以使用nodeType属性来获取节点类型。
nodeType属性共有12种取值，其中仅有三种较常用：
元素节点的nodeType属性值是1；
属性节点的nodeType属性值是2；
文本节点的nodeType属性值是3。
4.childNodes属性
childNodes属性可以用来获取任何一个元素的所有子元素，是一个包含这个元素全部子元素的数组。
//属性节点不是元素的子节点
5.firstChild、lastChild属性
firstChild 获得第一个子节点
lastChild 获得最后一个节点
-->
<script>
window.onload=function(){
//获取元素的节点名称和节点值和节点类型
//获取元素节点名
var ele=document.getElementById("container");
alert(ele.nodeName);
//获取节点属性的值
alert(ele.childNodes[1].nodeValue);
//文本节点（例下面的 博客）一定是元素的子节点。
//第一个子节点
ele.firstChild;
//最后子节点
ele.lastChild;
alert(ele.firstChild.nodeType);
}
</script>
</head>
<body>
<div id="container">博客
<h1>个人网站</h1>
<p id="p1">Hello World!</p>
<div id="hobby">
兴趣爱好:
<ul id="hobby_list">
<li>上网</li>
<li>学习</li>
</ul>
</div>y878</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>DOM 动态创建节点</title>
<!--1. 创建一个元素节点:
1). createElement("标签名"): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数：被创建的元素节点的名字, 是一个字符串.
方法的返回值：是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1.
新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象.
2. 创建一个文本节点:
1). createTextNode("文本值"): 创建一个包含着给定文本的新文本节点. 这个方法的返回值是一个指向新建文本节点引用指针.
它是一个文本节点, 所以它的 nodeType 属性等于 3.
方法只有一个参数：新建文本节点所包含的文本字符串. 新元素节点不会自动添加到文档里
3. 为元素节点添加子节点:
1). appendChild(): var reference = element.appendChild(newChild):
给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点.
方法的返回值是一个指向新增子节点的引用指针.
4. 插入节点:
1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode);（新节点，插入目标结点的位置）
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是
element 元素的一个子节点。
5 删除节点:
从一个给定元素里删除一个子节点
格式：var reference = element.removeChild(node);
返回值：返回值是一个指向已被删除的子节点的引用指针。
注意：某个节点被 removeChild() 方法删除时，这个节点所包含的所有子节点将同时被删除。
-->
<script>
//新增一本书
function newNode(){
//1.创建一个li元素节点
var book=document.createElement("li");
//2.创建文本节点
var booknode=document.createTextNode("《西游记》");
//3.把文本节点添加到元素节点里面
book.appendChild(booknode);
//4.吧新的元素节点添加到ul元素节点里面 因为所有的li都在ul内执行
//用appendChild把子节点添加到父节点里面，不能指定插入位置，默认插入到最后一个子元素里面
// var books=document.getElementById("books");
// books.appendChild(book);
//document.body.appendChild(book);
//4.1获取插入的位置
var old=document.getElementById("book2");
//4.2插入
old.parentElement.insertBefore(book,old);//old代表book2所在的元素
}
//删除节点
// var reference = element.removeChild(node);
function rmChild (){
//获取要删除的父元素节点
var stars =document.getElementById("stars");
//2.获取要删除的自节点
var fanbingbing=document.getElementById("fanbingbing")
//3.从父节点把要删除的子节点删除
}
</script>
</head>
<body>
<h2 >喜欢的书籍</h2>
<input id="b1" type="button" value="增加一本书" onclick="newNode()" />
<input id="b2" type="button" value="删除节点" onclick="rmChild()"/>
<br />
<ul id="books">
<li id="book1">《三国演义》</li>
<li id="book2">《水浒传》</li>
<li>《红楼梦》</li>
</ul>
<h2>你最喜欢哪些明星</h1>
<ul id="stars">
<li id="fanbingbing">范冰冰</li>
<li id="liudehua">刘德华</li>
<li>王宝强</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态创建元素</title>
<style>
#container {
margin:0px auto;
width:400px;
}
</style>
<script>
// 创建用户登录界面
function createTN(){
}
</script>
</head>
<body>
<div id="container">
</div>
<input type="button" name="name" value="创建文本节点" onclick="createTN();" />
</body>
</html>
3440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
