JS中的DOM操作属性、DOM创建、DOM增加、DOM修改、DOM删除以及DOM获取非行间样式

已于 2022-06-01 21:35:31 修改
阅读量5.2k 收藏 36
点赞数 7
分类专栏： JavaScript 文章标签： javascript 开发语言 面试 vscode java
于 2022-04-26 21:54:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64346035/article/details/124437474
版权

 当网页被加载时，浏览器会创建页面的文档对象模型DOM（Document Object Model），在DOM中，每个东西都是节点。

DOM四大操作：查找、更新、添加、删除
通过DOM，JavaScript 可创建动态的 HTML：
        能够改变页面中的所有 HTML 元素
        能够改变页面中的所有 HTML 属性
        能够改变页面中的所有 CSS 样式
        能够对页面中的所有事件做出反应
前提：首先找到相关元素，前面一篇博客，详细的阐述了DOM查询，详情请看：

https://blog.csdn.net/m0_64346035/article/details/124404065

目录

一、DOM操作属性

1、innerHTML

2、innerText

3、getAttribute        

4、setAttribute       

5、removeAttribute   

6、style

7、className

二、DOM创建

 1、createElement       

2、createTextNode        

三、DOM增加

1、appendChild        

2、insertBefore       

四、DOM删除

removeChild       

五、DOM修改

replaceChild        

六、获取元素的非行间样式

1、getComputedStyle（非IE使用）

2、currentStyle（IE使用）

一、DOM操作属性

通过我们各种获取元素的方式获取到页面中的标签以后，我们可以直接操作 DOM 元素的属性，就能直接把效果展示在页面上

1、innerHTML

功能

a、获取元素内部的HTML结构

b、设置元素内容

<body>
  <div>
    <p>
      <span>hello</span>
    </p>
  </div>

  <script>
    var div = document.querySelector('div');
    console.log(div.innerHTML);
	div.innerHTML = '<p>hello</p>';
   	//设置完后，页面中的div元素里面就会嵌套一个 p 元素
  </script>
</body>

2、innerText

功能：

a、获取元素内部的文本（只能获取到文本内容，获取不到html标签）

b、可以设置元素内部的文本

<body>
  <div>
    <p>
      <span>hello</span>
    </p>
  </div>

  <script>
    var div = document.querySelector('div');
    console.log(div.innerText);	//hello
    div.innerText = '<p>hello</p>';
//设置完毕以后，会把`<p>hello</p>`当做一个文本出现在div元素里面，而不会把 p 解析成标签
  </script>
</body>

3、getAttribute        

                获取元素的某个属性（包括自定义属性）

4、setAttribute       

                 给元素设置一个属性（包括自定义属性）

5、removeAttribute   

               直接移除元素的某个属性

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

  <script>
    var div = document.querySelector('div');
    console.log(div.getAttribute('a'));	//100
    console.log(div.getAttribute('class'));	//box

    div.setAttribute('a',100);
	div.setAttribute('class','box');
	console.log(div);	// <div a="100" class="box"></div>

    div.removeAttribute('class');
    console.log(div); // <div a="100"></div>


  </script>
</body>

6、style

  • 专门用来给元素添加 css 样式的
  • 添加的都是行内样式
<body>
  <div></div>

  <script>
    var div = document.querySelector('div');
    div.style.width = '100px';
    div.style.height = '100px';
    div.style.backgroundColor = 'pink';
    console.log(div); 
    // <div style="width: 100px; height: 100px; background-color: pink;"></div>
  </script>
</body>

7、className

  • 专门用来操作元素的类名的
<body>
  <div class="box"></div>

  <script>
    var div = document.querySelector('div');
   	console.log(div.className); // box
     div.className = 'test';
    console.log(div); // <div class="test"></div>
    // 在设置的时候，不管之前有没有类名，都会全部被设置的值覆盖

  </script>
</body>

二、DOM创建

 1、createElement       

                 用于创建一个元素节点

// 创建一个 div 元素节点
var oDiv = document.createElement('div');
console.log(oDiv);	// <div></div>

2、createTextNode        

                用于创建一个文本节点

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

三、DOM增加

1、appendChild        

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

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

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

// 向 div 中追加一个文本节点
oDiv.appendChild(oText);
console.log(oDiv);	// <div>我是一个文本</div>

