13.节点操作上，下

最新推荐文章于 2022-08-28 02:08:19 发布

W蘭

最新推荐文章于 2022-08-28 02:08:19 发布

阅读量366

点赞数 1

本文链接：https://blog.csdn.net/weixin_51353891/article/details/119167869

版权

js2基础专栏收录该内容

14 篇文章 2 订阅

订阅专栏

nodeValue

概念：该属性用来返回或设置当前节点的值。

注意：对于元素节点,本身不包含文本所以nodeValue不可用，对于文本节点 nodeValue = 文本值，对于属性节点 nodeValue = "属性值"

语法：

var str = node.nodeValue;
node.nodeValue = str;

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>

nodeType

概念：只读属性 Node.nodeType 表示的是该节点的类型。可用来区分不同类型的节点，比如元素, 文本和注释。

对于元素节点 nodeType === 1 即一个元素节点，例如 <p> 和 <div>。
对于属性节点 nodeType === 2 寄一个元素的属性
对于文本节点 nodeType === 3 即元素或者属性中实际的文字
对于文档元素 nodeType === 9 即一个 Document 节点。
对于注释元素 nodeType === 8
语法:

var type = node.nodeType;

例子：

<p>123</p>
<script>
document.nodeType === 9; // true

var p = document.getElementById("p");
p.textContent = "很久很久以前...";

p.nodeType === 1; // true
p.firstChild.nodeType === 3; // true

</script>

该示例会检查 document 下第一个节点是不是注释，如果不是，则会提醒。

var node = document.documentElement.firstChild;
if (node.nodeType != 8)
  console.log("你应该认真编写代码注释！");

元素节点之间的遍历

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

语法：

var previousNode = element.previousSibling

例子

// <a><b1 id="b1"/><b2 id="b2"/></a>
alert(document.getElementById("b1").previousSibling); // null
alert(document.getElementById("b2").previousSibling.id); // "b1"

注意：Gecko内核的浏览器会在源代码中标签内部有空白符的地方插入一个文本结点到文档中。因此,使用诸如 Node.firstChild、 Node.previousSibling、Node.nextSibling、Node.lastChild之类的方法可能会引用到一个空白符文本节点, 而不是使用者所预期得到的节点。

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

语法：

var nextNode = element.nextSibling

例子

<div id="div-01">Here is div-01</div>
<div id="div-02">Here is div-02</div>

<script type="text/javascript">
var el = document.getElementById('div-01').nextSibling,
    i = 1;

console.log('Siblings of div-01:');

while (el) {
  console.log(i + '. ' + el.nodeName);
  el = el.nextSibling;
  i++;
}
/**************************************************
     Siblings of div-01

      1. #text
      2. DIV
      3. #text
      4. SCRIPT

**************************************************/
</script>

从上面的例子中可以看出，在两个标签之间（即一个元素的闭合标签之后，下一个元素的起始标签之前）有空白出现时，会有#text 节点被插入到 DOM 中。

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

语法：

var childNode = element.firstChild;

例子: firstChild属性的用法以及空白符节点对该属性的使用可能造成的影响

<p id="para-01">
  <span>First span</span>
</p>

<script type="text/javascript">
  var p01 = document.getElementById('para-01');
  alert(p01.firstChild.nodeName)
</script>


<p id="para-02"><span>First span</span></p>

<script type="text/javascript">
  var p02 = document.getElementById('para-02');
  alert(p02.firstChild.nodeName) // 'SPAN'
</script>

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

语法：

var lastChild = element.lastChild

例子:

var tr = document.getElementById("row1");
var corner_td = tr.lastChild;

「课堂练习」

将列表中商家距离转换为指定格式

要求：

列表中所有商家列表默认格式为<div class="seller"><h3>商家名</h3><span class="distance">距离</span></div>
例：<div class="seller"><h3>必胜客</h3><span class="distance">150</span></div>
要求将页面中所有商家的距离元素内文本内容修改成指定格式
当距离小于 50 时展示 <50m
当距离小于 1000 时展示 xxxm，例 800 转换为 800m
当距离大于等于 1000 时展示 x.xKM，例 4753 转换为 4.7km
当距离有误时展示 null

