JavaScript DOM操作

原创已于 2022-03-28 18:00:38 修改 · 996 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#gulp #前端 #javascript

于 2022-03-28 17:59:13 首次发布

本文介绍了DOM操作的基础知识，包括如何使用JavaScript进行节点选择、创建、插入、删除等操作，并详细解释了各种节点类型的区别。此外，还涉及了日期对象的使用方法，包括如何获取当前时间、日期以及实现定时更新时间等功能。

DOM 操作

nodeType:能够分辨节点到底是什么节点，只读
- 元素节点 ——1
- 属性节点 —— 2
- 文本节点 —— 3
- 注释节点 —— 8
- document —— 9
- DocumentFragment —— 11
  
  获取行内属性节点：getAttributeNode()

节点类：

arentNode 父节点
childNodes 所有子节点的集合
firstChild 第一个子节点
lastChild 最后一个子节点
previousSibling 上一个兄弟节点

nextSibling 下一个兄弟节点

  function previouSibing(ele) {
      let h2 = document.getElementsByTagName("h2")[0];
      let per = h2.nextSibling;
      while (per && per.nodeType != 1) {
          per = per.nextSibling;
      }
      return per;
  }
  console.log(previouSibing());

元素类：
- children 所有子元素的集合
- firstElementChild 第一个子元素 IE9+
- lastElementChild 最后一个子元素 IE9+
- previousElementSibling 上一个兄弟元素 IE9+
- nextElementSibling 下一个兄弟元素 IE9+
…在函数形参中是剩余运算符，在其他地方时展开运算符
ele.appendChild(“需要插入的元素”)：把创建的元素元素添加到 ele 内部的最后一项

如果添加一个已经存在的选中标签,那么不会增加,只是移动到子元素末尾
```
   var ul = document.getElementsByTagName("ul")[0];
   var div = document.createElement("div");
   ul.appendChild(div);
   console.log(ul.innerHTML)
```

ele.insertBefore(div,a)：给 ele 内部的 a 前面插入一个 div 标签

<div id="id1">
  <p class="p1" id="p1">这是P1</p>
</div>
<script>
  var div = document.getElementById("id1");
  var p1 = document.getElementById("p1");
  var odiv = document.createElement("div");
  var returnDom = div.insertBefore(odiv, p1);
  console.log(div);
</script>

createElement(“div”);创建一个 div 标签
createTextNode(“创建一个文本节点”)：创建一个文本节点
cloneNode：把某一个节点进行克隆

cloneNode(true)：(深克隆)把节点包含的所有内容进行克隆

<div id="id1">
  <p class="p1" id="p1">这是P1</p>
</div>
<script>
  var res = id1.cloneNode();
  var res2 = id1.cloneNode(true);
  console.log(res);
  console.log(res2);
</script>

removeChild：移除元素

<div id="id1">
  1111
  <p class="p1" id="p1">这是P1</p>
</div>
<script>
  id1.removeChild(p1);
  console.log(id1);
</script>

ele.getAttibule(“xxx”)：获取行内属性
ele.removeAttibule(“xxx”)：删除行内属性

ele.setAttribute(“xxx”,“xxx”)：设置行内属性

    box.setAttribute("index", 1);
    box.getAttribute("index");
    box.removeAttribute("index");
    console.log(box)
    // 设置
    // box["aa"] = 22;
    // 获取
    // box["aa"]
    //移除
    // delete box["aa"];

获取日期 new Date();

time.getFullYear()：获取年
time.getMonth()：获取月
time.getDate()：获取日
time.getHours()：获取时
time.getMinutes()：获取分钟
time.getSeconds()：获取秒
time.getDay()：获取星期几

  let time = new Date();
  console.log(time);
  console.log(time.getFullYear());
  console.log(time.getMonth());
  console.log(time.getDate());
  console.log(time.getHours());
  console.log(time.getMinutes());
  console.log(time.getSeconds());
  console.log(time.getDay());
   //Sat Mar 26 2022 16:14:02 GMT+0800 (中国标准时间)
   //2022
   //2
   //26
   //16
   //29
   //55
   //6

Date()括号中能够传入时间戳

time.getTime()：是距离 1970 年 1 月 1 日的 00：00：00 的毫秒数

 console.log(time.getTime(2022/12/3));
 //1648283851978

后天给的时间戳算出日期：new Date("时间戳");就能转成公历日期

定时器：setInterval(()=>{},1000)

     //钟表函数
    function times() {
    var apan = document.getElementsByTagName("span")[0];
    let arry = ["日", "一", "二", "三", "四", "五", "六"];
    setInterval(function () {
        let time = new Date();
        let year = time.getFullYear();
        let month = time.getMonth();
        let date = time.getDate();
        let hours = time.getHours();
        let minutes = time.getMinutes();
        let seconds = time.getSeconds();
        let day = time.getDay();
        apan.innerText = `现在是第${year}年${month + 1}月${date}日星期${arry[day]}${hours}时${minutes}分${seconds}秒`;
        }, 1000);
    }
    times();

随机生成 4 位数字

  function num(max, min) {
      return Math.floor(Math.random() * (max - min) + min);
  }
  function getCode() {
      var str = "0123456789";
      var strin = "";
      for (var i = 0; i < 4; i++) {
          strin += str[num(4, 0)];
      }
      let div = document.getElementsByTagName("div")[0];
      return div.innerHTML = strin;
  }
  getCode();
  let timer = setInterval(() => {
      getCode();
  }, 1000);
  setTimeout(() => {
      clearInterval(timer);
  }, 1000 * 10);