JavaScript 与 DOM

2021/8/16 14:06:14

编程Tag： javascript 属性元素 Dom var 返回节点 document

本文主要是介绍JavaScript 与 DOM，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

传送门

概念：Document 接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是 DOM 树。DOM 树包含了像 <body> 、<table> 这样的元素，以及大量其他元素。它向网页文档本身提供了全局操作功能，能解决如何获取页面的元素，如何在文档中创建一个新的元素等问题。

节点的选取/访问

选择单个元素节点

getElementById()：DOM提供的方法用来返回一个匹配特定 ID 元素节点对应的对象。若在当前 Document 下没有找到，则返回 null。

语法：

var element = document.getElementById(id);

参数
- id：是大小写敏感的字符串，代表了你想获得的那个元素的id属性的值。

注意：

JavaScript语言区分字母大小写，所以在使用“getElementById”时千万不要把id大小写弄错了，否则你得不到正确的结果。
不同于其他元素查找方法，getElementById() 只有在作为 document 的方法时才能起作用，而在DOM中的其他元素下无法生效。这是因为 ID 值在整个网页中必须保持唯一。因此没有必要为这个方法创建所谓的 “局部” 版本。

例子：

<body>
  <p id="para">Some text here</p>
  <script>
    var elem = document.getElementById('para');
    console.log(elem)
  </script>
</body>

querySelect()：使用css选择器语法,返回文档中与指定选择器或选择器组匹配的第一个 HTMLElement对象。如果找不到匹配项，则返回null。

语法：

element = document.querySelector(selectors);

参数
- selectors: 必须是有效的CSS选择器字符串。

例子：返回当前文档中第一个类名为 “myclass” 的元素

<body>
  <p class="myclass">Some text here1</p>
  <p class="myclass">Some text here2</p>
  <p class="myclass">Some text here3</p>
  <p class="myclass">Some text here4</p>
  <p class="myclass">Some text here5</p>
  <div class="myclass"><h3>标签3</h3></div>
  <script>
    var el = document.querySelector(".myclass");
    console.log(el)
    var el2 = document.querySelector(".myclass > h3");
    console.log(el2)  
  </script>
</body>

注意：

querySelector的选择器也可以非常强大，如 var el = document.querySelector("div.user-panel.main input[name='login']");
querySelect()可以在其他DOM元素中使用，即为该方法创建所谓的 “局部” 版本用来查询当前DOM元素内部符合css选择器的元素
  // 返回当前文档中第一个类名为 "myclass" 的元素
  var el = document.querySelector(".myclass");
  // 返回第一个类名为 "myclass" 的元素内部第一个类名为"child"的元素
  var childEl = el.querySelector(".child")

选择多个元素节点

getElementsByClassName()：返回一个包含了所有指定类名的子元素的动态类数组对象（意味着它可以自动更新自己来保持和 DOM 树的同步而无需重复调用）。当在document对象上调用时，会搜索整个DOM文档，包含根节点。你也可以在任意元素上调用getElementsByClassName() 方法，它将返回的是以当前元素为根节点，所有指定类名的子元素。

语法：

var elements = document.getElementsByClassName(names); 

var elements = rootElement.getElementsByClassName(names);

参数
- names: 是一个字符串，表示要匹配的类名列表；类名通过空格分隔

注意：

elements 是一个实时集合，包含了找到的所有元素。
getElementsByClassName 可以在任何元素上调用，不仅仅是 document。调用这个方法的元素将作为本次查找的根元素。

例子：

获取所有 class 为 ‘test’ 的元素:

document.getElementsByClassName('test');

获取第一个类名为 test 的元素

// 因为该方法返回的是一个类数组对象（伪数组），可以使用下标的形式访问该对象中指定下标元素，
document.getElementsByClassName('test')[0];

遍历类名为 test 的元素

// 因为该方法返回的是一个类数组对象（伪数组）拥有length属性 不能使用 for in 或者 forEach 遍历
var els = document.getElementsByClassName('test');

for (var i=0; i<els.length; i++) {
    console.log(els[i])
}

获取所有 class 同时包括 ‘red’ 和 ‘test’ 的元素.

document.getElementsByClassName('red test');

在id 为’main’的元素的子节点中，获取所有class为’test’的元素

document.getElementById('main').getElementsByClassName('test');