部分代码

 <div class="seller">
        <h3>商家名</h3><span class="distance">30</span>
    </div>
    <div class="seller">
        <h3>KFC</h3><span class="distance">1800</span>
    </div>
    <div class="seller">
        <h3>麦当劳</h3><span class="distance">600</span>
    </div>
    <div class="seller">
        <h3>汉堡王</h3><span class="distance">2752</span>
    </div>
    <div class="seller">
        <h3>海底捞</h3><span class="distance">4412</span>
    </div>
    <div class="seller">
        <h3>喜茶</h3><span class="distance">5300</span>
    </div>

    <script>
         var spans=document.querySelectorAll(".distance");
            spans.forEach(function(sp,index){
               // console.log(sp.firstChild.nodeValue)
               var distance=sp.firstChild.nodeValue;//获取span里面第一个子节点即文本节点的值 distance存储的是基础数据.
               var changeValue=null; 
                   if(distance<50){
                        changeValue ="<"+50+"m";
                   }else if(distance<1000){
                        changeValue =distance+"m";
                   }else if(distance>=1000){
                        // sp.firstChild.nodeValue=(distance/1000).toFixed(1)+"km"
                        changeValue =parseInt(distance/100)/10+"km"
                   }else{
                        changeValue=null;
                   }
                   sp.firstChild.nodeValue=changeValue;
            });
    </script>

空白节点

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

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

例子:

<html>
<head>
  <title>My Document</title>
</head>
<body>
  <h1>Header</h1>
  <p>
    Paragraph
  </p>
</body>
</html>

空白节点树

其中“\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;
}

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

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

语法：

var prevNode  = elementNode.previousElementSibling;

例子：

<div id="div-01">Here is div-01</div>
<div id="div-02">Here is div-02</div>
<li>This is a list item</li>
<li>This is another list item</li>
<div id="div-03">Here is div-03</div>

<script type="text/javascript">
  var el = document.getElementById('div-03').previousElementSibling;
  document.write('<p>Siblings of div-03</p><ol>');
  while (el) {
    document.write('<li>' + el.nodeName + '</li>');
    el = el.previousElementSibling;
  }
  document.write('</ol>');
  /*
  Siblings of div-03

   1. LI
   2. LI
   3. DIV
   4. DIV
  */
</script>

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

语法：

var nextNode = elementNode.nextElementSibling;

例子：

<div id="div-01">Here is div-01</div>
<div id="div-02">Here is div-02</div>

<script type="text/javascript">
  var el = document.getElementById('div-01').nextElementSibling;
  
  document.write('<p>Siblings of div-01</p>');
 
  document.write('<p>' + el.nodeName + '</p>');
 

  /**
  Siblings of div-01

  DIV

  */
</script>

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

语法：

var element = node.firstElementChild;

例子：

<ul id="foo">
  <li>First  (1)</li>
  <li>Second (2)</li>
  <li>Third  (3)</li>
</ul>

<script>
var foo = document.getElementById('foo');
//<li>First  (1)</li>
console.log(foo.firstElementChild);
</script>

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

语法：

var element = node.lastElementChild;

例子：

<ul id="foo">
  <li>First  (1)</li>
  <li>Second (2)</li>
  <li>Third  (3)</li>
</ul>

<script>
var foo = document.getElementById('foo');
//<li>First  (3)</li>
console.log(foo.lastElementChild);
</script>

节点的操作/修改

nodeValue

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

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

<script>

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

</script>

innerHTML

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

语法：

// 取值
const content = element.innerHTML;
// 设置
element.innerHTML = htmlString;

注意：

如果一个 <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/>";

「课堂练习」

根据用户评分，调整评论列表文本样式

要求：

列表中所有商家列表默认格式为
<li class="rating-item">
   <h3 class="username">用户名</h3>
   <p>用户评论内容</p>
   <span class="score">评分</span>
</li>
例：
<li class="rating-item">
   <h3 class="username">某团用户</h3>
   <p>这家饭店很好吃，菜品价格亲民。喜欢吃辣的小伙伴值得一试。</p>
   <span class="score">4.5</span>
</li>
要求评分低于3分都视为差评，否则都视为好评
当为差评时class="score"元素字体颜色为#ccc，反之元素字体颜色为#fc0
当为差评时用户评论内容元素字体颜色为#ccc，反之元素字体颜色为#0af
并且根据差评好评给用户评论内容添加 “差评：”、“好评” 字样。例"
好评：这家饭店很好吃，菜品价格亲民。喜欢吃辣的小伙伴值得一试。
"

