JavaScriptDOM知识点总结

Posted 2020-10-27 hhy-love-python

javascript

1. 获取页面中的html元素

2. 获取或改变页面中的HTML元素内容

3. 获取或改变页面中的HTML属性

4. 获取或改变页面中的CSS样式

5. 为元素绑定事件

6. 创建HTML元素

7. 删除已有的HTML元素

8.  

    

一.获取页面中的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=新样式

五.绑定事件

1. 在元素内绑定事件

   <button onclick="displayDate()">点这里</button>

2. 使用HTML DOM绑定事件

   <script>document.getElementById("myBtn").onclick=function(){displayDate()};</script>

3. 使用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>

 

1. 创建一个节点

   var para=document.createElement("p");

2. 创建一个文本节点

   var node=document.createTextNode("这是一个新段落。");

3. 将文本节点追加到节点中

   para.appendChild(node);

4. 将节点添加到原有节点中

   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>

 

1. 找到父节点

   var parent=document.getElementById("div1");

2. 找到要删除的节点

   var child=document.getElementById("p1");

3. 删除节点

   parent.removeChild(child);