JSdom增删改、样式十二

米白蓝

于 2022-03-31 14:13:29 发布

阅读量103

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_50563868/article/details/123870805

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>dom增删改</title>
  <style>
    #box1 {
      width: 100px;
      height: 100px;
      background-color: yellow;
      padding: 20px;
      border: 10px solid #a30;
    }
    #outer {
      position: relative;
      background-color: #c1a;
      padding: 100px;
    }
    #box2 {
      width: 200px;
      height: 200px;
      background-color: rgb(196, 4, 170);
      overflow: auto;
    }
    #box3 {
      width: 400px;
      height: 400px;
      background-color: rgb(9, 107, 38);
    }
  </style>
  <script>
    window.onload = function() {
      var li = document.createElement("li");
      var zgText = document.createTextNode("广州");
      console.log(zgText);
      console.log(li);
      li.appendChild(zgText);
      var ul = document.querySelector("ul")
      console.log(ul);
      ul.appendChild(li)
      var li2 = document.querySelector(".li2");
      ul.insertBefore(li, li2);
      var li1 = document.querySelector(".li1")
      ul.replaceChild(li, li1)
      // var result = confirm('你要干嘛呀')
      // console.log(result);
      // js读取属性
      var box1 = document.getElementById("box1");
      var btn1 = document.getElementById("btn1")
      btn1.onclick = function() {
        box1.style.backgroundColor = "red"
        console.log(getComputedStyle(box1,null).width);
        console.log(box1.clientHeight);
        console.log(box1.clientWidth);
        console.log(box1.offsetWidth);
        console.log(box1.offsetHeight);
        console.log(box1.offsetParent);
        console.log(box1.offsetLeft);
        console.log(box1.offsetLeft);
      }
      var box2 = document.getElementById("box2")
      var box3 = document.getElementById("box3")
      var btn2 = document.getElementById("btn2")
      btn2.onclick = function() {
        console.log(box2.scrollHeight);
        console.log(box2.scrollWidth);
        console.log(box2.scrollLeft);
        console.log(box2.scrollTop);
        console.log(box2.clientHeight);
      }
    }
  </script>
</head>
<body>
  
  <ul>
    <li>-1</li>
    <li>0</li>
    <li class="li1">1</li>
    <li class="li2">2</li>
    <li>3</li>
  </ul>
  <div id="outer">
    <div id="box1"></div>
  </div>
  <button id="btn1">改变样式</button>

  <button id="btn2">测试</button>
  <div id="box2">
    <div id="box3"></div>
  </div>
</body>
</html>

DOM增删改
- createElement()：创建一个元素怒节点对象，传递一个标签字符串作为参数，创建好的对象作为返回值；
- createTextNode()：创建一个文本节点，用一个文本内容作为参数，返回新节点；
- appendChild()：向父节点中添加一个新的子节点；语法：父元素.appendChild(子节点)；
- insertBefore()：向指定的子节点前面插入新节点；语法：insertBefore(插入节点，指定节点)；
- replaceChild(新节点，旧节点)：替换已有节点；
- removeChild()：删除子节点；
- confirm()：window的一个方法，用来确认按钮和取消按钮都有；，确认就会返回true，取消会返回false；
dom样式：
- 元素.currentStyle.样式名：获取当前元素显示的样式；只有ie支持该样式；只读，不可以修改；
- getComputedStyle()：window的方法可以直接使用，ie9以下不支持，如果没有设置值，就会获取真实的值；参数：1.获取样式的元素；2.传递伪元素，一般传null；返回一个对象，封装了当前元素对应的样式；getComputedStyle().属性名，可以获取单独的样式；只读，不可以修改；
- clientWidth、clientHeight：获取元素的可见宽度和高度，包括content和padding的大小，不带px，可直接计算；只读，不能修改；
- offsetWidth、offsetHeight：获取元素的可见宽度和高度，包括content和padding和border的大小，可直接计算；只读，不能修改；
- offsetParent：获取当前元素的定位父元素；如果都没有定位，则返回body；
- offsetLeft、offsetTop：当前元素相对于其定位父元素的水平/垂直偏移量；如果都没有定位，则是body；
- scrollWidth、scrollHeight：获取元素整个滚动区域的高度和宽度；
- scrollLeft、scrollTop：获取元素水平/垂直滚动条滚动的距离；
- 当scrollHeight - scrollTop = clientHeight：表示垂直滚动条滚动到底了；
- 当scrollWidth - scrollLeft = clientWidth：表示水平滚动条滚动到底了；
- onscroll：滚动条滚动后触发该事件；

米白蓝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSdom增删改、样式十二

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>dom增删改</
复制链接

扫一扫