getElementsByTagName()：返回一个包含了所有指定标签名称元素的动态类数组对象（意味着它可以自动更新自己来保持和 DOM 树的同步而无需重复调用）。当在document对象上调用时，会搜索整个DOM文档，包含根节点。你也可以在任意元素上调用getElementsByTagName() 方法，它将返回的是以当前元素为根节点，所有指定标签名称的子元素。

语法：

var elements = document.getElementsByTagName(name);

参数
- names: 是一个代表元素的名称的字符串。特殊字符 “*” 代表了所有元素。

例子：

var container = document.getElementById("container");

var paras = container.getElementsByTagName("p");

var num = paras.length;

alert("#container 元素中包含了 " + num + " 个段落元素 ");

getElementsByName()：根据给定的name 返回一个包含了所有指定name值的子元素的动态类数组对象。

语法：

var elements = ocument.getElementsByName(name)

参数
- name:是元素的 name 属性的值。

例子：

<form name="up"><input type="text"></form>
<div name="down"><input type="text"></div>

<script>
  // 因为返回的是一个伪数组，所以获取集合对象后需要通过下标获取对应元素
  var up_forms = document.getElementsByName("up");
  console.log(up_forms[0].tagName); // "FORM"
</script>

querySelectAll()：使用css选择器语法,返回全部与指定的选择器匹配的静态元素列表(即不会因为DOM树结构改变而自动更新)，没有匹配的情况下为空伪数组。

语法：

var elements = document.querySelectorAll(selectors);

参数
- selectors: 一个字符串包含一个或多个匹配的选择器。这个字符串必须是一个合法的 CSS 选择器。

例子：

获取文档中所有<p>元素的NodeList。

var matches = document.querySelectorAll("p");

获取文档中所有class包含"note"或"alert"的<div>元素的列表，：

var matches = document.querySelectorAll("div.note, div.alert");

获取位于ID为"test"的容器，并且内其直接父元素class为"highlighted"的div的<p>元素的列表

var container = document.querySelector("#test");
var matches = container.querySelectorAll("div.highlighted > p");

注意：querySelectAll()一旦返回匹配元素的列表伪数组，就可以像任何数组一样使用他的属性与方法。

var highlightedItems = document.querySelectorAll(".highlighted");
// getElements API 获取的动态类数组对象无法获取该对象
highlightedItems.forEach(function(userItem) {
  console.log(userItem);
});

比较querySelectAll 和 getElementsBy 返回值

介绍：动态类数组对象在匹配元素发生改变时（删除、增加）数组中节点项会自动更新与页面中DOM树保持一致，而静态元素列表不会更新

querySelectorAll 返回的是NodeList，静态对象，元素发生变化，NodeList不会更新

getElementByClass, getElementsByTagName 返回的是HTMLCollection对象是一个动态对象，随着元素修改或者删除变化而变化

HTML DOM 中的HTMLCollection是即时更新的（Live）;当其包含的文档机构发生变化时，自动更新

NodeList是一个静态集合，随后的文档对象模型任何变动都不会影响集合的内容

<p class="test p1">段落1</p>
<p class="test p2">段落2</p>
<p class="test p3">段落3</p>
<p class="test p4">段落4</p>
<p class="test p5">段落5</p>
<p class="test p6">段落6</p>
<p class="test p7">段落7</p>

<script>
  var getP = document.getElementsByClassName('test')
  var queryP = document.querySelectorAll('.test')

  console.log(getP)
  console.log(queryP)
</script>

对比区别

在控制台中删除某个段落元素后再在控制台打印

console.log(getP)
console.log(queryP)

对比区别

NodeList

概念：NodeList 对象是节点的集合是一组元素的集合,每一个节点都有索引编号。通常是由document.querySelectorAll 等方法返回的。元素节点在NodeList中保存的顺序和他们HTML页面中出现的顺序相同。

注意：

NodeList 不是一个数组，是一个类似数组的对象(Like Array Object)。虽然 NodeList 不是一个数组，但是可以使用 forEach() 来迭代。然而，除了 forEach 方法，NodeList 没有这些类似数组的方法。但是你还可以使用 Array.from() 将其转换为数组。
在一些情况下，NodeList 是一个实时集合，也就是说，如果文档中的节点树发生变化，NodeList 也会随之变化。

属性：

length：表示Nodelist一共有多少项

var list = document.querySelectorAll('input[type=checkbox]');

console.log(list.length)

