DOM常用属性【DOM】_IT分享知识网

大家好，欢迎来到IT知识分享网。

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 = “请叫我木丁西”;

<!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="请叫我木丁西 _1"  id="tid_1"  ><br>

    <input type="text" name="tname" value="请叫我木丁西 _2"  id="tid_2"  ><br>

    <input type="text" name="tname" value="请叫我木丁西 _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">

     请叫我木丁西

     </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才是正确的。

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/140692.html

DOM常用属性【DOM】