一、标签默认属性的查找与修改

查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签操作</title>
</head>
<body>
    <!--定义一个div标签和一个a标签-->
    <!--div默认属性:id,class,style,可以通过"."的方式找到，自定义属性则不可以-->
    <div id="container" class="c1" style="font-size: 12px;color: red" sb="'xx">
        <div>武功秘籍</div>
        <div>家常菜谱</div>
    </div>
    <a href="http://www.baidu.com">添加</a>
    <script type="text/javascript">
        var obj = document.getElementById('container');
        console.log(obj.id);
//        class属性对应className值，font-size属性对应fontSize值
        console.log(obj.className);
        console.log(obj.style.fontSize);
        console.log(obj.sb);
    </script>
</body>
</html>

结果：

container
c1
12px
undefined

　　修改

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>标签操作</title>

</head>

<body>

    <!--定义一个div标签和一个a标签-->

    <!--div默认属性:id,class,style,可以通过"."的方式找到，自定义属性则不可以-->

    <div id="container" class="c1" style="font-size: 12px;color: red" sb="'xx">

        <div>武功秘籍</div>

        <div>家常菜谱</div>

    </div>

    <a href="http://www.baidu.com">添加</a>

    <script type="text/javascript">

        var obj = document.getElementById('container');

//        对已列出的默认属性可以修改其值，没有列出的默认属性或自定义属性只能通过setAttribute设置

        obj.id='con';

        obj.className = 'cla_c1';

        obj.style.fontSize='20px';

    </script>

</body>

</html>

　　

二、标签属性管理的万能神器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>标签操作</title>

</head>

<body>

    <!--定义一个div标签和一个a标签-->

    <!--div默认属性:id,class,style,可以通过"."的方式找到，自定义属性则不可以-->

    <div id='container'  style="font-size: 12px;color: red" sb="'xx">

        <div>武功秘籍</div>

        <div>家常菜谱</div>

    </div>

    <a href="http://www.baidu.com">添加</a>

    <script type="text/javascript">

        var obj = document.getElementById('container');

//        对于标签默认属性或自定义属性均可设置，且名称定义可见即可得

        obj.setAttribute('class','container');

        obj.setAttribute('kong','kongzhagen');

    </script>

</body>

</html>

　　效果图

Dom之标签属性的更多相关文章

  1. html标签属性（attribute）和dom元素的属性（property）

    简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...

  2. DOM对象之查找标签&属性操作

    HTML DOM (文档对象模型) DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法. JavaScript对DOM进行了实现,对应于JavaScript中 ...

  3. DOM标签属性和对象属性

    DOM元素的属性分为两种 (1)标签属性 直接写在标签上的属性 (2)对象属性 由于所有的DOM元素都是Object类型,所以我们可以通过对象的方式为DOM元素设置属性 1.标签属性 (1)设置标签属 ...

  4. javascript之DOM编程通过html元素的标签属性找节点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. HTML DOM对象的属性和方法

    HTML DOM对象的属性和方法 HTML DOM 对象有几种类型: 1.Document 类型 在浏览器中,Document 对象表示整个 HTML 文档. 1.1属性 引用文档的子节点 docum ...

  6. Dom,查找标签和操作标签

    Dom,查找标签和操作标签 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...

  7. DOM相关方法，属性整理

    DOM相关方法,属性整理1.获取元素的方法 1根据id获取对象 document.getElementById(''); 2根据标签名获取对象 document.getElementsByTagNam ...

  8. DOM节点中属性nodeName、nodeType和nodeValue的区别 < Delphi >

    http://msdn.microsoft.com/zh-cn/library/vstudio/hf9hbf87.aspx <?xml version="1.0"?> ...

  9. JQuery DOM操作（属性操作/样式操作/文档过滤）

    jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...

随机推荐

  1. 定时同步时间与crontab

    date 月日时分年.秒date -s可以直接设置系统时间 比如将系统时间设定成1996年6月10日的命令如下.#date -s 06/10/96将系统时间设定成下午1点12分0秒的命令如下.#dat ...

  2. Recaman's Sequence_递推

    Description The Recaman's sequence is defined by a0 = 0 ; for m > 0, am = am−1 − m if the rsultin ...

  3. Unity3D ShaderLab 立方体图的反射遮罩

    Unity3D ShaderLab 立方体图的反射遮罩 上一篇,简单的介绍了立方体图的反射,那么我们能不能使用一张纹理对其进行指定遮罩呢?这样美工可以更好的控制图像的效果. 我们接着使用上一篇的sha ...

  4. Magento的价格去掉小数点

    Magento的默认情况,价格后面是有小数点的,我们来看下如何正确的来去掉小数点. 1.复制如下路径的文件 app/code/core/Mage/Directory/Model/Currency.ph ...

  5. C# UdpClient 设置超时时间

    /********************************************************************** * C# UdpClient 设置超时时间 * 说明: ...

  6. xp 安装 win7 64

    1.Win7文件准备 (1)下载Win7 的ISO文件到本机硬盘中 (2)用UltraISO等软件加载ISO文件,将win7目录下的bootmgr和boot文件夹复制到C盘根目录下,并在C盘 根目录下 ...

  7. 【题解】【DP】【Leetcode】Climbing Stairs

    You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...

  8. jsb里出现的 Invalid Native Object的一次bug修复的思考

    Cocos2d: jsb: ERROR: File /Users/dcx_JD/Documents/cocos2d-x-2.2.2/scripting/javascript/bindings/gene ...

  9. Oracle SQL语句追踪

    Oracle SQL语句追踪 1   SQL语句追踪 追踪SQL语句的执行过程需要在Oracle服务器端进行,Oracle服务器端会检测并记录访问进程所执行的所有SQL语句.下面使用的命令都是在命令行 ...

  10. OpenFlow Switch学习笔记(六)——Instructions和Actions

    本文主要重点讨论OpenFlow Switch规范的指令集,它们深刻影响着数据包在Switch中的处理行为,下面开始从以下几个部分谈起. 1.Instructions 每一个Flow Entry里都包 ...