DOM元素的Attribute(特性)和Property(属性) 【转载】

【DOM元素的Attribute(特性)和Property(属性) 【转载】】的更多相关文章

DOM元素的Attribute(特性)和Property(属性) 【转载】

1.介绍: 上篇js便签笔记http://www.cnblogs.com/wangfupeng1988/p/3626300.html最后提到了dom元素的Attribute和Property,本文简单介绍一下我的理解. 其实Attribute和Property这两个单词,翻译出来都是“属性”,<js高级程序设计>书中翻译为“特性”和“属性”,以示区别. 简单理解,Attribute就是dom节点自带的属性,例如html中常用的id.class.title.align等: 而Property是这…

详解JS中DOM 元素的 attribute 和 property 属性

一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 html 标签拥有的属性: property 是 dom 元素在 js 中作为对象拥有的属性. 从定义上可以看出: 对于 html 的标准属性来说,attribute 和 property 是同步的,是会自动更新的但是对于自定义的属性来说,他们是不同步的.(自定义属性不会自动添加到property)…

js便签笔记（2）——DOM元素的特性（Attribute）和属性（Property）

1.介绍: 上篇js便签笔记http://www.cnblogs.com/wangfupeng1988/p/3626300.html最后提到了dom元素的Attribute和Property,本文简单介绍一下我的理解. 其实Attribute和Property这两个单词,翻译出来都是“属性”,<js高级程序设计>书中翻译为“特性”和“属性”,以示区别. 简单理解,Attribute就是dom节点自带的属性,例如html中常用的id.class.title.align等: 而Property是这…

返本求源——DOM元素的特性与属性

抛砖引玉很多前端类库(比如dojo与JQuery)在涉及dom操作时都会见到两个模块:attr.prop.某天代码复查时,见到一段为某节点设置文本的代码: attr.set(node, 'innerText', 'Hello World!') 这段代码执行后并未生效,虽说innerText不是标准属性,尚未被ff支持,可用的是chrome,这个属性是被支持的.既然显示的文本没变,那就查看一下元素吧. innerText被添加到了html标签上,而换成prop模块后,成功的为节点替换文本. 以上…

DOM元素对象的属性和方法（1）

一.accessKey() 作用:获取元素焦点快捷键:设置快捷键后,使用Alt+快捷键,让元素快速获得焦点, <!DOCTYPE html> <html> <head> <title>element.accesskey</title> <meta charset="utf-8"> </head> <body> <input type="text" id="…

jQuery操作DOM元素

