DOM元素的属性分为两种

  (1)标签属性  直接写在标签上的属性

  (2)对象属性  由于所有的DOM元素都是Object类型,所以我们可以通过对象的方式为DOM元素设置属性

1.标签属性

  (1)设置标签属性

    elem.setAttribute(属性名,属性值);

   <div></div>
  <script>   
       var div=document.querySelector("div");  
 
          div.setAttribute("abc","123");   //为div添加属性  属性名abc  属性值为123
          console.log(div);    //打印结果:  <div abc="123"></div>
  </script>

  注意:  

      (1)属性名单词之间通常用"    -     "连接, 并且不使用驼峰式     例如    div-one

      (2)属性值必须为小写字符串

      (3)可以通过标签属性获取元素      例如:   document.querySelector("[abc='123']");

  (2)获取标签属性值,并返回

    elem.getAttribute(属性名);

    var str=div.getAttribute("abc"); 
    console.log(str);    //打印结果:  123

  (3)删除标签属性

    elem.removeAttribute(属性名);

    div.removeAttribute("abc");
    console.log(div); //打印结果: <div></div>

 (4)标签的单属性属性值和属性名相同

    示例:

    <input type="checkbox">
<script>
var input=document.querySelector("input"); //获取input
input.setAttribute("checked","");      //写法1
input.setAttribute("checked","checked");   //写法2</script>
   //写法1 和写法2 都会使复选框被选中

1.对象属性

  (1)设置对象属性  使用点语法

        elem.属性名=属性值;

    获取对象属性值:

        elem.属性名

        var div = document.querySelector("div");  //获取div1
div.abc="123"; //为div添加abc属性 属性值为 123
console.log(div); //打印div
console.log(div.abc); //获取并打印div的 abc属性值

  这时我们发现对象属性并不会显示在标签上

  (2)对象属性优先级高于标签属性

    <input type="checkbox">DOM属性
    <script>
var input=document.querySelector("input"); //获取input
input.checked=false; //设置对象属性
input.setAttribute("checked","");       //设置标签属性
</script>

  (3)标签属性  与   对应的对象属性

    (a) checked   id   title  等  标签属性有对应的对象属性   自定义属性没有

    (b)class较为特殊,对应的对象属性为  className

        input.className="check1";
console.log(input); //打印结果: <input type="checkbox" class="check1">

  (4)style属性   

    1.   每个元素都有style属性
    2.   可以通过字符串添加修改行内样式
    3.   可用设置队形属性设置方式,添加修改行内样式
    4.   通常用对象的写法

   示例: 创建标签并设置样式

        function ce(type, style) {
var elem = document.createElement(type);
// ES6的方法 将后面的对象中的属性复制到前面对象中
Object.assign(elem.style, style);
return elem;
}
console.log(typeof (div));     //用法: ce(标签名,样式)       var div = ce("div", {

          width: "30px",
          height: "30px",
          border: "1px solid",
          backgroundColor: "red"
      });
      document.body.appendChild(div);  //将创建好的元素添加至body