部分代码

    <ul class="rating-list">
        <li class="rating-item">
            <h3 class="username">用户名</h3>
            <p>用户评论内容</p>
            <span class="score">2.8</span>
        </li>
        <li class="rating-item">
            <h3 class="username">某团用户</h3>
            <p>这家饭店很好吃，菜品价格亲民。喜欢吃辣的小伙伴值得一试。</p>
            <span class="score">4.5</span>
        </li>
        <li class="rating-item">
            <h3 class="username">某饿了用户</h3>
            <p>可能我吃不了辣，对于我来说太辣了</p>
            <span class="score">1.8</span>
        </li>
        <li class="rating-item">
            <h3 class="username">某点评用户</h3>
            <p>同事们对这家店一致好评！已经是部门聚餐指定地点了</p>
            <span class="score">4.9</span>
        </li>
    </ul>
    <script>
        //获取所有的score元素，获取元素之间内容 分数. 如果分数<3 设置当前score元素的颜色为#ccc
        //并且要查找当前score的前一个元素 并设置它颜色为#ccc 还要在里面添加一个内容 差评:xxxxxxx
        var scores=document.querySelectorAll(".score");//获取多个元素. 返回是一个nodeList集合对象【数组】
            scores.forEach(function(span,index){
                var value=span.innerHTML;//获取span.score之间的内容
                var prevp=span.previousElementSibling;//获取span的前一个元素p
                    if(value<3){//差评
                         span.style.color="#ccc"; //设置span自己的颜色为灰色
                         prevp.style.color='#ccc';//设置style颜色为#ccc
                         prevp.innerHTML="差评:"+prevp.innerHTML;//给元素p的内容前面 添加一个 差评
                    }else{//好评
                        span.style.color="#fc0";
                        prevp.style.color="#0af";
                        prevp.innerHTML="好评"+prevp.innerHTML;
                    }
            });

    </script>

textContent

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

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

语法

var text = someNode.textContent;
someOtherNode.textContent = string;

注意：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很消耗性能）
语法

var renderedText = HTMLElement.innerText;
HTMLElement.innerText = string;

textContent 与 innerText 的区别：

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

例子：

<h3>Source element:</h3>
<p id="source">
  <style>#source { color: red; }</style>
Take a look at<br>how this text<br>is interpreted
       below.
  <span style="display:none">HIDDEN TEXT</span>
</p>
<h3>Result of textContent:</h3>
<textarea id="textContentOutput" rows="6" cols="30" readonly>...</textarea>
<h3>Result of innerText:</h3>
<textarea id="innerTextOutput" rows="6" cols="30" readonly>...</textarea>

<script>
var source = document.getElementById('source');
var textContentOutput = document.getElementById('textContentOutput');
var innerTextOutput = document.getElementById('innerTextOutput');

textContentOutput.innerHTML = source.textContent;
innerTextOutput.innerHTML = source.innerText;
</script>

补充表单元素常用属性

.value

介绍：该属性可设置或者返回表单元素的 value 属性值。

语法：

// 返回 value 属性
textObject.value

// 设置 value 属性
textObject.value = text

例子：



    <input type="text" name="name" value="ajanuw">

    <select name="form-select" class="asd">
        <option value="a" selected>aaa</option>
        <option value="b" selected>bbb</option>
        <option selected>ccc</option>
    </select>

    <textarea cols="30" rows="10">hello world</textarea>

    <script>
        var input = document.querySelector('input')
        var select = document.querySelector('select')
        var textarea = document.querySelector('textarea')

        input.value = 'hello world'
        console.log(select.value) // ccc
        textarea.value = "你好"
    </script>

.placeholder

介绍：该属性可设置或者返回表单元素的 placeholder 属性值。

语法：

// 返回 placeholder 属性
textObject.placeholder

// 设置 placeholder 属性
textObject.placeholder = "请输入密码"

xtarea cols=“30” rows=“10”>hello world

<script>
    var input = document.querySelector('input')
    var select = document.querySelector('select')
    var textarea = document.querySelector('textarea')

    input.value = 'hello world'
    console.log(select.value) // ccc
    textarea.value = "你好"
</script>


### .placeholder	

**介绍**： 该属性可设置或者返回表单元素的 placeholder 属性值。