作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用一些别人封装好的js库来辅助我们的工作,jQuery就是这些辅助库中的一员(AnjularJS势头也很猛,正在学习中......). 常用选择器选择器说明 element $('标签名'),$('a')选取页面上的所有a标签,返回类型是DOM元素数组 class $('.类名'),$('.cls…

html标签属性（attribute）和dom元素的属性（property）

简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应dom元素的自身属性.从操作方法上来看,attribute可以通过dom core规范的接口 getAttribute和setAttribute 进行获取修改,而property可以通过对象访问属性的方式 . 或者 [" "]来修改获取. 但是对于ie6,7,8(Q)模式下,会与标准w3…

上层建筑——DOM元素的特性与属性（dojo/dom-attr）

上一篇返本求源中,我们从DOM基础的角度出发,总结了特性与属性的关系.本文中,我们来看看dojo框架是如何处理特性与属性的.dojo框架中特性的处理位于dojo/dom-attr模块属性的处理为与dojo/dom-prop模块中. attr.set() 方法的函数签名为: require(["dojo/dom-attr"], function(domAttr){ result = domAttr.set("myNode", "someAttr",…

Dom元素的Property和Attribute

Attribute就是DOM节点自带的属性,例如html中常用的id.class.title.align等: 而Property是这个DOM元素作为对象,其附加的内容,例如childNodes.firstChild等: 另外,常用的Attribute,例如id.class.title等,已经被作为Property附加到DOM对象上,可以和Property一样取值和赋值.但是自定义的Attribute,就不会有这样的特殊优待,例如: <div id=</div> 这个div里面的“titl…

上层建筑——DOM元素的特性与属性（dojo/dom-prop）

上一篇讲解dojo/dom-attr的文章中我们知道在某些情况下,attr模块中会交给prop模块来处理.比如: textContent.innerHTML.className.htmlFor.value disabled.checked等无状态特性对应于属性中的布尔变量事件的处理那这一节,我们便来看看prop对于属性的处理. 首先是一个标准名称字典,将要设置的属性名重新命名,避免与保留字的冲突: exports.names = { // properties renamed to avoi…

jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的元素中移除指定的属性. attr()方法读操作 attr()读操作. 读取的是匹配元素中第一个元素的指定属性值. 格式: .attr(attributeName),返回值类型:String.读取不存在的属性会返回undefined. 注意选择器的选择结果可能是一个集合,这里仅仅获取的是集…

JS操作DOM元素属性和方法

Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.JavaScript则是用于访问和处理DOM的语言.如果没有DOM,JavaScript根本没有Web页面和构成页面元素的概念.文档中的每个元素都是DOM的一部分,这就使得JavaScript可以访问元素的属性和方法. DOM独立于具体的编程语言,通常通过JavaScript访问DOM…

获取或操作DOM元素特性的几种方式

1. 通过元素的属性可以直接通过元素属性获取或操作特性,但是只有公认的特性(非自定义的特性),例如id.title.style.align.className等,注意,因为在ECMAScript中,class是保留字(在ES6中成了关键字),所以就不能再用class这个属性名来表示元素的CSS类名了,只能换成className. 2. 通过getAttribute().setAttribute().removeAttribute() 也可以通过这三个DOM方法来操作DOM元素的特性,例如 le…

jQuery 数据 DOM 元素核心属性

jQuery 参考手册 - 数据 .clearQueue() 从序列中删除仍未运行的所有项目 .clearQueue(queueName) $("div").clearQueue();//清空队列 .data() 向被选元素附加数据,或者从被选元素获取数据 $(selector).data(name)//如果没有规定名称,则该方法将以对象的形式从元素中返回所有存储的数据 $(selector).data(name,value)向被选元素附加数据 $("#btn1")…

JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

JavaScript Dom基础学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌握如何设置DOM元素的样式 DOM查找方法语法:document.getElementById(“id”) 功能:返回对拥有指定ID的第一个对象的引用返回值:DOM对象说明:id为DOM元素上id属性的值 DOM查找方法语法:document.getElementsByTagName(“ta…

vue获取DOM元素并设置属性

这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式方法二: 使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素注意:在获取相应元素之前,必须在mount钩子进行挂载,否则获取到的值为空, 如果是给子组件加id并修改自定义属性,则直接会加载改子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值如果给子组件加ref,…

DOM元素querySelectorAll可能让你意外的特性表现

一.时间紧急,废话少说本文所在的页面藏匿了下面这些代码: <img id="outside"> <div id="my-id"> <img id="inside"> <div class="lonely"></div> <div class="outer"> <div class="inner"><…

DOM – (w3school)1.DOM 方法 + 2.DOM属性 + 3.DOM 元素

1.DOM 方法一些 DOM 对象方法这里提供一些您将在本教程中学到的常用方法: 方法描述 getElementById() 返回带有指定 ID 的元素. getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组). getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表. appendChild() 把新的子节点添加到指定节点. removeChild() 删除子节点. replaceChild…

JQuery处理DOM元素-属性操作

JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('').attr(''); //设置属性值: //为一个属性设置值 $('*').attr('title', function(index, previousValue){ return previousValue + ' I am element ' + index + ' and my name is…

一个DOM元素同时拥有多个类名时的样式产生冲突时属性取决于css样式表中后读取到的属性

如果一个DOM元素包含多个类名,其中的两个类名的属性产生冲突,并不是根据htnl中类名的顺序来决定DOM元素的属性, 而是根据css样式中的顺序来决定DOM元素的属性,它取决于css样式表中后读取到的属性. 例如: html <div class="function dropdown show"></div> css: .show{ display:block; } .hidden{ display:none; } div元素的display属性最终为block…

JS-DOM ～ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

带有Element和不带的区别 a) 带Element的获取的是元素节点 b) 不带可能获取文本节点和属性节点获取所以子节点 a) . childNodes b) . children c) . parentNode . children [索引] . children:获取所有子节点 opacity:0-1:透明度 alpha(opacity:百分数):IE6/7/8透明度先绑定事件再进行循环 previousNode()上一个兄弟节点 alert(变量名)可测试变量名是否…

