zoukankan      html  css  js  c++  java
  • HTML DOM属性

    一、HTML DOM属性

    属性是节点(HTML元素)的值,可以对其进行修改或获取。

    编程接口:

    可以通过JavaScript(以及其他编程语言:可以让计算机读的懂得语言)对HTML DOM进行访问。

    所有的HTML元素被定义为对象,而编程接口则是对象方法和对象属性。方法是可以执行的动作(如,添加和修改元素);属性是能被获取或是修改的值(如,节点名称或内容)

    二、HTML DOM属性分类

    innerHTMl获取元素内容;nodeName规定节点的名称;nodeValue规定节点的值;nodeType规定节点的类型。

    (一)、innerHTML  属性

    获取元素内容最简单的方式就是使用innerHTML属性;获取或是替换HTML元素的内容

    注意:innerHTML属性可以用于获取或改变任何一个HTML元素,包括<html>和<body>

    实例:获取id为box的title元素的innerHTML,getElementById是一个方法,innerHTML是属性

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title id="box">My title</title>
     6 </head>
     7 <body>
     8     <script>
     9     var txt=document.getElementById('box').innerHTML;
    10     document.write(txt)
    11     </script>
    12 </body>
    13 </html>

    显示效果:title标签的内容正常情况下是无法在页面中显示的,但是经过设置后title元素中的内容显示在了页面中。

     (二)、nodeValue属性

    nodeValue属性规定节点的值。

    元素节点的nodeValue是undefined或null

    文本节点的nodeValue是文本本身

    属性节点的nodeValue是属性值

    实例:获取元素的值,获取<p id="box">标签的文本节点值:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title id="box1">My title</title>
     6 </head>
     7 <body>
     8 <p id="box">hellow world</p>
     9     <script>
    10     x=document.getElementById("box");document.write(x.firstChild.nodeValue);
    11     </script>
    12 </body>
    13 </html>

    显示效果:

     (三)、nodeName属性

    nodeName规定节点的名称。

    nodeName是只读的

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

    文本节点的nodeName始终是 #text

    文档节点的nodeName始终是#document

    注意:nodeName始终包含HTML元素的大写字母标签名。

    (四)、nodeType属性

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

    比较重要的节点类型有

    元素类型 NodeType
    元素 1
    属性 2
    文本 3
    注释 8
    文档 9
  • 相关阅读:
    零知识证明,中间人攻击,盲签名:原理和应用——三篇密码学科普文章
    json
    优化自己的编写出来的C#程序
    C++中不同的继承方式
    C语言程序编写涉及内存的问题
    面向Android的Tesseract工具
    常见Linux使用的十大问题
    Java语言链接数据库连接池配置的两种技巧
    配置数据库连接池的技巧
    PHP和Java在Web开发下相比较
  • 原文地址:https://www.cnblogs.com/nyw1983/p/11442568.html
Copyright © 2011-2022 走看看