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

查找

<!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. 产生n位元的所有格雷码

    原文链接:http://blog.csdn.net/beiyeqingteng/article/details/7044471 问题:产生n位元的所有格雷码. 格雷码(Gray Code)是一个数列集 ...

  2. Java 集合深入理解（4）：List<E> 接口

    点击查看 Java 集合框架深入理解 系列, - ( ゜- ゜)つロ 乾杯~ 蓝瘦!香菇! 连着加班几天,醉了.学学 List 放松下! 在 Java 集合深入理解:Collection 中我们熟悉了 ...

  3. CSS 实现：元素相对于文档水平垂直居中

    [要求]:如何用 CSS 实现水平/垂直居中一个元素(相对于文档) <body> <div class="content"></div> < ...

  4. Condition的await-signal流程详解(转)

    上一篇文章梳理了condtion,其中侧重流程,网上看到这篇文章文章介绍的很细.值得学习.特意转载过来.   转载请注明出处:http://blog.csdn.net/luonanqin 转载路径:h ...

  5. editplus 常用快捷键汇总 大小写代码折叠

    文本类 新建普通文本:Ctrl+N新建浏览器窗口:Ctrl+Shift+B新建HTML页:Ctrl+Shift+N打开:Ctrl+O打开一个现有的文档文件结尾:Ctrl+End选区扩展到文档结尾处:C ...

  6. iOS学习笔记---c语言第十一天

    函数指针 一.函数指针定义 //函数声明:声明我是一个什么函数 //求两个数的和 //函数的类型:int (int x,int y) //即:我是一个返回值为整型,有两个整型参数的函数. //函数名是 ...

  7. 利用powerdesigner反向数据库结构，生成ER图

    参考月下狼~图腾~:<利用powerdesigner反向数据库结构,生成ER图> https://www.zybuluo.com/Jpz/note/123582 首先新建一个"P ...

  8. ABAP DEMO

    sap Program DEMO 介绍 Program Description BALVBT01 Example SAP program for displying multiple ALV repo ...

  9. Windows 10触摸板手势

    高級使用者試用 Windows 10 筆記本電腦的觸控板上的這些手勢: •選擇一項: 在觸控板上點擊. •滾動: 將兩根手指放在觸控板上,然後以水準或垂直方向滑動. •放大或縮小: 將兩根手指放在觸控 ...

  10. JS网址正则验证

    function IsURL(str_url){ var strRegex = "^((https|http|ftp|rtsp|mms)?://)" + "?(([0-9 ...