2、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>

四、DOM删除

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>

五、DOM修改

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>

六、获取元素的非行间样式

我们在操作 DOM 的时候，很重要的一点就是要操作元素的 css 样式，那么在操作 css 样式的时候，我们避免不了就要获取元素的样式，之前我们说过可以用元素.style.xxx来获取，但是这个方法只能获取到元素 行间样式，也就是写在行内的样式

1、getComputedStyle（非IE使用）

  • 语法：widow.getComputedStyle(元素,null).要获取的属性
<style>
  div {
    width: 100px;
  }
</style>
<body>
  <div style="height: 100px;">
    <p>我是一个 p 标签</p>
  </div>

  <script>
    var oDiv = document.querySelector('div')
		console.log(window.getComputedStyle(oDiv).width) // 100px
    console.log(window.getComputedStyle(oDiv).height) // 100px
  </script>
</body>

- 这个方法获取行间样式和非行间样式都可以

2、currentStyle（IE使用）

  • 语法：元素.currentStyle.要获取的属性
<style>
  div {
    width: 100px;
  }
</style>
<body>
  <div style="height: 100px;">
    <p>我是一个 p 标签</p>
  </div>

  <script>
    var oDiv = document.querySelector('div')
		console.log(oDiv.currentStyle.width) // 100px
    console.log(oDiv.currentStyle.height) // 100px
  </script>
</body>

