HTML 属性操作 - 对象属性

HTML 属性操作，指的是使用 JavaScript 来操作一个元素的 HTML 属性。如下面的 input 元素，HTML 属性操作指的就是操作它的 id、type、value 等，其他元素也类似。

<input type="button" id="btn" value="替换">

获取 HTML 值

obj.attr

obj 是元素名，它是一个 DOM 对象。所谓的 DOM 对象，指的是使用 getElementById（　）、getElementsByTagName（　）等方法获取的元素节点。我们在后面的章节中说到的 DOM 对象指的就是它。attr 是属性名，对于一个对象来说，可以通过点运算符（.）来获取它的属性值。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    window.onload = function () {
      var oBtn = document.getElementById("btn");
      oBtn.onclick=function(){
        alert(oBtn.id)
      }
    }
  </script>
</head>

<body>
  <input type="button" class="myBtn" id="btn" value="获取">
</body>

</html>

想要获得某个属性的值，首先需要使用 getElementById（　）等方法找到这个元素节点，然后才可以获取该属性的值。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    window.onload = function () {
      //创建一个动态按钮
      var oInput = document.createElement("input");
      oInput.id = "submit";
      oInput.type = "button";
      oInput.value = "提交";
      document.body.appendChild(oInput);
      //为按钮添加点击事件
      oInput.onclick = function(){
        alert(oInput.id);
      }
    }
  </script>
</head>
<body>
</body>
</html>

obj.value
对于单行文本框，HTML默认给它添加了一个value属性

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    window.onload = function () {
      var oBtn = document.getElementById("btn");
      var oFruite = document.getElementsByName("fruit");
      oBtn.onclick = function(){
        for(var i = 0;i<oFruite.length;i++){
          if(oFruite[i].checked){
            alert(oFruite[i].value);
          }
        }
      }
    }
  </script>
</head>
<body>
  <div>
    <label for=""><input type="radio" name="fruit" value="苹果" checked>苹果</label>
    <label for=""><input type="radio" name="fruit" value="香蕉" checked>香蕉</label>
    <label for=""><input type="radio" name="fruit" value="西瓜" checked>西瓜</label>
  </div>
  <input type="button" id="btn" value="获取">
</body>
</html>

document.getElementsByName（"fruit"）表示获取所有 name 属性值为 fruit 的表单元素。getElementsByName（　）只限用于表单元素，它获取的也是一个元素集合，也就是类数组。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    window.onload = function () {
      var oBtn = document.getElementById("btn");
      var oFruite = document.getElementsByName("fruit");
      oBtn.onclick = function(){
        var str = "";
        for(var i = 0;i<oFruite.length;i++){
          if(oFruite[i].checked){
            str+=oFruite[i].value;
          }
        }
        alert(str);
      }
    }
  </script>
</head>
<body>
  <div>
    <label for=""><input type="checkbox" name="fruit" value="苹果" checked>苹果</label>
    <label for=""><input type="checkbox" name="fruit" value="香蕉" >香蕉</label>
    <label for=""><input type="checkbox" name="fruit" value="西瓜" >西瓜</label>
  </div>
  <input type="button" id="btn" value="获取">
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    window.onload = function () {
      var oBtn = document.getElementById("btn");
      var oSelect = document.getElementById("select");
      oBtn.onclick = function () {
        alert(oSelect.value);
      }
    }
  </script>
</head>

<body>
  <select name="s" id="select">
    <option value="beijing">beijing</option>
    <option value="shanghai">shanghai</option>
    <option value="guangzhou">guangzhou</option>
    <option value="shenzhen">shenzhen</option>
    <option value="hangzhou">hangzhou</option>
  </select>
  <input type="button" id="btn" value="获取">
</body>

</html>

下拉菜单有点特殊，当用户选中一个 option 时，该 option 的 value 值就会自动变成当前 select 元素的 value 值。其中，value 是传给后台处理的，而标签中的文本是给用户看的。在大多数情况下，这两个值是一样的，有时会不一样，这取决于我们的开发需求。

设置 HTML 属性值

obj.attr = “属性值”;

HTML 属性操作 - 对象方法

getAttribute（）

obj.grtAttribute("attr")
obj.attr

上边的方法可以做到一些下边方法做不到的效果。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    window.onload = function () {
      var oBtn = document.getElementById("btn");
      oBtn.onclick = function(){
        // alert(oBtn.data987);
        alert(oBtn.getAttribute("data987"));
      }
    }
  </script>
</head>

<body>
  <input type="button" id="btn" value="修改" data987="JS">
