JavaScript 操作HTML DOM元素-蒲公英云

JavaScript 操作HTML DOM元素

小灰灰 2021-09-14 02:18 705阅读 0赞

DOM概念

DOM是文档对象模型的简称，全名为“Document Object Model”，通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

可以通过浏览器的开发者工具进行观察DOM。

SouthEast

可以看出，整个文档是由一系列节点对象所组成的一棵树，节点（Node）包括元素节点（1表示）、属性节点（2表示）和文本节点（3表示）。

以下例子均以此表格为例说明：

<body>
<table border="1">
   <caption>H5-17-03班花名册</caption>
   <thead>
   <tr>
      <th>姓名</th>
      <th id="sex" name="sex">性别</th>
      <th>电话</th>
   </tr>
   </thead>
   <tbody>
   <tr>
      <td>张三</td>
      <td>男</td>
      <td>15265984450</td>
   </tr>
   <tr>
      <td>李四</td>
      <td>女</td>
      <td>18270258897</td>
   </tr>
   <tr>
      <td>小明</td>
      <td>男</td>
      <td>15687925653</td>
   </tr>
   </tbody>
   <tfoot>
   </tfoot>
</table>
</body>

获取元素节点

window.οnlοad=function () {
          var sex=document.getElementById('sex');
          alert(sex.nodeType);
          alert(sex.nodeName);
          alert(sex.nodeValue)
 }

sex代表一个元素节点（nodeType=1），nodeName就是节点标签名（th）,元素节点的nodeValue=null；

获取属性节点

var attr=sex.getAttributeNode('name'); //获取属性节点
   alert(attr.nodeType);
   alert(attr.nodeName);
   alert(attr.nodeValue);

getAttributeNode方法是获取元素的属性节点，此时输出的节点类型为属性节点（2），节点名就是属性名（name），节点值就是属性值（sex）.

获取文本节点

var text=sex.firstChild;   //获取文本节点
  alert(text.nodeType);
  alert(text.nodeName);
  alert(text.nodeValue);

text是一个文本节点（3），节点名称固定是#text，节点值就是文本内容。

JavaScript获取DOM元素方法

（1）getElementById(“id”)：根据元素的ID属性来获取元素，获取到的是单独的一个元素。

（2）getElementsByTagName(“标签名”)：根据标签名来获取元素，获取到的是一个元素的集合，也可看成一个数组，里面是若干个相同的标签元素，若想通过此方法获取到某个单独的标签元素，需在后面注明下标，下标从0开始，也即是第一个元素。此方法获取元素是按从上到下依次获取，形成一个集合。

实例：

<script>
      window.οnlοad=function () {
          var input=document.getElementsByTagName('input');  //此时获取到的是页面中所有的input标签元素。
          var psd=document.getElementsByTagName('input')[2]; //此时获取到的是集合里面的第三个input标签。
      }
   </script>
</head>
<body>
<input >
<input type="checkbox">
<input type="password">
<input type="radio">
<input type="range">
</body>

（3）getElementsByClassName(“类名”)：此方法根据class属性名来获取元素，跟Tagname一样，它获取到的也是一个元素的集合，需具体获取某个元素，在后面加上下标即可。

（4）getElementsByName(“name名称”)：此方法根据name属性名来获取元素，获取到的也是一个元素的集合，获取单个元素方法同上。

JavaScript修改DOM元素

（1）修改内容：通过innerText或者innerHTML方法可以修改元素内容，但是两者是有区别的。

innerHTML会按照HTML的规则去解析文本内容，而innerText只是当做文本处理。

<script>
      window.οnlοad=function ( ) {
          var p=document.getElementsByTagName('p')[0];
          var btn=document.getElementsByTagName('button')[0];
          btn.οnclick=function () {
              p.innerText='我是修改后的内容'
          }
      }
</script>
</head>
<body>
<p>我是之前的内容</p>
<button>click me</button>
</body>

（2）修改样式：

①获取到的元素.style.样式名称=值

②通过修改元素的类名来修改样式。

实例：

<style>
      .p1{
         color:red;
      }
      .p2{
         color:blue;
      }
</style>
<script>
      window.οnlοad=function () {
          var p=document.getElementsByTagName('p')[0];
          var btn=document.getElementsByTagName('button')[0];
          btn.οnclick=function () {
              p.className='p2';  //修改元素p的class类名为p2，p2的样式已经事先定义好了
          }
      }
</script>
</head>
<body>
<p class="p1">测试文本</p>
<button>click me</button>
</body>