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
  • 相关阅读:
    系统架构设计师考试大纲
    常用数据结构及复杂度( 转)
    八种主流NoSQL数据库系统对比(转)
    C# Redis Server分布式缓存编程(二)(转)
    C# Redis Server分布式缓存编程(一)(转)
    js去掉字符串前后空格的五种方法(转)
    给力分享新的ORM => Dapper( 转)
    我所经历的“余额宝”的那些故事(转)
    在PowerDesigner中设计物理模型1——表和主外键(转)
    Object.keys(obj)
  • 原文地址:https://www.cnblogs.com/nyw1983/p/11442568.html
Copyright © 2011-2022 走看看