-
获取页面中的HTML元素
-
获取或改变页面中的HTML元素内容
-
获取或改变页面中的HTML属性
-
获取或改变页面中的CSS样式
-
为元素绑定事件
-
创建HTML元素
-
删除已有的HTML元素
一.获取页面中的HTML元素
<article class="shoppingInfo"> <h6>{{ item.productname }}</h6> <span class="unit">{{ item.specifics }}</span> <p class="price" id='unit'><span>¥</span><span><s>¥</s></span></p> </article>
通过id查找HTML元素(唯一)
var p=document.getElementById('unit')
通过class查找HTML元素(不唯一)
var article=document.getElementByClass('shoppingInfo')
通过标签名查找HTML元素(不唯一)
var h6=document.getElementByTagName('h6')
二.获取或改变页面中的HTML元素内容
document.getElementById(id).innerHTML(获取)
document.getElementById(id).innerHTML=新的 HTML(改变)
三.获取或改变页面中的HTML元素属性
document.getElementById(id).src(获取)
document.getElementById(id).attribute=新属性值(改变)
四.获取或改变页面中的HTML元素样式
document.getElementById(id).style.property(获取)
document.getElementById(id).style.property=新样式
五.绑定事件
-
在元素内绑定事件
<button onclick="displayDate()">点这里</button>
-
使用HTML DOM绑定事件
<script>document.getElementById("myBtn").onclick=function(){displayDate()};</script>
-
使用addEventListener()方法绑定事件
document.getElementById("myBtn").addEventListener("click", displayDate);
传递参数:当传递参数值时,使用"匿名函数"调用带参数的函数:
element.addEventListener("click", function(){ myFunction(p1, p2); });
六.创建新的HTML元素
<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); document.getElementById("div1").appendChild(para); </script>
-
创建一个节点
var para=document.createElement("p");
-
创建一个文本节点
var node=document.createTextNode("这是一个新段落。");
-
将文本节点追加到节点中
para.appendChild(node);
-
将节点添加到原有节点中
document.getElementById("div1").appendChild(para);
七.删除已有的HTML元素
<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>
-
找到父节点
var parent=document.getElementById("div1");
-
找到要删除的节点
var child=document.getElementById("p1");
-
删除节点
parent.removeChild(child);