燕穗子博客
关注
  • 7
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
js的增删改查
dxn16638400024的博客
10-15 401
以上是JavaScript中数组的常见增删改查操作的示例。实现效果是根据具体需求对数组进行相应的修改、获取或查找，可以通过调用相应的数组方法来实现。3.修改元素（Update）：通过索引对数组中的元素进行修改。使用赋值语句直接修改指定索引位置的元素。或索引赋值等方法向数组末尾或指定位置添加一个或多个新元素。2.删除元素（Delete）：使用。4.查找元素（Search）：使用。1.增加元素（Add）：使用。等方法删除数组中的一个或多个元素。等方法查找数组中的特定元素。
js DOM操作自定义属性
RayShyy的博客
03-19 4225
自定义属性：在日常开发中，html的内置属性已经无法满足程序员的日常开发，所以需要我们自己定义属性，H5给我们新增了自定义属性，为了防止自定义属性和内置属性引起歧义，所以H5规定自定义属性以data-开头定义。 1. 获取元素的属性值 element.属性名 element.getAttribute(“属性名”) element.属性名 和 element.getAttribute(“属性名”) 的区别： element.属性名：获取的是内置属性(元素本身自带的属性)，不能获取自定义属性； elem.
javascript DOM 属性详解：读取、修改、移除
最新发布
大剑师兰特的GIS世界
06-01 1876
在JavaScript中，DOM（Document Object Model，文档对象模型）属性操作允许你读取、修改或删除HTML元素的属性，从而动态地改变页面内容或样式。以下是关于DOM属性操作的详细说明、示例代码以及注意事项。
JS-DOM属性的设置、获取、删除和检测
gogaogao的博客
03-20 941
属性的设置、获取、删除和检测
前端基础(十)_Dom自定义属性(带案例)
见贤思齐焉，见不贤内自省
01-10 1218
Dom自定义属性(带案例)
动态添加DOM元素的方式
前端御书房
09-12 4870
动态添加DOM元素的方式，持续更新中……
JavaScript 插入Dom节点
weixin_47556601的博客
02-15 4320
大家好，今天我们来分享JavaScript 插入Dom节点 首先我们要知道， 不管我们对Dom节点进行什么样的操作，都必须先获取这个节点，假如说，这个dom节点是空的，我们可以通过innerHTML就可以增加一个元素，假如这个dom节点不存在，那这样做就不行了，否则会造成覆盖（就是会将原先的数据改掉） 写源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
js和jquery中获取非行间样式
10-19
在JavaScript（JS）和jQuery中，获取非行间样式的方法有所不同。 在JavaScript中，获取非行间样式主要有以下两种方法： 1. `currentStyle`属性：在IE浏览器中，可以通过元素对象的`currentStyle`属性来获取元素的...
JS非行间样式获取函数的实例代码
10-18
主要介绍了JS非行间样式获取函数的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
JavaScript兼容性总结之获取非行间样式案例
10-21
主要介绍了JavaScript兼容性总结之获取非行间样式的相关资料,需要的朋友可以参考下
javascript获取非行间样式的方法
12-09
JavaScript 获取非行间样式的方法是我们在编程中常常遇到的需求，特别是在动态操作页面样式时。非行间样式，也称为内部样式或外部样式，通常存储在CSS文件中或者定义在`<style>`标签内，而非直接写在HTML元素的`...
JavaScript-DOM-属性节点
十二的博客
04-27 1997
JavaScript-DOM-属性节点
dom-自定义属性操作和节点操作
weixin_46082115的博客
02-15 484
script>// 1. 获取元素的属性值// (1) element.属性//(2) element.getAttribute('属性') get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。
带你彻底学会JS DOM技术之创建，插入元素
大河之犬的博客
10-06 4824
所谓的“动态DOM”，指的是使用JavaScript创建的元素。来创建一个文本节点，然后可以将元素节点与文本节点“组装”成我们平常看到的“有文本内容的元素”。方法把已经创建好的“有内容的strong元素”插入到div元素中，这时才会显示出内容。动态创建了一个strong元素，但是此时strong元素是没有内容的。//将strong元素插入div元素（这个div在HTML已经存在）方法将一个新元素插入到父元素中的某一个子元素“之前”A表示父元素，B表示新子元素。把一个新元素插入到父元素的内部子元素的“末尾”
DOM获取和设置属性的方法
LQlove1的博客
06-02 603
主要是DOM获取和设置属性的方法，getAttribute和setAttribute。
javaScript中动态创建一个标签
GuessHat的博客
07-18 3892
javaScript中动态创建一个标签 创建一个span标签 var span = document.createElement("span") 写入内容 span.innerText = "123" 添加到父标签中 box.appendChild(span) 完整代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </hea
JavaScript之DOM更改元素
weixin_44827643的博客
06-21 2336
本文主要介绍在利用DOM获取页面的元素之后，如何更改元素的内容、属性以及样式。
javascript的操作DOM的属性
qq_53587164的博客
04-14 987
DOM JavaScript分三个部分 ECMAScript标准:JS的基本语法 DOM:DocumentObjectModel--->文档对象模型-----操作页面的元素 BOM:BrowserobjectModel...--.浏览器对象模型--操作的是浏览器 DOM:文档对象模型 *文档:把--个htmL文件看成是--个文档，由于万物皆对象，所以把这个文档看成是一个对象 *XML文件也可以看成是一个文档 *HTML：展显示信息，数据 *XML：重点在于存储 ...
JS DOM删除元素
qq_46275230的博客
04-17 6089
JS DOM删除元素 A.removeChild(B) 在元素A中移除元素B <body> <div class="wrap"> <p class="one">张三 </p> </div> <span>王五</span> <script> var oWrap = document.querySelector('.wrap'); var oP = document.qu
python创建一个函数，将每次跑出的结果以列而非行的形式放置在dataframe中
05-29
要将结果以列而非行的形式添加到 Pandas DataFrame 中，可以使用以下函数： ```python import pandas as pd def add_result_to_dataframe(result, df): df[result.name] = result ``` 该函数接受两个参数：结果和 DataFrame。它使用结果的名称作为新列的名称，并将结果作为新列添加到 DataFrame 中。 以下是一个完整的示例，演示如何使用该函数： ```python # create empty dataframe df = pd.DataFrame() # define function to add result to dataframe def add_result_to_dataframe(result, df): df[result.name] = result # call function multiple times to add results result1 = pd.Series([42, 43, 44], name='result1') add_result_to_dataframe(result1, df) result2 = pd.Series(['hello', 'world', '!'], name='result2') add_result_to_dataframe(result2, df) result3 = pd.Series([3.14, 2.71, 1.41], name='result3') add_result_to_dataframe(result3, df) # print dataframe print(df) ``` 这将在 DataFrame 中创建三个名为 "result1"、"result2" 和 "result3" 的列，并将每个结果添加为新列。输出将如下所示： ``` result1 result2 result3 0 42 hello 3.14 1 43 world 2.71 2 44 ! 1.41 ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

燕穗子博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值