DOM标签属性和对象属性的更多相关文章

  1. python-类属性和对象属性(转)

    class People(object): # 类属性是指定义在类的内部而且在方法的外部的属性 money = 10000 def __init__(self,name,age,gender=1): ...

  2. python类属性和对象属性、类的普通方法和静态方法

    类属性和对象属性的定义 class LearnClass(): #类属性 cls_attr = None def __init__(self,arg): #对象属性 self.obj_attr = a ...

  3. Html5不可见标签,及标签属性(元素对象属性) a href target name id 相对路径

    标签属性分类(元素对象属性) 不可见标签与可见标签: <head></head>        属于不可见标签, 里面的内容一般用于css还有全局的一些变量,声明等. 而且如果 ...

  4. JavaScript之面向对象的概念,对象属性和对象属性的特性简介

    一.大家都知道,面向对象语言有一个标志,那就是他们都有类的概念,通过类我们可以创建任意多个具有相同属性和方法的对象.但ECMAScript(指定JavaScript标准的机构,也就是说JavaScri ...

  5. Python-类属性与对象属性之间的关系

    只要对象的属性未被指定赋值过, 不论类的属性怎么改变, 对象的属性都会跟随改变, 若对象属性被赋值过, 则不跟随类的属性而改变

  6. JQuery中操作元素的属性_对象属性

    我们主要是通过attr去获取元素的属性: 看body内容: <body> <p> 账号:<input type="text" id="una ...

  7. 在VSCode中编辑HTML文档时,在Dom标签上写style属性时智能提示的问题

    首先在VSCode中打开一个HTML文件 然后点右下角的“选择语言模式” 然后点击配置HTML语言的基础设置 然后在打开的界面中(右侧) 输入如下代码 { "editor.quickSugg ...

  8. python 类属性、对象属性

    类的普通属性: dir(Myclass), 返回一个key列表: Myclass.__dir__,返回一个字典: 1.类的数据属性: 2.类的方法: 类的特殊属性: 1.Myclass.__name_ ...

  9. JavaScript--我发现,原来你是这样的JS:面向对象编程OOP[1]--(理解对象和对象属性类型)

    一.介绍 老铁们,这次是JS的面向对象的编程OOP(虽然我没有对象,心累啊,但是可以自己创建啊,哈哈). JS高程里第六章的内容,这章内容在我看来是JS中很难理解的一部分.所以分成三篇博客来逐个理清. ...

随机推荐

  1. GAN网络从入门教程(二)之GAN原理

    在一篇博客GAN网络从入门教程(一)之GAN网络介绍中,简单的对GAN网络进行了一些介绍,介绍了其是什么,然后大概的流程是什么. 在这篇博客中,主要是介绍其数学公式,以及其算法流程.当然数学公式只是简 ...

  2. 「区间DP」「洛谷P1043」数字游戏

    「洛谷P1043」数字游戏 日后再写 代码 /*#!/bin/sh dir=$GEDIT_CURRENT_DOCUMENT_DIR name=$GEDIT_CURRENT_DOCUMENT_NAME ...

  3. Aspose下载图片

    /// <summary> /// 把DataTable数据按照Excel模板导出到Excel /// </summary> /// <param name=" ...

  4. day67 前后端数据交互

    目录 一.前后端传输数据的编码格式(contentType) 1 form表单 2 ajax请求 二.ajax发送json格式数据 三.ajax发送文件 四.django自带的序列化组件(drf做铺垫 ...

  5. day15 名称空间与作用域

    目录 一.参数补充 1 命名关键字参数(了解) 二.名称空间 1.内置名称空间 2.全局名称空间 3.局部名称空间 4.名称空间的加载与销毁顺序 三.作用域 一.参数补充 1 命名关键字参数(了解) ...

  6. 蜂鸟E203系列——Linux下运行hello world例程

    欲观原文,请君移步 创建程序 在 -/hbird-e-sdk-master/software 路径下创建一个"helloworld"中文件夹 在 -/hbird-e-sdk-mas ...

  7. java规范总结

    1.所有的相同类型的包装类对象之间值的比较,全部使用 equals 方法比较. 说明:对于 Integer var = ? 在-128 至 127 范围内的赋值,Integer 对象是在 Intege ...

  8. mysql常见数据类型

    #常见的数据类型 /* 数值型: 整型 小数: 定点数 浮点数 字符型: 较短的文本:char.varchar 较长的文本:text.blob(较长的二进制数据) 日期型: */ #一.整型 /* 分 ...

  9. (6)webpack使用babel插件的使用

    为什么要使用babel插件? 首先要了解babel插件是干嘛的,随着js的语法规范发展,出现了越来越多的高级语法,但是使用webpack打包的时候,webpack并不能全部理解这些高级语法,需要我们使 ...

  10. Java8之Stream 集合聚合操作集锦(含日常练习Demo)

    Stream 是用函数式编程方式在集合类上进行复杂操作的工具,其集成了Java 8中的众多新特性之一的聚合操作,开发者可以更容易地使用Lambda表达式,并且更方便地实现对集合的查找.遍历.过滤以及常 ...