js基本DOM操作

最新推荐文章于 2022-07-23 00:08:16 发布

假程序员.

最新推荐文章于 2022-07-23 00:08:16 发布

阅读量240

点赞数 2

文章标签： html js javascript bom

本文链接：https://blog.csdn.net/weixin_46310351/article/details/115677419

版权

本文详细讲解了如何通过id、标签名、类名和name属性获取DOM元素，以及利用CSS选择器和节点操作技巧，包括创建、插入、替换和删除节点，以及元素坐标、大小和定位的计算。深入探讨了offset属性与client属性的区别，适合前端开发者深入理解DOM操作。

摘要由CSDN通过智能技术生成

获取元素

通过document获取节点

document.getElementById("标签id名"); // 通过标签的id名获取标签
document.getElementsByTagName("标签名"); // 通过标签名获取标签
document.getElementsByClassName("标签类名"); // 通类名获取标签
document.getElementsByName("标签的name属性的值"); // 通过标签的name属性获取标签
// 上述4种获取标签的方法，除了通过id可以准确获取到元素，别的方法都是只能获取到元素的集合（类数组）

使用css选择器获取元素：

documen.querySelector("css选择器"); // 获取到匹配css的第一个元素
documen.querySelectorAll("css选择器"); // 获取到匹配css的所有元素（类数组）

通过id名直接获取到元素：

<div id="myid" class="box" name="mydiv">盒子1</div>
<script>
	console.log(myid);
	//输出 <div id="myid" class="box" name="mydiv">盒子1</div>
</script>

html基本结构的操作：

document.body :body比较常用, 并且在页面中是唯一的, 因此可以使用document.body直接获取
document.documentElement : 可以获取html元素及其所有内容
document.head : 可以直接获取head元素
document.title : 可以直接获取title的文本

属性操作

自定义属性

元素.setAttribute(属性名,属性值) # 设置元素的属性
元素.getAttribute(属性名); # 获取元素属性
元素.removeAttribute(属性名); # 删除元素属性

元素自带属性

元素.属性名 = 值;
console.log(元素.属性名);

例：

btn.onclick=function(){
    img.src = '2.jpg'; //可以通过src属性设置图片的路径
}

内容操作

语法：
	元素.innerHTML # 代表元素中的所有内容（包含标签）
	元素.innerText # 代表元素中的文本内容
	表单元素.value
	# 单标签操作内容其实就是在操作元素的属性

例：

<body>
<div id="box" introduce="区域"><p>我是盒子</p></div>
<input type="text" id="txt" value="请输入内容" />
</body>
<script type="text/javascript">
	document.getElementById("box").innerText = "今天你要嫁给我";
	var text = document.getElementById("box").innerText;
	document.write(text);
	document.getElementById("box").innerHTML = "<a href='http://www.baidu.com'>百度</a>";
	var content = document.getElementById("box").innerHTML;
	console.log(content);
	var txt = document.getElementById("txt").value;
	console.log(txt);
</script>

样式操作

元素.style.css属性名 = css属性值; # 给标签设置样式

例：

<body>
<style type="text/css">
	#box{
		width:100px;
		height:100px;
		background:#f00;
	}
</style>
	<input type="button" id="btn" value="走你">
	<div id="box"></div>
</body>
<script type="text/javascript">
	var n = 0;
	document.getElementById("btn").onclick=function(){
		n += 100;
		document.getElementById("box").style.marginLeft = n + "px";
	}
</script>

元素类名操作

使用元素的className属性可以操作元素的类名

<body>
  <div class="box"></div>

  <script>
    var div = document.querySelector('div')
   	div.className = 'test'
    console.log(div) // <div class="test"></div>
  </script>
</body>

获取节点

获取所有子元素节点children

<body>
    <div id="box">
        <p class="part">
            <span>span标签</span>
        </p>
    </div>
</body>
<script type="text/javascript">
var Odiv = document.getElementById("box");
</script>