</body>

</html>

其中 data987 是一个用户自定义类型，此时 13 行 obj.attr （对象属性方式）的方式不再适用，而 obj.getAttribute("dis") （对象方法方式）可以实现目的。

setAttribute（）

obj.setAttribute("attr","值")
obj.attr = "值";

obj是元素名，attr是属性名。setAttribute（　）方法有两个参数：第1个参数是属性名，第2个参数是要设置的属性值。两种设置属性值的形式是等价的。

同样，对于自定义属性也只能用第一个方式实现。

removeAttribute（）

obj.removeAttribute("attr");

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    .main {
      color: aqua;
    }
  </style>
  <script>
    window.onload = function () {
      var oP = document.getElementsByTagName("h1");
      oP[0].onclick = function () {
        oP[0].removeAttribute("class");
      }
    }
  </script>
</head>

<body>
  <h1 class="main">你点我呀</h1>
</body>

</html>

removeAttribute（　）在更多情况下是结合 class 属性来“整体”控制元素的样式属性。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    .main {
      color: aqua;
    }
  </style>
  <script>
    window.onload = function () {
      var oP = document.getElementsByTagName("p");
      var oAdd = document.getElementById("add");
      var oRemove = document.getElementById("remove");
      oAdd.onclick = function(){
        oP[0].className = "main";
      }
      oRemove.onclick = function(){
        oP[0].removeAttribute("class");
        oP[0].className = "";
      }
    }
  </script>
</head>

<body>
  <p class="main">我飘向北方</p>
  <input type="button" id="add" value="添加属性">
  <input type="button" id="remove" value="去除属性">
</body>

</html>

hasAttribute（）

obj.hasAttribute("attr")

返回一个布尔值，判断元素是否含有某一个属性。我们直接使用 removeAttribute（　）删除元素的属性的做法是不太正确的，比较严谨的做法是先用 hasAttribute（　）判断这个属性是否存在，只有存在，才去删除。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    .main {
      color: aqua;
    }
  </style>
  <script>
    window.onload = function () {
      var oP = document.getElementsByTagName("p");
      var oAdd = document.getElementById("add");
      var oRemove = document.getElementById("remove");
      oAdd.onclick = function(){
        oP[0].className = "main";
      }
      oRemove.onclick = function(){
        if(oP[0].hasAttribute("class")){
        oP[0].removeAttribute("class");
        //oP[0].className = "";
        }
      }
    }
  </script>
</head>

<body>
  <p class="main">我飘向北方</p>
  <input type="button" id="add" value="添加属性">
  <input type="button" id="remove" value="去除属性">
</body>

</html>

CSS 属性操作

获取 CSS 属性值

getComputedStyle(obj).attr
getComputedStyle(obj).["attr"]

obj 表示 DOM 对象，也就是通过 getElementById（　）、getElementsByTagName（　）等方法获取的元素节点。attr 表示 CSS 属性名。需要注意的是，这里的属性名使用的是“骆驼峰型”的 CSS 属性名。何为“骆驼峰型”？如 font-size 应该写成 fontSize , border-bottom-width 应该写成 borderBottomWidth（看起来像骆驼峰）。JS 命名中不能出现“-”，所以要修改形式。

从命名中可以看出，最后得到的是经过计算后的数据。所谓“计算后的样式”，是指不管是内部样式，还是行内样式，最终获取的是根据 CSS 优先级计算后的结果。

设置 CSS 属性值

style 对象

使用 style 对象来设置一个 CSS 属性的值，其实就是在元素的 style 属性中添加样式，这种方式设置的是“行内样式”。

obj.style.attr = "值";

obj 表示 DOM 对象，attr 表示 CSS 属性名，采用的同样是“骆驼峰”型。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    #box
    {
      width: 200px;
      height: 200px;
      background-color: wheat;
    }
  </style>
  <script>
    window.onload = function () {
      var oBtn = document.getElementById("btn");
      var oBox = document.getElementById("box");
      oBtn.onclick = function(){
        var attr = document.getElementById("attr").value;
        var val = document.getElementById("val").value;
        oBox.style[attr] = val;
      };
    }
  </script>
</head>

<body>
  属性： <input type="text" id="attr"><br>
  取值： <input type="text" id="val"><br>
  <input type="button" id="btn" value="设置">
  <div id="box"></div>
</body>

</html>

cssText 属性

