DOM常用属性【DOM】

最新推荐文章于 2024-09-10 10:25:08 发布

请叫我木丁西

最新推荐文章于 2024-09-10 10:25:08 发布

阅读量7.2k

点赞数 1

分类专栏： DOM

本文链接：https://blog.csdn.net/QQ1012421396/article/details/77431508

版权

DOM 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

DOM属性：

DOM 属性是节点（HTML 元素）的值，您能够获取或设置。文档里的每个节点都有以下3个属性： nodeName, nodeType, nodeValue。更有一些常用属性：innerHTML，parentNode，childNodes ，attributes ，firstChild，lastChild， nextSibling， previousSibling， length

① nodeName

nodeName:一个字符串，其内容是给定节点的名字。

var name = node.nodeName;

* 如果节点是元素节点，nodeName返回这个元素的名称

* 如果是属性节点，nodeName返回这个属性的名称

* 如果是文本节点，nodeName返回一个内容为#text 的字符串

注意：nodeName 是一个只读属性。

② nodeType

nodeType：返回一个整数，这个数值代表着给定节点的类型。

nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种：

Node.ELEMENT_NODE --- 1 元素节点

Node.ATTRIBUTE_NODE --- 2 属性节点

Node.TEXT_NODE --- 3 文本节点

注意：nodeType 是个只读属性

③nodeValue

nodeValue：返回给定节点的当前值（字符串）
如果给定节点是一个元素节点，返回值是 null

如果给定节点是一个属性节点，返回值是这个属性的值。

如果给定节点是一个文本节点，返回值是这个文本节点的内容。

注意：nodeValue 是一个 读/写 属性，但不能对元素节点的 nodeValue 属性设置值，但可以为文本节点的 nodeValue 属性设置一个值。例如：

var li = document.getElementById(“li”);

if(li.firstChild.nodeType == 3)

li.firstChild.nodeValue = “请叫我木丁西QQ1012421396”;

 
    
  
 
         
       
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>form.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  
  <body>
       
       <form name="form1" action="test.html" method="post" >
          <input type="text" name="tname" value="请叫我木丁西 QQ1012421396_1"  id="tid_1"  ><br>
          <input type="text" name="tname" value="请叫我木丁西 QQ1012421396_2"  id="tid_2"  ><br>
          <input type="text" name="tname" value="请叫我木丁西 QQ1012421396_3"  id="tid_3"  ><br>
          <input type="button" name="ok" value="保存1"/>
       </form>
       
       <select name="edu" id="edu">
          <option value="博士">博士^^^^^</option>
          <option value="硕士">硕士^^^^^</option>
          <option value="本科" selected="selected" >本科^^^^^</option>
          <option value="幼儿园">幼儿园^^^^^</option>
       </select>
       
       <select name="job" id="job" >
          <option value="美容">美容^^^^^</option>
          <option value="IT">IT^^^^^</option>
          <option value="程序员">程序员^^^^^</option>
          <option value="建筑师">建筑师^^^^^</option>
       </select>
       
       
       <p id="pid" name="8888">
        请叫我木丁西 QQ1012421396
        </p>
       
  </body>
  
  <script language="JavaScript">
     
 //元素节点  id="tid_1"  输出nodeName nodeType nodeValue
 var tid_1_obj =  document.getElementById("tid_1");
 var nodeName = tid_1_obj.nodeName;
 var nodeType = tid_1_obj.nodeType;
 var nodeValue = tid_1_obj.nodeValue;
 alert(nodeName + "#" + nodeType + "#" + nodeValue);
 
​
  //元素节点 id="pid"  输出nodeName nodeType nodeValue
    var pid_obj = document.getElementById("pid");
    alert(pid_obj.nodeName + "#" + pid_obj.nodeType + "#" + pid_obj.nodeValue);
    
  //属性节点  id="pid" 中name这个属性节点  输出nodeName nodeType nodeValue
  var nameAttribute = pid_obj.getAttributeNode("name");
    alert(nameAttribute.nodeName + "#" + nameAttribute.nodeType + "#" + nameAttribute.nodeValue);
​
  //文本节点 id="pid"  输出nodeName nodeType nodeValue
  var textObj = pid_obj.firstChild;
  alert(textObj.nodeName + "#" + textObj.nodeType + "#" + textObj.nodeValue);
​
  </script>
</html>

④innerHTML（重点）

作用：设置或获取位于对象起始和结束标签内的HTML

 
     
   
 
        
 
         
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>form.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
      <div id="city"></div>
  </body>
  <script language="JavaScript">
    //在div层中插入 <h1>今天</h1>
    var city_node = document.getElementById("city");
    city_node.innerHTML = "<h1>今天</h1>";
  </script>
      
</html>
 
    

⑤parentNode

作用：parentNode 属性以 Node 对象的形式返回指定节点的父节点。

如果指定节点没有父节点，则返回 null。

⑥childNodes

作用：childNodes 属性返回节点的子节点集合，以 NodeList 对象。

注意：您可以使用 length 属性来确定子节点的数量，然后您就能够遍历所有的子节点并提取您需要的信息。

⑦attributes

作用：attributes 属性返回指定节点的属性集合，即 NamedNodeMap。

注意：您可以使用 length 属性来确定属性的数量，然后您就能够遍历所有的属性节点并提取您需要的信息。

⑧firstChild

作用：firstChild 属性返回指定节点的首个子节点，以 Node 对象。

注意：在 HTML 中，文本本身是 HTML 元素的父节点，HEAD 和 BODY 是 HTML 元素的子节点。

⑨lastChild

作用：lastChild 属性返回被选节点的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。

⑩nextSibling

作用：nextSibling 属性返回指定节点之后紧跟的节点，在相同的树层级中。被返回的节点以 Node 对象返回。

注意： 如果没有 nextSibling 节点，则返回值为 null。

⑪previousSibling

作用：previousSibling 属性返回选定节点的上一个同级节点（在相同树层级中的前一个节点）。如果不存在这样的节点，则该属性返回 null。

⑫length

作用： length 属性可返回集合中节点的数目。在遍历节点集合的时候容易出问题，需注意

注意：length属性将返回一个元素所有可能的节点书数目。

例如：

 
<select name="first" size="10" multiple="multiple" class="td3" id="first">
    <option value="选项1">选项1</option>
    <option value="选项2">选项2</option>
    <option value="选项3">选项3</option>
    <option value="选项4">选项4</option>
    <option value="选项5">选项5</option>
    <option value="选项6">选项6</option>
    <option value="选项7">选项7</option>
    <option value="选项8">选项8</option>
</select>

一个select下有8个option项，document.getElementById("first").childNodes.length=16，而不是8， document.getElementById("first").getElementsByTagName("option").length=8才是正确的。