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
  • 相关阅读:
    导入GooglePlay Services出现的一个错误
    在Linux下后台运行jar包文件
    android7.0闪退问题java.lang.SecurityException: MODE_WORLD_READABLE no longer supported
    从手机中扫描以com.xx.xxx 为前缀的apk包,使用列表的形式展现
    AS运行项目出现Error while Launching activity的错误
    Android——解决引入jar包和arr包时support.v7包的冲突
    Java知识点小记
    异步解压ZIP文件
    WP手机升级WIN10被PIN码锁定
    EXCEL 跨表比较数据
  • 原文地址:https://www.cnblogs.com/nyw1983/p/11442568.html
Copyright © 2011-2022 走看看