当前位置: IT培训 > HTML5培训 > 前端开发 > H5--DOM 属性
H5--DOM 属性 时间:2017-07-19     来源:移动互联网学院

DOM属性

目标:

1. innerHTML 属性

2. nodeName 属性

3. nodeValue 属性

4. nodeType 属性

一,innerHTML 属性

获取元素内容的简单方法是使用 innerHTML 属性。

<html>

<head>

<meta charset="utf-8">

<title>华清创客学院(//www.makeru.com.cn/)</title>

</head>    

     <body>

           <p id="intro">Hello World!</p>

          <script>

                var txt=document.getElementById("intro").innerHTML;

                document.write(txt);

          </script>

    </body>

</html>

二,nodeName 属性

(1)nodeName 是只读的

(2)元素节点的 nodeName 与标签名相同

(3)属性节点的 nodeName 与属性名相同

(4)文本节点的 nodeName 始终是 #text

(5)文档节点的 nodeName 始终是 #document

<html>

<head>

<meta charset="utf-8">

<title>华清创客学院(//www.makeru.com.cn/)</title>

</head>    

<body>

<p id="demo">请点击按钮来获得 body 元素子节点的节点名。</p>

<button onclick="myFunction()">试一下</button>

<script>

function myFunction()

{

   var txt="";

   var c=document.body.childNodes;

   for (i=0; i<c.length; i++)

    {

       txt=txt + c[i].nodeName + "<br>";

    };

    var x=document.getElementById("demo"); 

    x.innerHTML=txt;

}

</script>

</body>

</html>

三,nodeValue 属性

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

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

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

<html>

       <body>

      <p id="intro">Hello World!</p>

      <script type="text/javascript">

           x=document.getElementById("intro");

          document.write(x.firstChild.nodeValue);

      </script>

      </body>

</html>

四,nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有:

元素类型 NodeType

元素 1

属性 2

文本 3

注释 8

文档 9

<body><p id="demo">请点击按钮来获得 body 元素子节点的节点类型。</p>

<button onclick="myFunction()">试一下</button>

<script>

function myFunction()

{

var txt="";

var c=document.body.childNodes;

for (i=0; i<c.length; i++)

  {

  txt=txt + c[i].nodeType + "<br>";

  };

var x=document.getElementById("demo"); 

x.innerHTML=txt;

}

</script>

</body>

总结:

5. innerHTML 属性

6. nodeName 属性

7. nodeValue 属性

8. nodeType 属性

X