vue（4）—— vue的过滤器，监听属性，生命周期函数，获取DOM元素

过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤数据切换的动画过滤这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如下,自己体会吧: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .v-enter, .v-leav…

Vue获取DOM元素的属性值

项目中需要做一个小弹层,如下图: 我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图: 在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: <div class="sort-item" @click="showFilter($event)"> {{currentFilter}} <div class="sort-icon"> <i class="iconfon…

使用jQuery匹配文档中所有的li元素，返回一个jQuery对象，然后通过数组下标的方式读取jQuery集合中第1个DOM元素，此时返回的是DOM对象，然后调用DOM属性innerHTML,读取该元素包含的文本信息

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta ht…

JavaScript DOM 元素属性状态属性

JavaScript DOM 元素属性状态属性版权声明:未经允许,严禁转载! 元素的属性核心 DOM 为我们提供了操作元素标准属性的统一 API. 所有属性节点都储存在元素的 attributes 集合中. 获取元素的所有属性节点:elem . attributes 获取某个属性节点的属性名:elem . attributes[i] . nodeName 获取某个属性节点的属性值:elem . attributes[i] . nodeValue 代码案例 <a href="http:…

target属性用于返回最初触发事件的DOM元素。

target属性用于返回最初触发事件的DOM元素. 在HTML文档中,我们为<p>元素绑定点击事件("click"),由于DOM元素的事件冒泡机制,我们点击<p>元素内的一个<span>元素就可以触发<p>元素上绑定的click事件. target属性就用于返回最初触发事件的DOM元素,也就是本例中的<span>元素.(currentTarget属性始终返回的都是该<p>元素) 该属性属于jQuery的Event对…

（四）Jsoup 获取 DOM 元素属性值

第一节: Jsoup 获取 DOM 元素属性值 Jsoup获取DOM元素属性值比如我们要获取博客的href属性值: 我们这时候就要用到Jsoup来获取属性的值 : 我们给下示例代码: package com.javaxk.jsoup; import org.apache.http.HttpEntity; import org.apache.http.client.methods.CloseableHttpResponse; import org.apache.http.client.metho…

event.target 属性返回哪个 DOM 元素触发了事件。

<ul> <li>list <strong>item 1</strong></li> <li><span>list item 2</span></li> <li>list item 3</li> </ul> <script> $("ul").click(function(event) { console.log(event); va…

DOM元素属性值如果设置为对象

结论:内部会调用toString方法,将设置的对象转换为字符串添加给相应的属性: 这个问题呢,是通过jQuery的each方法中,回调函数的this指向问题而来: 我们知道,回调函数中的this如果指向的是基本数据类型,那么系统会自动将这个基本数据类型的值包装为对应的对象类型: 就比如: 数组里面存的是string类型的值,然后jq实例调用each方法,打印的this如下图所示: this指向的基本数据类型的值被转换为了String类型: 但是这里说的不是这个问题,而是和这个问题类似,我们在给D…

JS DOM元素的操作（创建，添加，删除，和修改属性）

1.1 创建 DOM 元素以及相应的追加方式 1.1.1 创建:document.createElement('div'); 添加: fatherEle.appendChild(ele); appendChild 是将一个元素追加到另一个元素的最后, 不会覆盖父元素原有的内容. 1.1.2 拼接元素的字符串,利用父元素的innerHTML设置父元素的内容父元素中的html内容为html字符串,回复该父元素原有的内容. 这种方法直接清空父元素中所有的元素. 1.1.3 insertBefo…