JS DOM操作（三）

最新推荐文章于 2024-07-09 10:38:13 发布

小杨不想写代码

最新推荐文章于 2024-07-09 10:38:13 发布

阅读量508

点赞数 13

分类专栏： Jscript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_74270395/article/details/136737103

版权

Jscript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.操作节点

获取节点属性：

语法

getAttribute(“属性名”)；

var value = element.getAttribute("data-custom");
//请注意，获取节点属性时，如果属性不存在，则会返回 null

2.设置节点属性：
语法

setAttribut(“属性名”,“属性值”)；

element.setAttribute("data-custom", "value");
//设置节点属性时，如果属性已存在，则会更新属性值；如果属性不存在，则会创建一个新属性。

2.创建和插入节点

element.appendChild(childNode)：在父节点末尾添加节点

代码示例

var parentNode = document.getElementById("parentNode");
parentNode.appendChild(clonedNode);

element.insertBefore(A.B)：在指定节点之前插入节点;

代码示例

var referenceNode = document.getElementById("referenceNode");
var parentNode = referenceNode.parentNode;
parentNode.insertBefore(clonedNode, referenceNode);

element.cloneNode（deep）：克隆某个指定的节点

代码示例

var originalNode = document.getElementById("originalNode");
var clonedNode = originalNode.cloneNode(true); // 参数为 true 表示深度克隆，复制节点及其所有子节点

3.删除和替换节点

node.removeChild(childNode):删除指定的节点，childNode是要删除的节点，节点被删除它的子节点也会被删除

代码示例

  var parent = document.getElementById("parent");
  parent.removeChild(child);

node.replaceChild(newnode,oldnode):把每一个节点替换为新的节点；

代码示例

  var parent = document.getElementById("parent");
  var newNode = document.createElement("div");
  parent.replaceChild(newNode, oldNode);

4.获取元素位置

offset属性

offsetTop: 获取当前元素相对于其 offsetParent 元素的顶部内边距的距离。
offsetLeft: 获取当前元素相对于其 offsetParent 元素的左侧内边距的距离。
offsetWidth: 获取当前元素的宽度，包括元素的宽度、内边距和边框，但不包括外边距。
offsetHeight: 获取当前元素的高度，包括元素的高度、内边距和边框，但不包括外边距。

代码示例

<style>
    #example {
        width: 200px;
        height: 100px;
        padding: 20px;
        border: 2px solid black;
        position: relative;
        top: 50px;
        left: 50px;
    }
</style>
</head>
<body>

<div id="example">This is an example element.</div>

<script>
var element = document.getElementById("example");

// 获取元素相对于其 offsetParent 元素的顶部内边距的距离
console.log("Offset Top: " + element.offsetTop);

// 获取元素相对于其 offsetParent 元素的左侧内边距的距离
console.log("Offset Left: " + element.offsetLeft);

// 获取当前元素的宽度，包括元素的宽度、内边距和边框，但不包括外边距
console.log("Offset Width: " + element.offsetWidth);

// 获取当前元素的高度，包括元素的高度、内边距和边框，但不包括外边距
console.log("Offset Height: " + element.offsetHeight);
</script>

client属性

clientWidth: 获取元素的内部宽度，包括内边距但不包括滚动条和边框。
clientHeight: 获取元素的内部高度，包括内边距但不包括滚动条和边框。
clientTop: 获取元素上边框边界与元素所属文档（document）的顶部之间的距离。
clientLeft: 获取元素左边框边界与元素所属文档（document）的左侧之间的距离

代码示例

<style>
    #example {
      width: 200px;
      height: 100px;
      padding: 20px;
      border: 2px solid black;
      overflow: scroll;
    }
  </style>
</head>
<body>

<div id="example">This is an example element with scrollbars.</div>

<script>
  var element = document.getElementById("example");

  // 获取元素的内部宽度，包括内边距但不包括滚动条和边框
  console.log("Client Width: " + element.clientWidth);

  // 获取元素的内部高度，包括内边距但不包括滚动条和边框
  console.log("Client Height: " + element.clientHeight);

  // 获取元素上边框边界与文档顶部之间的距离
  console.log("Client Top: " + element.clientTop);

  // 获取元素左边框边界与文档左侧之间的距离
  console.log("Client Left: " + element.clientLeft);
</script>

scroll属性

scrollWidth: 获取元素内容的总宽度，即包括不可见部分的完整内容宽度。
scrollHeight: 获取元素内容的总高度，即包括不可见部分的完整内容高度。
scrollLeft: 获取或设置元素的水平滚动条相对于左侧的偏移量。
scrollTop: 获取或设置元素的垂直滚动条相对于顶部的偏移量。

代码示例

 <style>
    #scrollable {
      width: 200px;
      height: 100px;
      border: 2px solid black;
      overflow: scroll;
    }
    #content {
      width: 300px;
      height: 300px;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>

<div id="scrollable">
  <div id="content">This is a scrollable content.</div>
</div>

<script>
  var scrollable = document.getElementById("scrollable");

  // 获取内容的总宽度，即包括不可见部分的完整内容宽度
  console.log("Scroll Width: " + scrollable.scrollWidth);

  // 获取内容的总高度，即包括不可见部分的完整内容高度
  console.log("Scroll Height: " + scrollable.scrollHeight);

  // 获取水平滚动条相对于左侧的偏移量
  console.log("Scroll Left: " + scrollable.scrollLeft);

  // 获取垂直滚动条相对于顶部的偏移量
  console.log("Scroll Top: " + scrollable.scrollTop);
</script>