DOM常用属性【DOM】

303 阅读 0 评论 200 点赞

我是靠谱客的博主迷人美女，最近开发中收集的这篇文章主要介绍DOM常用属性【DOM】，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

最后

以上就是迷人美女为你收集整理的DOM常用属性【DOM】的全部内容，希望文章能够帮你解决DOM常用属性【DOM】所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：DOM
浏览次数：303 次浏览
发布日期：2023-09-02 11:20:33
本文链接：https://www.kaopuke.com/article/k-p-k_14_uzo_10_fw_13_z_6_y.html

DOM常用属性【DOM】

概述

DOM属性：

① nodeName

② nodeType

③nodeValue

④innerHTML（重点）

⑤parentNode

⑥childNodes

⑦attributes

⑧firstChild

⑨lastChild

⑩nextSibling

⑪previousSibling

⑫length

最后

评论列表共有 0 条评论

发表评论取消回复

DOM常用属性【DOM】

概述

DOM属性：

① nodeName

② nodeType

③nodeValue

④innerHTML（重点）

⑤parentNode

⑥childNodes

⑦attributes

⑧firstChild

⑨lastChild

⑩nextSibling

⑪previousSibling

⑫length

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复