方法：
NodeList.item()：返回 NodeList 对象中指定索引的节点，如果索引越界，则返回null。等价的写法是 nodeList[i]，不过，在这种情况下，越界访问将返回 undefined。

for (var i = 0; i < myNodeList.length; ++i) {
  var item = myNodeList[i];  // 调用 myNodeList.item(i) 是没有必要的
}

NodeList.forEach()：对每个NodeList元素执行一次所提供的函数，将元素作为参数传递给函数。

var list = document.querySelectorAll('input[type=checkbox]');list.forEach(function (checkbox) {  console.log(list)});

节点分类

<div class="box" id="boxId">
     <div>子元素div</div>
        <!-- 
            This is 注释
            this is 注释2
         -->
        盒子文本1
        盒子文本2
     <p>p段落标签</p>
</div>
<script>
   var box = document.querySelector("div");
   // 查看div标签内部所有的子节点，
   var kids = box.childNodes;
   console.dir(kids)
</script>

nodeType 和 nodeValue 分类

	nodeType	nodeValue	备注
元素节点	1	null	html标签就是元素节点
属性节点	2	就是属性的值
文本节点	3	文本内容 \n 换行	除文本内容外，很多浏览器处理空格或者换行符时会保留一个空格符空白也是文本节点，
注释节点	8	就是注释内容	注释内容也是dom树里的一个节点
文档节点	9	null	document对象

nodeName

概念：只读属性用来返回当前节点的节点名称

对于元素节点 nodeName = 标签名(返回的名称是大写的)
对于文本节点 nodeName = #text
对于属性节点 nodeName = 属性名(返回的名称是大写的)

语法:

var str = node.nodeName;

例子：

<div id="d1">hello world</div>


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

console.log(div1.nodeName); // DIV
</script>

元素结点常用属性

.id

介绍： id 属性表示元素的标识符，同一文档中，若 id 的值不是空字符串 “”，便必须是独特的；也就是说，不同元素的 ID 必须是不同的。这有助于让常用的 getElementById 方法通过 id 的值找到对应的单个元素。

语法：

// 获取 id
var idStr = element.id; 
// 设置 id
element.id = idStr;

.style

介绍：包含应用到元素的 CSS 样式声明对象，该属性和其包含的样式属性的主要目的是允许快速样式化。
注意：

CSS 样式声明对象中的样式属性均为驼峰命名法
样式最好以css文件的形式定义在单独的文件中。

语法：

// 获取当前元素的 color 样式 
var color = element.style.color;
// 设置当前元素的 backgroundColor 样式
element.style.backgroundColor = "#fc0";

.className

介绍：该属性用来获取或设置指定元素的class属性的值。

语法：

// 获取 class 属性值
var cName = element.className;
// 设置元素的 class 属性值
element.className = cName;

注意：使用名称className而不是class作为属性名,是因为"class" 在JavaScript中是个保留字。可以是由空格分隔的多个class属性值。

element.className += " active test";

元素节点之间的遍历

方法一：直接获取

Node.previousSibling 返回当前节点的前一个兄弟节点,没有则返回null.

Node.nextSibling 返回前节点紧跟在其后面的兄弟节点，如果指定的节点为最后一个节点，则返回 null

Node.firstChild 返回当前节点的第一个子节点,如果节点是无子节点，则返回 null。

Node.lastChild 返回当前节点的最后一个子节点。如果父节点为一个元素节点，则子节点通常为一个元素节点，或一个文本节点，或一个注释节点。如果没有子节点，则返回 null。

例子：

<ul>
   <li>列表1</li>
   <li id="two">列表2</li>
   <li>列表3</li>
   <li>列表4</li>
</ul>
<script>
   var second = document.getElementById("two");
    
   // 获得前面的兄弟节点
   var prevNode = second.previousSibling;
   console.log(prevNode) // nodeType: 3 nodeValue: /n
   prevNode.style.background = "green" //Uncaught TypeError: Cannot set property 'background' of undefined 
   
   // 获得后面的兄弟节点
   var nextNode = second.nextSibling; 
   console.log(nextNode)  // nodeType: 3 nodeValue: /n 
    
   var ul = document.getElementsByTagName("ul")[0]
   
   var first = ul.firstChild
   console.log(first) // nodeType: 3 nodeValue: /n 

   var last = ul.lastChild;
   console.log(last) // nodeType: 3 nodeValue: /n  
