js的DOM(节点属性)

最新推荐文章于 2022-08-29 23:00:38 发布

_米粒儿_

最新推荐文章于 2022-08-29 23:00:38 发布

阅读量2.3k

点赞数

分类专栏： Javascript 文章标签： javascript 节点获取

本文链接：https://blog.csdn.net/yiren_99/article/details/47843879

版权

Javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

节点属性

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：

1. nodeName : 节点的名称

2. nodeValue ：节点的值

3. nodeType ：节点的类型

一、nodeName 属性: 节点的名称，是只读的。

1. 元素节点的 nodeName 与标签名相同

2. 属性节点的 nodeName 是属性的名称

3. 文本节点的 nodeName 永远是 #text

4. 文档节点的 nodeName 永远是 #document

二、nodeValue 属性：节点的值

1. 元素节点的 nodeValue 是 undefined 或 null

2. 文本节点的 nodeValue 是文本自身

3. 属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:

元素类型节点类型

元素 1

属性 2

文本 3

注释 8
文档 9

例子：获取所有li标签，并输出节点的名称、节点的值、节点的类型
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>节点属性</title>
</head>
<body>
  <ul>
     <li>javascript</li>
     <li>HTML/CSS</li>
     <li>jQuery</li>     
  </ul>
  <script type="text/javascript">
     var li=document.getElementsByTagName("li");
     for(var i=0;i<li.length;i++){
         document.write("节点名称："+li[i].nodeName+" 节点属性："+li[i].nodeValue+"节点类型："+li[i].nodeType+"<br/>");
         }
  </script>
</body>
</html>
访问子结点childNodes
访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。

语法：
elementNode.childNodes
注意：

如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。
注意:

1. IE全系列、firefox、chrome、opera、safari兼容问题

2. 节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7
例子：获取子节点并输出相应属性
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div>javascript<p>javascript</p><div>jQuery</div><h5>PH</h5></div>
<script type="text/javascript">
 var div=document.getElementsByTagName("div");
       var child=div[0].childNodes
         for(var i=0;i<child.length;i++){
        document.write(child[i].nodeName+"、"+child[i].nodeType+"、"+child[i].nodeValue+"<br/>");
        }
 
 /*节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7..把空格去掉*/
</script>
</body>
</html>
输出：
javascript
javascript
jQuery
PH
#text、3、javascript
P、1、null
DIV、1、null
H5、1、null
访问子结点的第一和最后项
一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。

语法：
node.firstChild
说明：与elementNode.childNodes[0]是同样的效果。

二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。

语法：
node.lastChild
说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。

注意: 上一节中，我们知道Internet Explorer 会忽略节点之间生成的空白文本节点，而其它浏览器不会。我们可以通过检测节点类型，过滤子节点。

例子：获取div的第一个节点和最后一个节点
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="con"><p>javascript</p><div>jQuery</div><h5>PHP</h>
</div>
<script type="text/javascript">
  var x=document.getElementById("con");
      document.write(x.firstChild.nodeName+"<br/>");
      document.write(x.lastChild.nodeName+"<br/>");
 
</script>
</body>
</html>
输出结果：
javascript
jQuery
PHP
P
H5
访问父节点parentNode
获取指定节点的父节点

语法：
elementNode.parentNode
注意:父节点只能有一个
注意: 浏览器兼容问题，chrome、firefox等浏览器标签之间的空白也算是一个文本节点。
例子： 通过获取的mylist节点，使用访问父节点parentNode，将"HTML/CSS"课程内容输出。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="con">
<li id="lesson1">javascript
  <ul> 
      <li id="tcon"> 基础语法</li>
      <li>流程控制语句</li>
      <li>函数</li>
      <li>事件</li>
      <li>DOM</li>
  </ul>
</li>
<li id="lesson2">das</li>
<li id="lesson3">dadf</li>
<li id="lesson4">HTML/CSS 
  <ul>
    <li>文字</li>
    <li>段落</li>
    <li>表单</li>
    <li>表格</li>  
  </ul> 
</li></ul>  
<script  type="text/javascript">    
   var mylist = document.getElementById("tcon"); 
   document.write(mylist.parentNode.parentNode.parentNode.lastChild.innerHTML)
</script> 

</body>
</html>
输出
 javascript
        基础语法
        流程控制语句
        函数
        事件
        DOM
    das
    dadf
    HTML/CSS
        文字
        段落
        表单
        表格

HTML/CSS

    文字
    段落
    表单
    表格
访问兄弟节点
1. nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。

语法：
nodeObject.nextSibling
说明：如果无此节点，则该属性返回 null。

2. previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。

语法：
nodeObject.previousSibling  
说明：如果无此节点，则该属性返回 null。

注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。
例子：编写get_previousSibling 函数，获得指定节点的上一个节点。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>previousSibling</title>
</head>
<body>
<ul id="u1">   
            <li id="a">javascript</li>   
            <li id="b">jquery</li>   
            <li id="c">html</li>
            </ul>
<ul id="u2">
            <li id="d">css3</li>
            <li id="e">php</li>
            <li id="f">java</li>   
        </ul>   
<script type="text/javascript">
    function get_previousSibling(n){
        var x=n.previousSibling;
        while (x && x.nodeType!=1){
            x=x.previousSibling;
        }
        return x;
    }

    var x=document.getElementsByTagName("li")[5];
    document.write(x.nodeName);
    document.write(" = ");
    document.write(x.innerHTML);
    
    var y=get_previousSibling(x);
    
    if(y!=null){
        document.write("<br />previousSibling: ");
        document.write(y.nodeName);
        document.write(" = ");
        document.write(y.innerHTML);
    }else{
      document.write("<br>这已经是第一个节点");      
    }

</script>
</body>
</html>
输出：
    javascript
    jquery
    html

    css3
    php
    java

LI = java
previousSibling: LI = php 

_米粒儿_

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js的DOM(节点属性)

节点属性在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：1. nodeName : 节点的名称2. nodeValue ：节点的值3. nodeType ：节点的类型一、nodeName 属性: 节点的名称，是只读的。1. 元素节点的 nodeNam
复制链接

扫一扫

专栏目录