• JavaScriptDOM知识点总结


    JavaScript

    1. 获取页面中的HTML元素

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

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

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

    5. 为元素绑定事件

    6. 创建HTML元素

    7. 删除已有的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=新样式

    五.绑定事件

    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);

  • 相关阅读:
    2013年元旦新年好
    2012第52周三阴雨
    2013第1周四雪
    2013年元旦新年好
    2013第1周三阴冷
    2012第52周日晴冷
    2012周六补记
    PHP怎么调用其他类的方法
    面向对象复习笔记(一)
    Laravel 引入自定义类库或第三方类库
  • 原文地址:https://www.cnblogs.com/hhy-love-python/p/8569793.html
Copyright © 2020-2023  润新知