获取元素的方式

fuyue266

于 2023-07-31 16:55:36 发布

阅读量68

点赞数

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/liu2665438/article/details/132025801

版权

获取元素尺寸

offsetWidth和offsetHeight

offsetWidth: 获取元素的宽度，包括元素的内容宽度、内边距和边框宽度。
offsetHeight: 获取元素的高度，包括元素的内容高度、内边距和边框高度。

var element = document.getElementById('myElement');
var width = element.offsetWidth;
var height = element.offsetHeight;
console.log('Width: ' + width + 'px');
console.log('Height: ' + height + 'px');

clientWidth和clientHeight

clientWidth: 获取元素的可见区域的宽度，包括元素的内容宽度和内边距，但不包括滚动条和边框。
clientHeight: 获取元素的可见区域的高度，包括元素的内容高度和内边距，但不包括滚动条和边框。

var element = document.getElementById('myElement');
var width = element.clientWidth;
var height = element.clientHeight;
console.log('Client Width: ' + width + 'px');
console.log('Client Height: ' + height + 'px');

获取元素偏移量

offsetLeft和offsetTop

offsetLeft: 获取元素相对于其最近的具有定位的父元素的左边界的偏移量。
offsetTop: 获取元素相对于其最近的具有定位的父元素的上边界的偏移量。

var element = document.getElementById('myElement');
var leftOffset = element.offsetLeft;
var topOffset = element.offsetTop;
console.log('Offset Left: ' + leftOffset + 'px');
console.log('Offset Top: ' + topOffset + 'px');

clientLeft和clientTop

clientLeft: 获取元素的左边框的宽度。
clientTop: 获取元素的上边框的高度。

var element = document.getElementById('myElement');
var leftBorderWidth = element.clientLeft;
var topBorderHeight = element.clientTop;
console.log('Left Border Width: ' + leftBorderWidth + 'px');
console.log('Top Border Height: ' + topBorderHeight + 'px');

操作 DOM 节点

我们所说的操作无非就是 增删改查（CRUD）
创建一个节点（因为向页面中增加之前，我们需要先创建一个节点出来）
向页面中增加一个节点
删除页面中的某一个节点
修改页面中的某一个节点
获取页面中的某一个节点

创建一个节点

createElement：用于创建一个元素节点

// 创建一个 div 元素节点
var oDiv = document.createElement('div')

console.log(oDiv) // <div></div>

创建出来的就是一个可以使用的 div 元素

createTextNode：用于创建一个文本节点

// 创建一个文本节点
var oText = document.createTextNode('我是一个文本')

console.log(oText) // "我是一个文本"

向页面中加入一个节点

appendChild：是向一个元素节点的末尾追加一个节点

语法： 父节点.appendChild(要插入的子节点)

// 创建一个 div 元素节点
var oDiv = document.createElement('div')
var oText = document.createTextNode('我是一个文本')

// 向 div 中追加一个文本节点
oDiv.appendChild(oText)

console.log(oDiv) // <div>我是一个文本</div>

insertBefore：向某一个节点前插入一个节点

语法： 父节点.insertBefore(要插入的节点，插入在哪一个节点的前面)

<body>
  <div>
    <p>我是一个 p 标签</p>
  </div>
  
  <script>
    var oDiv = document.querySelector('div')
    var oP = oDiv.querySelector('p')
    
    // 创建一个元素节点
    var oSpan = document.createElement('span')
    
    // 将这个元素节点添加到 div 下的 p 的前面
    oDiv.insertBefore(oSpan, oP)
    
    console.log(oDiv)
    /*
        <div>
            <span></span>
            <p>我是一个 p 标签</p>
        </div>
    */
  </script>
</body>

删除页面中的某一个节点

removeChild：移除某一节点下的某一个节点

语法：父节点.removeChild(要移除的字节点)

<body>
  <div>
    <p>我是一个 p 标签</p>
  </div>
  
  <script>
  	var oDiv = document.querySelector('div')
    var oP = oDiv.querySelector('p')
    
    // 移除 div 下面的 p 标签
    oDiv.removeChild(oP)
    
    console.log(oDiv) // <div></div>
  </script>
</body>

修改页面中的某一个节点

replaceChild：将页面中的某一个节点替换掉

语法： 父节点.replaceChild(新节点，旧节点)

<body>
  <div>
    <p>我是一个 p 标签</p>
  </div>
  
  <script>
  	var oDiv = document.querySelector('div')
    var oP = oDiv.querySelector('p')
    
    // 创建一个 span 节点
    var oSpan = document.createElement('span')
    // 向 span 元素中加点文字
    oSpan.innerHTML = '我是新创建的 span 标签'
    
   	// 用创建的 span 标签替换原先 div 下的 p 标签
    oDiv.replaceChild(oSpan, oP)
    
    console.log(oDiv)
    /*
    	<div>
    		<span>我是新创建的 span 标签</span>
    	</div>
    */
  </script>
</body>