js,jQuery操作节点，获取、设置属性，操作class属性

Bertha 。 2023-06-27 12:37 26阅读 0赞

### 1，创建元素节点： ###

js:   document.createElement("div")

jQuery:  $("<div></div>")

### 2,创建文本节点并添加到某个元素节点： ###

js:   var e1 =  document.createTextNode("text content"); // 创建文本节点

var e2 = document.createElement("p");  // 创建元素节点

e2.appendChild(e1);

jQuery:  var e3 = $("<p>text content</p>");

### 3,复制节点： ###

js:   var newElement = e3.cloneNode(true);

括号内些true或false，区别：true:克隆整个‘<p>text content</p>’ 节点；false:  克隆 ‘<p></p>’ ，不克隆里面的文字

jQuery:  var newElement2 = $("\#e3").clone(true); // 避免id重复

### 4，插入节点： ###

js:   节点末尾添加新的子节点：

El.appendChild(newNode); // El 是一个父元素

节点前面添加新的子节点：

El.insertBefore(newNode,targetNode); // targetNode 是父元素中的某个子元素；

jquery:  在匹配元素子节点列表末尾添加子节点：（内部）

$("\#el").append("<p>Hello world</p>");

把匹配的元素节点添加到目标元素节点内部结尾：（内部）

$("<p>hello world</p>").appendTo("\#el");

在匹配元素元素子节点列表开头添加内容：（内部）

$("\#el").prepend("<p>hello world</p>");

把匹配的元素添加到目标元素子节点列表开头：（内部）

$("<p>hello world</p>").prependTo("\#el");

*   在匹配元素之前添加目标内容  
       
     $('\#El').before('<p>Hello World.</p>');  
       
    把匹配元素添加到目标元素之前  
       
     $('<p>Hello World.</p>').insertBefore('\#El');  
       
    在匹配元素之后添加目标内容  
       
     $('\#El').after('<p>Hello World.</p>');  
       
    把匹配元素添加到目标元素之后  
       
     $('<p>Hello World.</p>').insertAfter('\#El');

### 5，删除节点： ###

js:  el.parentNode.removeChild(el)

jQuery:  $("\#el").remove()

### 6，替换节点： ###

js:  el.replaceChild(newNode,oldNode);  // oldNode必须是一个真实存在的子节点；

jquery: $("p").replaceWith("<p>hello world</p>")

### 7，获取、设置元素属性 ###

js:  设置属性：   .setAttribute("属性"，“属性值”)

获取属性：  .getAttribute("属性")

jquery:   设置属性：   .attr("属性"，“值”)

获取属性：  .attr("属性")

可以用prop读取dom原生属性：

$("\#el").prop("name","hello"); // 赋值

$("\#el").prop("name"); // 取值

### 8，操作元素的class属性： ###

### JS:      <span class="test"></span> ###

var ele = document.getElementByClassName("test")

方法一，直接赋值，会覆盖原有的值：ele.className = "test1"

方法二：利用className为字符串的属性，可以在原有的class属性后面添加或删除class；

ele.className += " test2";  // 记得加空格；

方法三：利用classList 属性的add(),remove()方法添加或者删除属性值：

ele.classList.add("test3");   ele.classList.remove("test");

### jQuery: ###

<span class="test"></span>

$("span").addClass(“test1 test2")；// addClass()   添加类属性值

$("span").removeClass("test1"); //  removeClass()   删除类属性值

$("span").toggleClass("test3");  // 切换类属性值；点击一次添加类属性值，再点击一次删除类属性值；

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关直接获取节点；操作节点属性

直接获取节点的几种方式 <!DOCTYPE html> <html> <head> <meta

今天药忘吃喽~/ 2023年09月30日 18:37/ 0 赞/ 18 阅读

相关直接获取节点；操作节点属性

直接获取节点的几种方式 <!DOCTYPE html> <html> <head> <meta

分手后的思念是犯贱/ 2023年09月27日 13:51/ 0 赞/ 127 阅读

相关 js,jQuery操作节点，获取、设置属性，操作class属性

1，创建元素节点： js: document.createElement("div") jQuery: $("<div></div>") 2,创建文本节点并添

Bertha 。/ 2023年06月27日 12:37/ 0 赞/ 27 阅读

相关 JavaScript中DOM节点常用操作 (节点的增删追加以及节点属性操作)

动态创建DOM节点 var obj = document.createElement(tagName); 例： var li = document.c

刺骨的言语ヽ痛彻心扉/ 2023年06月09日 14:26/ 0 赞/ 161 阅读

相关 js获取或设置html 内容、节点属性操作

获取或设置html 内容 innerHtml 设置或获取位于对象起始和结束标签内的html <div id="one"> 欢迎

短命女/ 2022年12月31日 13:19/ 0 赞/ 23 阅读

相关 jquery属性操作添加属性

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

淩亂°似流年/ 2022年07月14日 00:40/ 0 赞/ 311 阅读

相关 JavaScript获取与操作窗口属性

一、查看滚动条的滚动距离常用属性： window.pageXOffset/pageYOffset IE8及IE8以下不同时兼容 document.body.scrol

阳光穿透心脏的1/2处/ 2022年05月18日 23:44/ 0 赞/ 211 阅读

相关 jQuery第二天(操作样式、属性、节点、动画）

02.jQuery操作样式 1. css操作功能：设置或者修改样式，操作的是style属性。操作单个样式特点：jQ的css方法都是行内样式；

╰+攻爆jí腚メ/ 2022年01月20日 08:11/ 0 赞/ 272 阅读

相关 jQuery属性操作

jQuery属性操作　　使用 jq 操作标签的属性 Demo: 1.获取元素的指定属性值　　attr()可以操作原生属性, 还可以操作自定义的属性　　pro

àì夳堔傛蜴生んèń/ 2022年01月11日 06:45/ 0 赞/ 309 阅读

相关 DOM节点常见的属性及操作

（1）常见节点属性 childNodes　　子节点　　　　　　　　nodeList children　　　　子节点（元素节点）　　HTMLCollect

傷城~/ 2021年12月24日 06:55/ 0 赞/ 286 阅读