</script>

返回的是兄弟节点（元素节点、属性节点、文本节点、注释节点、文档节点）可能是其中一个，不一定就是元素结点

如果兄弟元素之间是没有换行且没有注释，则一定是元素结点

如：

列表1
<li id=“two”>列表2
列表3
列表4

方法二：排除空白节点

介绍：绝大多数浏览器,都会把元素之间的空白当做文本节点来处理,所以上面四个属性可能会返回空白元素即空白节点。DOM 中的空白符会让处理节点结构时增加不少麻烦导致：

有些空白符会自成一个文本节点。
有些空白符会与其他文本节点合成为一个文本节点。

比如：上一种的方法

DOM 树结构：

空白节点树

其中“\n”代表换行符,要使用 DOM 游走于节点结构间又不想要无用的空白符时就需要使用JavaScript 代码排除空白节点

排除空白节点

function getPrevElement(text){  
  var prev = text.previousSibling; 
  // element.nodeType == 1 是一个非空白节点    
  while (prev.nodeType !=1)  {                                           
      console.log(prev);
      prev = prev.previousSibling;
  }
  return prev;
}
// nextsibling 类似

除此以外JavaScript还提供了四个属性，解决上面四个属性获取空白节点的问题可以直接获取元素节点

previousElementSibling 返回当前元素在其父元素的子元素节点中的前一个元素节点,如果该元素已经是第一个元素节点,则返回null。

nextElementSibling 返回当前元素在其父元素的子元素节点中的后一个元素节点,如果该元素已经是最后一个元素节点,则返回null。

firstElementChild 返回对象的第一个子元素, 如果没有子元素，则为null。

lastElementChild：返回对象的最后一个子元素，如果没有子元素，则返回 null。

例子：跟上一种方法一样，只是将方法名修改即可，这里就不举例了

补充

el.chidren 获得el里面所有的子元素

el.parentElement 获得el的父元素

el.parentNode 获得el的父元素节点

节点的操作/修改

nodeValue

概念：仅在文本节点操作时该属性可以用来更新文本节点

<p id="demo">修改我的内容</p>

<script>

	var x=document.getElementById("demo"); 
  // 获取文本节点并修改 
	x.childNodes[0].nodeValue = "change"

</script>

不常用需要考虑注释结点等其他结点对其影响

innerHTML

概念：属性设置或获取HTML语法表示的元素的后代。

语法：

 <div class="box">
    <i>嘤嘤嘤嘤</i>，这是盒子里的内容
 </div>
<script>
   var box = document.getElementsByClassName("box")[0]
   console.log(box.innerHTML)  //  <i>嘤嘤嘤嘤</i>，这是盒子里的内容
</script>

注意：

如果一个 <div>, <span>, 或 <noembed> 节点有一个文本子节点，该节点包含字符 &, <, 或 >, innerHTML 将这些字符分别返回为&, < 和 &gt;使用 textContent 可获取一个这些文本节点内容的正确副本。
设置元素的 innerHTML 将会删除所有该元素的后代并以上面给出的 htmlString 替代。

例子：

var logElem = document.querySelector(".log");
var time = new Date();
var timeStr = time.toLocaleTimeString();
logElem.innerHTML += timeStr + ": " + msg + "<br/>";

textContent

概念：返回一个节点及其后代的文本内容,textContent 的值取决于具体情况：

如果节点是一个 document，或者一个 DOCTYPE ，则 textContent 返回 null。
如果节点是个注释、文本节点，textContent 返回节点内部的文本内容，例如 Node.nodeValue。
对于元素节点类型，textContent 将所有子节点的 textContent 合并后返回

语法

<div class="box">
    <!-- <style>
      div {
         background: purple;
      }
    </style> -->
    <p style="display:none">段落标签</p>
    <!-- 这是注释1 -->
    <div>box盒子1</div>
    <!-- 这是注释2-->
    <span>span标签</span>
    <div>box盒子2</div>
</div>
<script>
 var box = document.querySelector(".box")
 console.log("textContent获得的内容输出==>",box.textContent)
</script>

textContent 与 innerHTML 的区别

Element.innerHTML 返回 HTML。通常，为了在元素中检索或写入文本，人们使用 innerHTML。但是，textContent 通常具有更好的性能，因为文本不会被解析为HTML。
使用 textContent 可以防止 XSS 攻击

