【上层建筑——DOM元素的特性与属性（dojo/dom-prop）】的更多相关文章

上层建筑——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元素的特性与属性

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

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

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

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是这…

使用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基础-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…

dom元素上添加断点（使用dom breakpoint找到修改属性的javascript代码）

使用dom breakpoint能快速找到修改了某一个dom element的JavaScript code位于何处.在Chrome development tool里,选中想要inspect的dom element,右键选择Break on->Attributes modifications: 之后在DOM Breakpoint里能看到对应的entry: 点击Resume script execution,自动在dom attribute发生变化的地方停下来: 从callstack能得知是jQ…

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是这…

jQuery 数据 DOM 元素 核心 属性

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

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

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

dojo/dom源码

dojo/dom源码学习   dojo/dom模块作为一个基础模块,最常用的就是byId方法.除此之外还有isDescendant和setSelectable方法. dom.byId(myId)方法:   各种前端类库都免不了与DOM节点打交道,操作DOM的方法千变万化最终还是要回到原生的那几个方法中,因为类库再快也快不过原生.所以在dom.byId方法中,还是要依靠document.getElementById('myId')方法.假如没有ie,假如不要考虑兼容性,getElementById…

useRef获取DOM元素和保存变量（十）

useRef在工作中虽然用的不多,但是也不能缺少.它有两个主要的作用: 用useRef获取React JSX中的DOM元素,获取后你就可以控制DOM的任何东西了.但是一般不建议这样来作,React界面的变化可以通过状态来控制. 用useRef来保存变量,这个在工作中也很少能用到,我们有了useContext这样的保存其实意义不大,但是这是学习,也要把这个特性讲一下. useRef获取DOM元素 界面上有一个文本框,在文本框的旁边有一个按钮,当我们点击按钮时,在控制台打印出input的DOM元素,…

七天接手react项目 —— 生命周期&受控和非受控组件&Dom 元素&Diffing 算法

生命周期&受控和非受控组件&Dom 元素&Diffing 算法 生命周期 首先回忆一下 vue 中的生命周期: vue 对外提供了生命周期的钩子函数,允许我们在 vue 的各个阶段插入一些我们的逻辑,比如:created.mounted.beforeDestroy等. react 中的生命周期是否也类似?请接着看: 每个组件都包含 "生命周期方法",你可以重写这些方法,以便于在运行过程中特定的阶段执行这些方法 -- react 官网-组件的生命周期 请看一张 r…

dom元素和方法总结

主要是参考<精通javascript>. 全局变量有: document.这个变量包含浏览器的html dom文档的引用. HTMElement 这个变量是所要html dom 元素的超类对象,扩展这个变量的原型prototype就可以扩展所有的html dom元素. HTMLElement.prototype.newFunciton=function() {.......}; dom操作如下: body document.body直接执行body元素. getElementById getE…

（三）Jsoup 使用选择器语法查找 DOM 元素

第一节: Jsoup 使用选择器语法查找 DOM 元素 Jsoup使用选择器语法查找DOM元素 我们前面通过标签名,Id,Class样式等来搜索DOM,这些是不能满足实际开发需求的, 很多时候我们需要寻找有规律的DOM集合,很多个有规律的标签层次: 这时候,选择器就用上了 css jquery都有,Jsoup支持css,jquery类似的选择器语法: 这里给下实例: package com.javaxk.jsoup; import org.apache.http.HttpEntity; impo…

JS判断指定dom元素是否在屏幕内的方法实例

前言 刷网页的时候,有时会遇到这样一个情景,当某个dom元素滚到可见区域时,或者图片的懒加载效果,它就会展现显示动画,十分有趣.那么这是如何实现的呢? 实现原理 想要实现这个功能,就要知道具体的实现原理.下面直入主题. 我们通过浏览器在浏览一个网页时候是这个样子的,如图所示 页面的长宽,以及各dom的坐标都是静止的,动的是显示窗口坐标而已.所以明白了这个,那么判断一个dom元素是否可见时,就十分简单了. 我们需要知道三个坐标就可知道当前dom是否在可见区域内,分别是 显示窗口的顶部坐标 显示窗口…

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

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

JS操作DOM元素属性和方法

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

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

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

Dojo操作dom元素的样式

1.使用dom-style的set方法,可以直接设置dom元素的样式属性,这和使用dom元素的style属性效果一样. 2.使用dom-class的replace方法可以替换某个dom元素的样式,add方法可以为dom元素增加样式,remove方法可以移除dom元素的样式 require(["dojo/dom", "dojo/window", 'dojo/dom-style', 'dojo/topic', "dojo/dom-class", &q…

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

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

HTML5部分新标签属性及DOM扩展元素

HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. 语义化标签:如<p>表示一个段落.<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等,在此基础上HTML5增加了大量更有意义的语义标签,更有利于搜索引擎或辅助设备来理解HTML页面内容. 常用语义标签: <nav> :导航 <hea…

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…

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

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

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…