持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第28天，点击查看活动详情 Document Object Model（文档对象模型） 由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。
DOM树：浏览器加载页面到内存时,会在内存中形成一个树状结构 我们html当中的所有的内容都是这个树上的一个节点 这个树就叫做dom树
整个文档就是一个文档节点 每个标签都是元素节点 包含再标签中文本时文本节点 属性就是属性节点 注释是注释节点
1.DOM（Document Object Model）:文档对象模型
2.根据层次关系访问节点
（1）节点属性：
| 属性名称 | 描述 |
| parentNode | 返回节点的父节点 |
| childNodes | 返回子节点集合，childNodes[i] |
| firstChild | 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 |
| lastChild | 返回节点的最后一个子节点 |
| nextSibling | 下一个节点 |
| previousSibling | 上一个节点 |
（2）element属性
| 属性名称 | 描述 |
| firstElementChild | 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 |
| lastElementChild | 返回节点的最后一个子节点 |
| nextElementSibling | 下一个节点 |
| previousElementSibling | 上一个节点 |
（3）示例
3.节点信息
nodeName：节点名称
nodeValue：节点值
nodeType：节点类型
| 节点类型 | NodeType值 |
| 元素element | 1 |
| 属性attr | 2 |
| 文本text | 3 |
| 注释comments | 8 |
| 文档document | 9 |
4.操作节点
（1）操作节点的属性
语法：
getAttribute("属性名")
setAttribute("属性名","属性值")
（2）创建和插入节点
创建节点：
| 名称 | 描述 |
| createElement( tagName) | 创建一个标签名为tagName的新元素节点 |
| A.appendChild( B) | 把B节点追加至A节点的末尾 |
| insertBefore( A,B ) | 把A节点插入到B节点之前 |
| cloneNode(boolean) | 复制(克隆)某个指定的节点 |
（3）删除和替换节点
| 名称 | 描述 |
| removeChild( node) | 删除指定元素的某个指定子节点 |
| replaceChild( newNode, oldNode)属性attr | 用其他的节点替换指定的节点 |
示例：
案例：操作当当购物车页面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>操作当当购物车页面</title> <link type="text/css" rel="stylesheet" href="css/cartStyleRemove.css" /> </head>
<body>
<div class="content">
<div class="logo">
<img src="image/dd_logo.jpg">
<span onclick="close_plan();">关闭</span>
</div>
<div class="cartList" id="cartList">
<ul>
<li>商品图片</li>
<li>商品信息</li>
<li>单价</li>
<li>数量</li>
<li>总价</li>
<li>操作</li>
</ul>
<ul id="removeUlOne">
<li><img src="image/dog.jpg"></li>
<li>我和狗狗活下来了</li>
<li>¥<input type="text" name="price" value="21.90"></li>
<li><input type="button" name="minus" value="-" onclick="minus(0);"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(0);"></li>
<li id="price0">¥21.90</li>
<li>
<p onclick="collection();">移入收藏</p>
<p onclick="delectOne()">删除</p> </li>
</ul>
<ul id="removeUlTow">
<li><img src="image/mai.jpg"></li>
<li>灰霾来了怎么办</li>
<li>¥<input type="text" name="price" value="24.00"></li>
<li><input type="button" name="minus" value="-" onclick="minus(1);"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(1);"></li>
<li id="price1">¥24.00</li>
<li>
<p onclick="collection();">移入收藏</p>
<p onclick="delectTow()">删除</p>
</li>
</ul>
<ol>
<li id="totalPrice">商品总计：<span></span></li>
<li><span>结 算</span></li>
</ol>
div>
</div>
<script type="text/javascript " src="js/shoppingRemove.js ">
</script>
</body>
</html>
JS操作标签属性 JS操作标签的属性分为两种：一种是自带的属性，另一种是自定义的属性。有三种方式：
1、操作自带的属性，不能作用在自定义的属性上，和对象操作属性的方式一致
querySelector[‘src’] = ‘img/mg.jpg’; querySelector.title = ‘mg’;
body, ul, li, div, p, h1, h2, ol {
margin: 0;
padding: 0; }
body {
margin: 5px 0 0 0
} ul, li, ol {
list-style: none; }
.content {
width: 680px;
margin: 0 auto;
font-family: "微软雅黑";
border: solid 1px #cecece;
padding: 5px; }
.logo {
margin: 10px 0; }
.logo span {
display: inline-block;
float: right;
width: 60px;
height: 30px;
line-height: 30px;
font-size: 14px;
background: #ff0000;
color: #ffffff;
text-align: center;
border-radius: 10px;
margin-top: 5px;
margin-right: 10px;
cursor: pointer;
font-weight: bold; }
.cartList {
overflow: hidden;
} .cartList ul {
clear: both;
width: 100%;
overflow: hidden;
border-bottom: 1px #c6c6c6 dashed;
padding-top: 6px; }
.cartList ul li img { width: 60px; }
.cartList ul li {
font-family: "微软雅黑";
font-size: 12px;
color: #666666;
text-align: center;
line-height: 25px;
float: left; }
.cartList ul li input[name="price"] {
border: none;
background: transparent;
width: 45px;
text-align: center;
}
.cartList ul li input[name="amount"] {
width: 45px;
text-align: center;
border: 1px solid #999999;
border-left: none;
border-right: none;
height: 21px; }
.cartList ul li input[name="minus"],
.cartList ul li input[name="plus"] {
height: 25px;
border: 1px #999999 solid;
width: 25px;
text-align: center; }
.cartList ul li:nth-of-type(1) {
width: 130px; }
.cartList ul li:nth-of-type(2) {
width: 100px; }
.cartList ul li:nth-of-type(3) {
width: 130px; }
.cartList ul li:nth-of-type(4) {
width: 100px; }
.cartList ul li:nth-of-type(5) {
width: 130px; }
.cartList ul li p {
cursor: pointer; }
.cartList ol {
float: right;
clear: both; }
.cartList ol li {
float: left;
width: 200px; }
.cartList ol li:nth-of-type(1) span {
color: #ff0000; }
.cartList ol li:nth-of-type(2) span {
display: inline-block;
float: right;
width: 80px;
height: 35px;
line-height: 35px;
font-size: 14px;
font-family: "微软雅黑";
background: #ff0000;
color: #ffffff;
text-align: center;
margin-top: 5px;
margin-right: 15px;
cursor: pointer;
font-weight: bold; }
(4)操作节点样式
改变样式的属性：（1）style属性；
（2）className属性
style属性语法和示例：
HTML元素.style.样式属性＝"值"
document.getElementById("titles").style.color="#ff0000"; document.getElementById("titles").style.fontSize="25px ";
JS操作表单样式 1，操作style属性
querySelector.style.backgroundColor = ‘red’; querySelector.style.color=‘yellow’; 2,操作class属性
querySelector.className=‘c1’; ———————————————— 版权声明：本文为CSDN博主「爱喝椰汁的木木」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：blog.csdn.net/qq_45503643…
| 名称 | 描述 |
| onclick | 当用户单击某个对象时调用事件 |
| onmouseover | 鼠标移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
| onmousedown | 鼠标按钮被按下 |
className属性的语法和示例：
HTML元素.className="样式名称"
改变样式的属性运用示例：
5）获取元素的样式
语法：
HTML元素.style.样式属性;
示例：
alert(document.getElementById("cartList").display);
语法：
document.defaultView.getComputedStyle(元素,null).属性;
示例：
var cartList=document.getElementById("cartList"); alert(document.defaultView.getComputedStyle(cartList,null).display);
语法：
HTML元素. currentStyle.样式属性;//currnetStyle:兼容IE浏览器
示例：
alert(document.getElementById("cartList").currentStyle.display);
题：课工场论坛列表（论坛贴吧发表：节点的综合应用）
S操作表单元素
checked:表示复选框或者单选框的选中状态，在属性checked="checked"表示选中 与checked等价的
disabled:表示标签的可点击状态 ，disabled="disabled"表示不可用的
js操作这些属性的时候可以使用true false
//全局变量 var imgs = new Array("tou01.jpg", "tou02.jpg", "tou03.jpg", "tou04.jpg"); // 显示发帖div function showDiv() { document.getElementById("showSubmit").style.display = "block"; } // 点击发布添加到内容li function publist() { // 获得随机头像的图片的数组下标 var index = Math.floor(Math.random() * 4); // 创建li节点 var tvLi = document.createElement("li"); // 创建div节点 var tvDiv = document.createElement("div"); // 创建图片节点 var tvimage = document.createElement("img"); // 设置图片节点src属性 tvimage.setAttribute("src", "image/" + imgs[index]); // div添加图片为子节点 tvDiv.appendChild(tvimage); // 创建h1标签节点 var tvh1 = document.createElement("h1"); // 取得发布div框里的标题的值填充到h1标签 var tvTitle = document.getElementById("title").value; tvh1.innerText = tvTitle; // 创建一个p标签节点 var tvP = document.createElement("p"); // 创建两个span标签节点 var tvSpanOne = document.createElement("span"); var tvSpanTow = document.createElement("span"); // 第一个span标签取填充div里的下拉列表框所选的值 var tvSelect = document.getElementById("section").value; tvSpanOne.innerText = "板块：" + tvSelect; // 第二个span标签追加到p标签节点里 var date = new Date(); var str = date.getFullYear() + "/" + date.getMonth() + 1 + "/" + date.getDate() + "/" + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(); tvSpanTow.innerText = "时间是：" + str; // 把两个sapn标签追加到p标签节点里 tvP.appendChild(tvSpanOne); tvP.appendChild(tvSpanTow); // 把div、h1、p标签追加到li里 tvLi.appendChild(tvDiv); tvLi.appendChild(tvh1); tvLi.appendChild(tvP); // 把添加好的li再插入到ul标签节点里 var oldUl = document.getElementById("showContent"); // 把新添加的li节点插入到老的li节点之前 oldUl.insertBefore(tvLi, oldUl.firstChild); // 清除div里填充过的内容，如标题和内容部分 document.getElementById("title").value = ""; document.getElementById("content").value = ""; // 设置发布div隐藏 document.getElementById("showSubmit").style.display = "none"; }