例子：

<div id="divA">This is <span>some</span> text!</div>

<script>
// 你可以使用 textContent 去获取该元素的文本内容
var text = document.getElementById('divA').textContent;//  'This is some text!'

// 或者设置元素的文字内容：
document.getElementById('divA').textContent = 'This text is different!';
// <div id="divA">This text is different!</div>
</script>

innerText

介绍：该属性表示一个节点及其后代的“渲染”文本内容，
注意：请避免使用该方法，因为他不会返回任何一个被css隐藏了的标签。（并且因为要判断元素是否渲染导致该api很消耗性能）
语法

<div class="box">
    <!-- <style>
      div {
         background: purple;
      }
    </style> -->
    <p style="display:none">段落标签</p>
    <!-- 这是注释1 -->
    <div>box盒子1</div>
    <!-- 这是注释2-->
    <span>span标签</span>
    <div>box盒子2</div>
</div>
<script>
 var box = document.querySelector(".box")
 console.log("innerText获得的内容输出==>",box.innerText)
</script>

textContent 与 innerText 的区别：

textContent 会获取所有元素的内容，包括 <script> 和 <style> 元素，然而 innerText 只展示给人看的元素。
textContent 会返回节点中的每一个元素。相反，innerText 受 CSS 样式的影响，并且不会返回隐藏元素的文本，
与 textContent 不同的是, 在 Internet Explorer (小于和等于 11 的版本) 中对 innerText 进行修改，不仅会移除当前元素的子节点，而且还会永久性地破坏所有后代文本节点。在之后不可能再次将节点再次插入到任何其他元素或同一元素中。

节点的操作方法/创建删除

创建增加删除属性

createElement() 方法用于创建一个由标签名称 tagName 指定的 HTML 元素并返回。

语法：

var element = document.createElement(tagName);

参数
- tagName: 一个指定要创建元素类型的字符串,创建元素时的 nodeName 使用 tagName 的值为初始化，

例子：

获取文档中所有<p>元素的NodeList。

<!DOCTYPE html>
<html>
<head>
  <title>||Working with elements||</title>
</head>
<body>
  <div id="div1">这里的文本是动态创建的。</div>
</body>
</html>

<script>
 // 创建一个新的 div 元素
  var newDiv = document.createElement("div");
  cosole.log(newDiv)
</script>

appendChild() 将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。

语法：

element.appendChild(aChild)

参数
- aChild: 要追加给父节点（通常为一个元素）的节点。

注意：一个节点不可能同时出现在文档的不同位置。所以，如果某个节点已经拥有父节点，在被传递给此方法后，它首先会被移除，再被插入到新的位置。

例子：

<!DOCTYPE html>
<html>
<head>
  <title>||Working with elements||</title>
</head>
<body>
  <div id="div1">这里的文本是动态创建的。</div>
</body>
</html>

<script>
 // 创建一个新的 div 元素
  var newDiv = document.createElement("div");
 
  newDiv.textContent = '设置一段文本';

   // 将这个新的元素和它的文本添加到 DOM 中
  var currentDiv = document.getElementById("div1");

  currentDiv.appendChild(newDiv);

</script>

createTextNode() 创建一个新的文本节点。这个方法可以用来转义 HTML 字符。

语法：

// text 是一个文本节点。
var text = document.createTextNode(data);

参数
- data: 是一个字符串，包含了要放入文本节点的内容。

例子：

<!DOCTYPE html>
<html>
<head>
  <title>||Working with elements||</title>
</head>
<body>
  <div id="div1">这里的文本是动态创建的。</div>
</body>
</html>

<script>
 // 创建一个新的 div 元素
  var newDiv = document.createElement("div");
  // 动态创建文本节点
  var newContent = document.createTextNode("被创建的文本节点");
  // 添加文本节点 到这个新的 div 元素
  newDiv.appendChild(newContent);

   // 将这个新的元素和它的文本添加到 DOM 中
  var currentDiv = document.getElementById("div1");

  currentDiv.appendChild(newDiv);

</script>

**removeChild()**方法从DOM中删除一个子节点。返回删除的节点。

语法：

var oldChild = node.removeChild(child);

参数

child: 是要移除的那个子节点.