**语法**：
```javascript
// 返回 placeholder 属性
textObject.placeholder

// 设置 placeholder 属性
textObject.placeholder = "请输入密码"

节点的操作方法

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>

「课堂练习」

给之前创建的便捷DOM原型对象增加功能

回顾之前的便捷DOM原型对象：

创建一个便捷DOM原型对象（EasyElement）他拥有自身的属性 selector、el、length。拥有统一方法 setClassName，setStyle
selector属性为字符串类型 css 选择器，在原型实例化时作为参数传入
el属性为通过 selector 获取到的节点列表
length属性为通过 selector 获取到的节点列表的长度
setClassName 方法支持给所有selector 获取到的节点列表元素设置class属性
setStyle 方法接受一个 style object 支持给所有selector 获取到的节点列表元素设置多个style属性

要求增加功能：

selector 属性支持接受一个单一型html字符串,当为html字符串时实例对象将会创建一个dom元素而不是获取页面上的指定原则器的元素，例： var easyDiv = new EasyElement('<div>')
创建元素同样支持上面的所有属性与方法
增加 append 方法，该方法接受一个 选择器/DOM元素/EasyElement实例 作为参数,并将当前el元素全部作为参数的子元素添加到参数元素内部
若append方法接受EasyElement实例作为元素时，当前实例对象的el只会作为EasyElement实例的第一个元素的子元素添加到其内部
增加一个 html 方法，当该方法接受参数时会将参数作为EasyElement实例中每个元素的innerHTML值，若该方法无参数时返回EasyElement实例第一个元素的innerHTML值

部分代码：

    <div id="app"></div> 
    
    <ul class="list">
        <li>item-1</li>
        <li>item-2</li>
        <li>item-3</li>
        <li>item-4</li>
        <li>item-5</li>
    </ul>    

    <script>
        // 补充代码
        function EasyElement (selector) {
            
        }

      

        // 将id=app的div转化成 `EasyElement实例` 
        var easyApp = new EasyElement('#app') // 初始化

        console.log(easyApp.selector) // "#app"
        console.log(easyApp.el) // "NodeList(1)"
        console.log(easyApp.length) // 1

        easyApp.setClassName('.test .app') // 所有元素class属性为 '.test .app'

        easyApp.setStyle({  // 设置所有元素style样式
            backgroundColor: '#ccc'
        })



        // 使用创建一个h2元素的EasyElement实例
        var easyH2 = new EasyElement('<h2>') // 初始化

        console.log(easyH2.selector) // "<h2>"
        console.log(easyH2.el) // "Array(1)" 这里是个数组包含一个创建出来的 h2 元素
        console.log(easyH2.length) // 1

        easyH2.setClassName('item') // 所有元素class属性为 '.test .app'

        easyH2.setStyle({  // 设置所有元素style样式
            color: 'red',
            backgroundColor: '#ccc',
            border: '1px solid #fc0'
        })


        easyH2.html(123132131)

        console.log(easyH2.html()) // 123132131

        // easyH2.append('.list') // 将easyH2添加至选择器值为'.list'的第一个元素内部

        // easyH2.append(document.getElementById('app')) // 将easyH2添加至指定DOM节点中

        easyH2.append(easyApp) // 将easyH2 添加至指定的其他 EasyElement实例第一个元素中
</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

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

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

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

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()方法。

「课堂练习」

通过相关属性节点操作完成以下功能

要求：

将页面中到 id 是 purchase 的元素的 title 属性值设置为 a list of goods
将class 是 goods 元素，并且拥有title属性的元素将其 title 值设置为 a gentle reminder。

部分代码：

    <p id="purchase">购物列表</p>
    <ul>
        <li class="goods" title="可购买">洗衣机</li>
        <li class="goods" title="可购买">电脑</li>
        <li class="goods" title="可购买">手机</li>
        <li class="goods" title="可购买">空调</li>
        <li class="goods">宇宙空间站</li>
        <li class="goods" title="可购买">汽车</li>
        <li class="goods">火箭</li>
       
    </ul> 
    <script>
		      document.querySelector("#purchase").setAttribute("title","a list of goods");
        var lis=document.querySelectorAll("ul>li");
            lis.forEach(function(l,index){
                //判断li元素要有class并且class属性的值为goods并且还要有title属性
                if(l.hasAttribute("class") && l.getAttribute("class")=="goods" && l.hasAttribute("title")){
                    l.setAttribute("title","a gentle reminder")
                }    
            });
	</script>

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">

W蘭

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
13.节点操作上，下

nodeValue概念：该属性用来返回或设置当前节点的值。注意：对于元素节点,本身不包含文本所以nodeValue不可用，对于文本节点 nodeValue = 文本值，对于属性节点 nodeValue = "属性值"语法：var str = node.nodeValue;node.nodeValue = str;nodeName概念：只读属性用来返回当前节点的节点名称对于元素节点 nodeName = 标签名(返回的名称是大写的)对于文本节点 nodeName = #text对于属性
复制链接

扫一扫