在 JavaScript 中，我们可以使用 cssText 属性来同时设置多个 CSS 属性，这也是在元素的 style 属性中添加的。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    #box
    {
      width: 200px;
      height: 200px;
      background-color: wheat;
    }
  </style>
  <script>
    window.onload = function () {
      var oBtn = document.getElementById("btn");
      var oBox = document.getElementById("box");
      oBtn.onclick = function(){
        var txt = document.getElementById("txt").value;
        oBox.style.cssText=txt;
      }
    }
  </script>
</head>

<body>
  <input type="text" id="txt">
  <input type="button" id="btn" value="设置盒子属性">
  <div id="box"></div>
</body>

</html>

上述方式比较少用，通常是通过给元素添加一个类标签实现为整体添加样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    .oldBox
    {
      width: 100px;
      height: 100px;
      background-color: palegoldenrod;
    }
    .newBox
    {
      width: 100px;
      height: 100px;
      background-color: rgb(170, 197, 238);
    }
  </style>
  <script>
    window.onload = function(){
      var oBtn = document.getElementById("btn");
      var oBox = document.getElementById("box")
      oBtn.onclick = function(){
        oBox.className = "newBox";
      }
    }
  </script>
</head>
<body>
  <input type="button" id="btn" value="change">
  <div id="box" class="oldBox"></div>
</body>
</html>

DOM 遍历

DOM 遍历，可以简单地理解为“查找元素”。举个例子，如果你使用 getElementById（　）等方法获取一个元素，然后又想得到该元素的父元素、子元素，甚至是下一个兄弟元素，这种操作涉及的就是 DOM 遍历。

JS 中 DOM 遍历一般分为三种情况：查找父元素/子元素/兄弟元素。

查找父元素

obj.parentNode

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    table{border-collapse: collapse;}
    table,td,tr{border: 1px solid gray;}
  </style>
  <script>
    window.onload = function(){
      var oTd = document.getElementsByTagName("td")
      //遍历 td 元素
      for(var i = 0;i<oTd.length;i++){
        //为每一个 td 添加点击事件
        oTd[i].onclick = function(){
          var oParent = this.parentNode;
          oParent.style.color = "white"
          oParent.style.backgroundColor = "red";
        }
      }
    }
  </script>
</head>
<body>
  <table>
    <caption>成绩表</caption>
    <tr>
      <td>name</td>
      <td>Chinese</td>
      <td>Math</td>
      <td>English</td>
    </tr>
    <tr>
      <td>xiaoming</td>
      <td>100</td>
      <td>100</td>
      <td>100</td>
    </tr>
  </table>
</body>
</html>

查找子元素

childNodes, firstChild, lastChild, children, 
firstElementChild, lastElementChild.

其中，childNodes 获取的是所有的子节点。注意，这个子节点是包括元素节点以及文本节点的。而 children 获取的是所有的元素节点，不包括文本节点。

查找兄弟元素

previousSibling、nextSibling。
previousElementSibling、nextElementSibling。

兄弟节点和元素兄弟节点的区别，同查找子元素类似。

innerHTML 和 innerText

在 JavaScript 中，我们可以使用 innerHTML 属性很方便地获取和设置一个元素的“内部元素”，也可以使用 innerText 属性获取和设置一个元素的“内部文本”。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    window.onload = function(){
      var oP = document.getElementById("content");
      document.getElementById("txt1").value = oP.innerHTML;
      document.getElementById("txt2").value = oP.innerText;
    }
  </script>
</head>
<body>
  <p id="content"><strong style="color: aqua;">四月</strong></p>
  innerHTML 是： <input type="text" id="txt1"><br>
  innerText 是： <input type="text" id="txt2">
</body>
</html>

🛠️Tech

DOM 进阶

HTML 属性操作 - 对象属性

获取 HTML 值

设置 HTML 属性值

HTML 属性操作 - 对象方法

getAttribute（）

setAttribute（）

removeAttribute（）

hasAttribute（）

CSS 属性操作

获取 CSS 属性值

设置 CSS 属性值

style 对象

cssText 属性

DOM 遍历

查找父元素

查找子元素

查找兄弟元素

innerHTML 和 innerText

DOM 进阶

HTML 属性操作 - 对象属性

获取 HTML 值

设置 HTML 属性值

HTML 属性操作 - 对象方法

getAttribute（ ）

setAttribute（ ）

removeAttribute（ ）

hasAttribute（ ）

CSS 属性操作

获取 CSS 属性值

设置 CSS 属性值

style 对象

cssText 属性

DOM 遍历

查找父元素

查找子元素

查找兄弟元素

innerHTML 和 innerText

getAttribute（）

setAttribute（）

removeAttribute（）

hasAttribute（）