注意：被移除的这个子节点仍然存在于内存中,只是没有添加到当前文档的DOM树中。因此,你还可以把这个节点重新添加回文档中。但是若要实现次功能徐亚用另外一个变量比如上例中的oldChild来保存这个节点的引用。如果没有使用变量, 即没有使用 oldChild 来保存对这个节点的引用, 则认为被移除的节点已经是无用的, 在短时间内将会被内存管理回收。

例子：

<div id="top" align="center">
 <div id="nested"></div>
</div>

<script type="text/javascript">
      var top = document.getElementById("top");
      var nested = document.getElementById("nested");

      // 第一次调用正确地删除节点
      var garbage = top.removeChild(nested);
      // 第二次调用中的方法抛出异常
      garbage = top.removeChild(nested);
      
</script>

其他方法: document.write() 向页面添加内容（不推荐使用）

访问或更新属性值

getAttributeNode() 返回指定元素的指定属性节点

语法：

// attrNode  获得的属性返回值，是Attr 节点， nodeType 为 2
var attrNode = element.getAttribute(attribute)

参数
- attrName : 是一个包含属性名称的字符串

例子：

// html: <div id="top" />
var t = document.getElementById("top");
var idAttr = t.getAttributeNode("id");
alert(idAttr.value == "top")

注意：

当在一个被标记为HTML文档的DOM中的HTML元素上调用这个方法时， getAttributeNode会将参数转变为小写形式。
Attr 节点继承自Node，但不被认为是文档树的一部分。Node上定义的常用属性，如 parentNode, previousSibling, 和 nextSibling 对于 Attr节点来说都为null。

hasAttribute() 返回一个布尔值，指示该元素是否包含有指定的属性（attribute）。

语法：

// result 为返回的布尔值：true 或 false。
var result = element.hasAttribute(attName);

参数
- attrName : 是一个包含属性名称的字符串

例子：

// 在为属性设置新值前检测该属性是否存在
var d = document.getElementById("div1");

if (d.hasAttribute("align")) {
  d.setAttribute("align", "center");
}

getAttribute() 返回元素上一个指定的属性值。如果指定的属性不存在，则返回 null 或 “” （空字符串）

注意：getAttribute 通常用于替换getAttributeNode方法，来获得元素的属性值。性能也更快. 性能对比是 element.id 大于 element.getAttribute(‘id’) 大于 element.getAttributeNode(‘id’).nodeValue。

语法：

// attribute 是一个包含 attributeName 属性值的字符串。
var attribute = element.getAttribute(attributeName);

参数
- attributeName: 是你想要获取的属性值的属性名称。

例子：

var div1 = document.getElementById("div1");
var align = div1.getAttribute("align");

alert(align);
// 显示id="div1元素的align值

setAttribute() 设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。

语法：

element.setAttribute(name, value);

参数
- name：表示属性名称的字符串。
- value：属性的值/新值。任何非字符串的值都会被自动转换为字符串.

注意：

当在 HTML 文档中的 HTML 元素上调用 setAttribute() 方法时，该方法会将其属性名称（attribute name）参数小
写化。如果指定的属性已经存在，则其值变为传递的值。如果不存在，则创建指定的属性。
布尔属性只要出现在元素上就会被认为是 true ，无论它的值是什么; 要设置布尔属性的值（例如禁用），可以指定任何值。 建议使用空字符串或属性名称。重要的是，如果根本不存在该属性，则不管其实际值如何，都将其值视为真实。该属性的缺失表示其值是false。

例子：

<button>Hello World</button>

<script>
var b = document.querySelector("button");

b.setAttribute("name", "helloButton");
// 通过将Disabled属性的值设置为空字符串（“”），将disable设置为true，这将导致按钮被禁用。
b.setAttribute("disabled", "");
</script>

由于布尔属性只要出现在元素上就会被认为是 true 或者 setAttribute会将指定的值转换为字符串，因此指定null不一定能达到我们的期望。导致无法删除属性或将其值设置为null，而是将属性的值设置为字符串“null”。如果要删除属性需要收益removeAttribute()方法。

removeAttribute() 从指定的元素中删除一个属性。

语法：

element.removeAttribute(attrName);

参数
- attrName：指定要从元素中移除的属性的名称。如果指定的属性不存在，则不生效但不会生成错误。

例子：

// Given: <div id="div1" align="left" width="200px">
document.getElementById("div1").removeAttribute("align");
// Now: <div id="div1" width="200px">

欢迎访问我的个人博客

这篇关于JavaScript 与 DOM的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！