获取第一个子元素节点firstElementChild

<body>
    <div id="box">
        <p class="part">
            <span>span标签</span>
        </p>
        <a href="#">链接</a>
    </div>
</body>
<script type="text/javascript">
var Odiv = document.getElementById("box");
console.log(Odiv.firstElementChild);

获取最后一个子元素节点lastElementChild

<body>
      <div id="box">
          <p class="part">
              <span>span标签</span>
          </p>
          <a href="#">链接</a>
      </div>
  </body>
  <script type="text/javascript">
  var Odiv = document.getElementById("box");
  console.log(Odiv.lastElementChild);

获取当前节点的下一个兄弟元素节点nextElementSibling

 <body>
     <div id="box">
         <p class="part">段落标签</p>
         <a href="#">链接</a>
         <span>span标签</span>
     </div>
 </body>
 <script type="text/javascript">
 var oA = document.querySelector("a");
 console.log(oA.nextElementSibling);
 </script>
 ```

获取当前节点的下一个兄弟元素节点previousElementSibling，同上。

获取父节点parentNode

<body>
    <div id="box">
        <p class="part">段落标签</p>
        <a href="#">链接</a>
        <span>span标签</span>
    </div>
</body>
<script type="text/javascript">
    var oA = document.querySelector("a");
    console.log(oA.parentNode);
</script>

说明：只获取元素节点，不包含文本节点

节点属性

nodeType: 节点类型：元素节点 = 1 属性-2(过时) 注释-8 文本-3 参考链接

<body>
    <div id="box" name="hezi">
        <p class="part" >段落标签</p>
        <a href="#" title="跳转百度">链接</a>
        <span>span标签</span>
        <!-- div结束 -->
    </div>
</body>
<script type="text/javascript">
var Odiv = document.getElementById("box"); // div元素节点
var text = Odiv.firstChild; // 文本节点（中间的换行和空格）
var note = Odiv.lastChild.previousSibling; // 换行和空格前面是注释
var attr = Odiv.attributes[0]; // div的第一个属性，是属性节点
console.log(Odiv.nodeType); // 1
console.log(text.nodeType); // 3
console.log(note.nodeType); // 8
console.log(attr.nodeType); // 2
</script>

说明：nodeType属性的值不一样，代表节点的类型不同。

nodeName: 节点名称

<body>
    <div id="box" name="hezi">
        <p class="part" >段落标签</p>
        <a href="#" title="跳转百度">链接</a>
        <span>span标签</span>
        <!-- div结束 -->
    </div>
</body>
<script type="text/javascript">
var Odiv = document.getElementById("box"); // div元素节点
var text = Odiv.firstChild; // 文本节点（中间的换行和空格）
var note = Odiv.lastChild.previousSibling; // 换行和空格前面是注释
var attr = Odiv.attributes[0]; // div的第一个属性，是属性节点
console.log(Odiv.nodeName); // DIV
console.log(text.nodeName); // #text
console.log(note.nodeName); // #comment
console.log(attr.nodeName); // id
</script>

说明：元素节点的节点名称是大写的标签名；文本节点的节点名称是#text；注释节点的节点名称是#comment；属性节点的节点名称是属性名。

nodeValue: 节点值

<body>
    <div id="box" name="hezi">
        <p class="part" >段落标签</p>
        <a href="#" title="跳转百度">链接</a>
        <span>span标签</span>
        <!-- div结束 -->
    </div>
</body>
<script type="text/javascript">
var Odiv = document.getElementById("box"); // div元素节点
var text = Odiv.firstChild; // 文本节点（中间的换行和空格）
var note = Odiv.lastChild.previousSibling; // 换行和空格前面是注释
var attr = Odiv.attributes[0]; // div的第一个属性，是属性节点
console.log(Odiv.nodeValue); // null
console.log(text.nodeValue); // "换行和空格"
console.log(note.nodeValue); // "div结束" -- 注释内容
console.log(attr.nodeValue); // "box" -- 属性值
</script>

说明：元素节点没有节点值；文本节点的值就是文本内容；注释节点的内容就是注释的内容；属性节点的内容就是属性的值。

节点操作

创建节点

属性名	语法	功能
createElement	document.createElement(元素标签)	创建元素节点（创建标签）
createAttribute	document.createAttribute(元素属性)	创建属性节点（创建属性，只有属性名，没有属性值）
createTextNode	document.createTextNode(文本内容)	创建文本节点（创建了一个内容）

例：

var div = document.createElement("div"); // 创建元素节点
var attr = document.createAttribute("name"); // 创建属性节点
attr.value = 'mybox'; // 给属性节点赋值
div.setAttributeNode(attr); // 将属性节点放入元素节点中
var text = document.createTextNode("内容"); // 创建文本节点
div.appendChild(text); // 将文本节点放入元素中
console.log(div); // 输出元素节点

插入节点

属性名	语法	功能
appendChild	父节点.appendChild(所添加的新节点)	向节点的子节点列表末尾添加新的子节点
insertBefore	父节点.insertBefore(所要添加的新节点，已知子节点)	在已知的子节点前插入一个新的子节点

例：

<body>
<div id="myid">
	大盒子
	<div>小何字</div>
</div>
<script type="text/javascript">
var p = document.createElement("p");
var a = document.getElementsByTagName("div")[1];
myid.insertBefore(p,a);
// document.getElementById("myid").appendChild(p);
</script>
</body>

替换节点

将某个子节点替换为另一个

语法：
	父节点.replaceChild(要插入的新节点，将被替换的老元素);

例：

<body>
<div id="myid">
	大盒子
	<div>小何字</div>
</div>
<script type="text/javascript">
var p = document.createElement("p");
var a = document.getElementsByTagName("div")[1];
myid.replaceChild(p,a);
</script>
</body>

复制节点

根据原来的节点复制一个节点出来

语法：
	需要被复制的节点.cloneNode(param);

使用说明：param的值是布尔值，为true时表示复制当前节点及其所有子节点（深复制），为false时，表示仅复制当前节点，缺省值为false（浅复制）

<body>
<div id="myid">
	大盒子
</div>
<script type="text/javascript">
var n = myid.cloneNode(true);
console.log(n);
</script>
</body>

删除节点

删除指定元素的某个子节点

语法：
	父元素.removeChild(要删除的节点);

例：

<body>
<div id="myid">
	大盒子
	<p id="part">段落</p>
</div>
<script type="text/javascript">
myid.removeChild(part);
</script>
</body>

节点操作总结

创建元素节点
追加子节点
添加到指定子节点前面
复制节点 – 浅复制和深复制
删除节点

获取元素的坐标和大小

在DOM中有一些offset开头的属性，在实际开发中用的比较多。他们可以获取元素的大小、元素的位置等。

获取元素的宽度和高度

语法：

元素.offsetWidth; # 获取元素的宽度
元素.offsetHeight; # 获取元素的高度

例：

<style>
    .box{
        width:100px;
        height:50px;
        background:red;
    }
</style>
<div class="box">
    
</div>
<script>
var box = document.querySeletor(".box");
console.log(box.offsetWidth,box.offsetHeight); // 120 70
</script>

使用说明：

这两个属性获取到的元素大小是包含边框的。
这两个属性获取到的结果是数字，方便计算。
这个属性只能获取不能设置，是只读属性。

这两个属性其实和通过样式获取到的值是一样的，样式中的宽高是包含单位的，不方便计算，所以在需要使用宽高来计算的时候使用这两个属性更加方便。

获取定位原点参考的父元素

我们知道，当给一个元素设置定位的时候，参考的原点位置需要一个设置定位的父元素，如果父元素没有设置过定位，那就找父元素的父元素，一直往上，直到找到HTML，那就以html作为定位的参考元素。

offset开头的属性中有一个属性就是找这个参考元素的。

语法：

元素.offsetParent; # 获取定位需要参考的元素

例：

<style>
    .box{
        width:300px;
        height:200px;
        background:red;
		position:relative;
    }
	.smallBox{
		width:100px;
		height:100px;
		background:blue;
		position:absolute;
		left:100px;
		top:50px;
	}
</style>
<div class="box">
    <div class="smallBox"></div>
</div>
<script>
var smallBox = document.querySelector(".smallBox");
console.log(smallBox.offsetParent);
</script>

当父元素没有设置定位的时候，定位参考的元素应该是html，但在这里输出的是body。

例：

<style>
    .box{
        width:300px;
        height:200px;
        background:red;
    }
	.smallBox{
		width:100px;
		height:100px;
		background:blue;
		position:absolute;
		left:100px;
		top:50px;
	}
</style>
<div class="box">
    <div class="smallBox"></div>
</div>
<script>
var smallBox = document.querySelector(".smallBox");
console.log(smallBox.offsetParent);
</script>

获取元素的位置

offset开头的属性中还有有可以获取元素的位置的。

语法：

元素.offsetLeft; # 获取元素左边的距离
元素.offsetTop; # 获取元素上边的距离

例：

<style>
    .box{
        width:300px;
        height:200px;
		margin:atuo;
        background:red;
		position:relative;
    }
	.smallBox{
		width:100px;
		height:100px;
		background:blue;
		position:absolute;
		left:100px;
		top:50px;
        transform:translateX(10px);
		margin-left:20px;
	}
</style>
<div class="box">
    <div class="smallBox"></div>
</div>
<script>
var smallBox = document.querySelector(".smallBox");
console.log(smallBox.offsetLeft,smallBox.offsetTop);
</script>

使用说明：

获取到的值包括外间距，包括设置过的定位的值。
这个定位过的值其实是自身到offsetParent的距离。

如果父元素没有设置过定位，那得到的值是自身到body的距离。如果自己也没有设置过定位，那就是自己到html的距离。

例：

<style>
    .box{
        width:300px;
        height:200px;
        background:red;
    }
	.smallBox{
		width:100px;
		height:100px;
		background:blue;
	}
</style>
<div class="box">
    <div class="smallBox"></div>
</div>
<script>
var smallBox = document.querySelector(".smallBox");
console.log(smallBox.offsetLeft,smallBox.offsetTop);
</script>

也就是说，获取位置的时候，首先是要找到设置过定位的父元素，如果找到了，就是从父元素开始计算。如果没找到，就从body开始计算。

client获取元素大小

使用元素的clientWidth和属性clientHeight属性也能获取到元素的大小

语法：

元素.clientWidth; # 获取元素的宽度
元素.clientHeight; # 获取元素的高度

例：

<style>
    .box{
        width:100px;
        height:50px;
        background:red;
    }
</style>
<div class="box">
    
</div>
<script>
var box = document.querySeletor(".box");
console.log(box.clientWidth,box.clientHeight); // 100 50
</script>

使用说明：使用这两个属性获取到的元素的大小是不包含边框的大小。

和offset获取宽高的比较：

<style>
    .box{
        width:100px;
        height:50px;
        background:red;
        border:10px solid #000;
    }
</style>
<div class="box">
    
</div>
<script>
var box = document.querySelector(".box");
// 不包含边框的宽和高
console.log(box.clientWidth,box.clientHeight); // 100 50
// 包含边框的宽和高
console.log(box.offsetWidth,box.offsetHeight); // 120 70
</script>

DOM获取窗口大小

BOM有获取浏览器窗口大小的方法：

这两个获取窗口大小的时候，包含了滚动条的范围。

window.innerWidth
window.innerHeight

DOM也有获取窗口大小的方法

DOM获取的大小中不包含滚动条的范围。

document.documentElement.ClientWidth
document.documentElement.clientHeight

DOM获取body的尺寸

document.body.clientWidth
document.body.ClientHeight

假程序员.

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