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

查找

<!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. 直接用bat命令对Inno Setup的脚本文件.iss进行编译

    直接用bat命令对Inno Setup的脚本文件.iss进行编译 2010-06-17 15:17 qjn0059 | 浏览 2163 次 编程语言外语学习 分享到:   2010-06-29 11: ...

  2. Tranparent/cutout/diffuse

    Shader "Tranparent/cutout/diffuse" { Properties {   //  _Color ("Main Color", Co ...

  3. C,C++宏中#与##的讲解[转]

    MoreWindows 专注于Windows编程 C,C++宏中#与##的讲解 文中__FILE__与示例1可以参见<使用ANSI C and Microsoft C++中常用的预定义宏> ...

  4. D - Charm Bracelet 背包问题

      Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit Status Pra ...

  5. 跳出frameset框架

    很多网页都是框架结构的,在很多的情况下会通过按钮点击事件或链接,跳出框架转到其它界面.例如说点击“注销登录”返回到登录界面. 一.通过运行脚本跳出框架有以下几种写法: 1.<script lan ...

  6. 【题解】【BST】【Leetcode】Unique Binary Search Trees

    Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For examp ...

  7. Core Java Volume I — 4.1. Introduction to Object-Oriented Programming

    4.1. Introduction to Object-Oriented ProgrammingObject-oriented programming, or OOP for short, is th ...

  8. 阿里云Centos中二级域名绑定二级目录的方法

    对于一些目录,我们往往需要对其指定二级域名,那么具体如何操作呢?下面,我将用亲身实践来说明一下. 由于第一次接触centos,我不得不借助于网络资源.然后得知要开启mod_rewrite这个模块,具体 ...

  9. 【渗透测试学习平台】 web for pentester -2.SQL注入

    Example 1 字符类型的注入,无过滤 http://192.168.91.139/sqli/example1.php?name=root http://192.168.91.139/sqli/e ...

  10. uva562 Dividing coins 01背包

    link:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...