DOM标签属性和对象属性
DOM元素的属性分为两种
(1)标签属性 直接写在标签上的属性
(2)对象属性 由于所有的DOM元素都是Object类型,所以我们可以通过对象的方式为DOM元素设置属性
1.标签属性
(1)设置标签属性
elem.setAttribute(属性名,属性值);
<script>
</script>
注意:
(1)属性名单词之间通常用" - "连接, 并且不使用驼峰式 例如 div-one
(2)属性值必须为小写字符串
(3)可以通过标签属性获取元素 例如: document.querySelector("[abc='123']");
(2)获取标签属性值,并返回
elem.getAttribute(属性名);
(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属性
- 每个元素都有style属性
- 可以通过字符串添加修改行内样式
- 可用设置队形属性设置方式,添加修改行内样式
- 通常用对象的写法
示例: 创建标签并设置样式
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标签属性和对象属性的更多相关文章
- python-类属性和对象属性(转)
class People(object): # 类属性是指定义在类的内部而且在方法的外部的属性 money = 10000 def __init__(self,name,age,gender=1): ...
- python类属性和对象属性、类的普通方法和静态方法
类属性和对象属性的定义 class LearnClass(): #类属性 cls_attr = None def __init__(self,arg): #对象属性 self.obj_attr = a ...
- Html5不可见标签,及标签属性(元素对象属性) a href target name id 相对路径
标签属性分类(元素对象属性) 不可见标签与可见标签: <head></head> 属于不可见标签, 里面的内容一般用于css还有全局的一些变量,声明等. 而且如果 ...
- JavaScript之面向对象的概念,对象属性和对象属性的特性简介
一.大家都知道,面向对象语言有一个标志,那就是他们都有类的概念,通过类我们可以创建任意多个具有相同属性和方法的对象.但ECMAScript(指定JavaScript标准的机构,也就是说JavaScri ...
- Python-类属性与对象属性之间的关系
只要对象的属性未被指定赋值过, 不论类的属性怎么改变, 对象的属性都会跟随改变, 若对象属性被赋值过, 则不跟随类的属性而改变
- JQuery中操作元素的属性_对象属性
我们主要是通过attr去获取元素的属性: 看body内容: <body> <p> 账号:<input type="text" id="una ...
- 在VSCode中编辑HTML文档时,在Dom标签上写style属性时智能提示的问题
首先在VSCode中打开一个HTML文件 然后点右下角的“选择语言模式” 然后点击配置HTML语言的基础设置 然后在打开的界面中(右侧) 输入如下代码 { "editor.quickSugg ...
- python 类属性、对象属性
类的普通属性: dir(Myclass), 返回一个key列表: Myclass.__dir__,返回一个字典: 1.类的数据属性: 2.类的方法: 类的特殊属性: 1.Myclass.__name_ ...
- JavaScript--我发现,原来你是这样的JS:面向对象编程OOP[1]--(理解对象和对象属性类型)
一.介绍 老铁们,这次是JS的面向对象的编程OOP(虽然我没有对象,心累啊,但是可以自己创建啊,哈哈). JS高程里第六章的内容,这章内容在我看来是JS中很难理解的一部分.所以分成三篇博客来逐个理清. ...
随机推荐
- GAN网络从入门教程(二)之GAN原理
在一篇博客GAN网络从入门教程(一)之GAN网络介绍中,简单的对GAN网络进行了一些介绍,介绍了其是什么,然后大概的流程是什么. 在这篇博客中,主要是介绍其数学公式,以及其算法流程.当然数学公式只是简 ...
- 「区间DP」「洛谷P1043」数字游戏
「洛谷P1043」数字游戏 日后再写 代码 /*#!/bin/sh dir=$GEDIT_CURRENT_DOCUMENT_DIR name=$GEDIT_CURRENT_DOCUMENT_NAME ...
- Aspose下载图片
/// <summary> /// 把DataTable数据按照Excel模板导出到Excel /// </summary> /// <param name=" ...
- day67 前后端数据交互
目录 一.前后端传输数据的编码格式(contentType) 1 form表单 2 ajax请求 二.ajax发送json格式数据 三.ajax发送文件 四.django自带的序列化组件(drf做铺垫 ...
- day15 名称空间与作用域
目录 一.参数补充 1 命名关键字参数(了解) 二.名称空间 1.内置名称空间 2.全局名称空间 3.局部名称空间 4.名称空间的加载与销毁顺序 三.作用域 一.参数补充 1 命名关键字参数(了解) ...
- 蜂鸟E203系列——Linux下运行hello world例程
欲观原文,请君移步 创建程序 在 -/hbird-e-sdk-master/software 路径下创建一个"helloworld"中文件夹 在 -/hbird-e-sdk-mas ...
- java规范总结
1.所有的相同类型的包装类对象之间值的比较,全部使用 equals 方法比较. 说明:对于 Integer var = ? 在-128 至 127 范围内的赋值,Integer 对象是在 Intege ...
- mysql常见数据类型
#常见的数据类型 /* 数值型: 整型 小数: 定点数 浮点数 字符型: 较短的文本:char.varchar 较长的文本:text.blob(较长的二进制数据) 日期型: */ #一.整型 /* 分 ...
- (6)webpack使用babel插件的使用
为什么要使用babel插件? 首先要了解babel插件是干嘛的,随着js的语法规范发展,出现了越来越多的高级语法,但是使用webpack打包的时候,webpack并不能全部理解这些高级语法,需要我们使 ...
- Java8之Stream 集合聚合操作集锦(含日常练习Demo)
Stream 是用函数式编程方式在集合类上进行复杂操作的工具,其集成了Java 8中的众多新特性之一的聚合操作,开发者可以更容易地使用Lambda表达式,并且更方便地实现对集合的查找.遍历.过滤以及常 ...