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. suprious weakup

    线程wait情况下,有可能没有中断,没有唤醒,而返回, 称为spurious wakeup. wait在循环中,通过对condition的判断来决定是否继续wait. 概率比较低.

  2. 与跨域相关的 jsonp 劫持与 CORS 配置错误

    参考文章: CORS(跨域资源共享)错误配置漏洞的高级利用 JSONP劫持CORS跨源资源共享漏洞 JSONP绕过CSRF防护token 读取型CSRF-需要交互的内容劫持 跨域资源共享 CORS 详 ...

  3. css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变

    css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...

  4. css中vertical-aling与line-height

    基线 baseline:字符x的底部 x-height: 字母x的高度,vertical-aling设置为middle的时候,对齐的是baseline往上1/2的x-height,所以vertical ...

  5. Linux 字符处理之【grep】

    参数: -i: 不区分大小写 -c: 统计包含匹配的行数 -n: 输出行号 -v: 反向匹配 示例文件: (example.txt) The cat's name is Tom, what's the ...

  6. rabbitmq部署及配置与验证

    1. 场景描述 朋友项目需要弄个测试环境,稍微帮忙了下,系统不复杂,但是需要自己安装mysql.Reids.Es.RabbitMq等,Mq主要用在同步用户信息与发送站内消息和短信上,RabbitMq以 ...

  7. scala 数据结构(八 ):-map映射操作

    在Scala中可以通过map映射操作来解决: 将集合中的每一个元素通过指定功能(函数)映射(转换)成新的结果集合这里其实就是所谓的将函数作为参数传递给另外一个函数,这是函数式编程的特点 以HashSe ...

  8. JVM 专题七:运行时数据区(二)程序计数器

    1.程序计数器 1. 什么是PC寄存器(程序计数器)? JVM中的程序计数寄存器(Program Counter Register)中,Register的命名源于CPU的寄存器,寄存器存储指令相关的现 ...

  9. python数据处理(七)之数据探索和分析

    1.探索数据 1.1 安装agate库 1.2 导入数据 1.3 探索表函数 a.排序 b.最值,均值 c.清除缺失值 d.过滤 e.百分比 1.4 连结多个数据集 a.捕捉异常 b.去重 c.缺失数 ...

  10. 数据可视化之DAX篇(二十四)Power BI应用技巧:在总计行实现条件格式

    https://zhuanlan.zhihu.com/p/98975646 如何将表格或者矩阵中值的条件格式也应用于总计行? 目前PowerBI并不支持这种功能,无法在总计行或者小计行上应用条件格式, ...