js,jquery和dojo操作dom
最近想学习arcgis javascript api,拦路虎就是dojo,为了便于理解dojo,在学习dojo的同时参考原生js和jquery,下午学习了下dom操作,mark下!
一、获取元素
js(native javascript)通过id:
var dd=document.getElementByid("button1")
js通过Tag
var dd=document.getElemnetByTagName("p")
jquery中通过css选择器获取相关的元素
类:.类名。
id:#id名。
元素:元素名
dojo:
根据id号获取相关的元素,
var dom=dom.ById("dd")
每次通过id的形式获取元素,有点不太现实,dojo还提供了dojo.query()的方式根据方便的获取参数
三、改变html内容
js:
document.getElementById("p1").innerHTML="New text!";
jQuery:
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
四、改变属性
js:
document.getElementById("image").src="landscape.jpg";
在js中改变样式采用的是如下的样式 property 为设置的属性,可以是color,font什么的
document.getElementById(id).style.property=new style
比如更改p标签的颜色为蓝色
document.getElementByTagName("p").style.Color="blue"
jquery:
通过attr()改变相关内容和属性
dojo:
六、创建新的dom元素
js:
在js中创建新元素,先需要创建一个新的节点,然后向一个已经存在的元素附加该节点
//创建新的节点
var para=document.createElment("p")
//获取id1的元素
var node=document.getElmentById("id1")
//将新的节点作为id1的子节点
node.appendChild(para);
jquery:
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
七、删除已有的dom元素
js:
不能够直接删除一个元素,需要通过父元素删除元素
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChid()
jquery:
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
八、移动元素
九、事件
js,jquery和dojo操作dom的更多相关文章
- JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分)
JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...
- js,jQuery数组常用操作小结
一.js中数组常用操作小结 (1) shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift() ...
- 廖雪峰js教程笔记11 操作DOM(包含作业)
由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM. 始终记住DOM是一个树形结构.操作一个DOM节点实际上就是这么几个操作: 更新:更新 ...
- Jquery选择器,操作DOM
刚接触jQuery,她真的是个好东西,操作DOM,修改样式,都很方便,主要获取DOM树的类和子代很方便. 今天用jq做了tab面包屑,不过用的是别人的代码,自己修改的,不错也做出来了,原理也有些明白, ...
- js基础总结01 --操作DOM
1.选择对象 通过id来选择绑定一个dom节点 :document.getElementById('p1'): 通过类名来绑定一个类数组的对象集合,:document.getElementsByCla ...
- Dojo - 操作Dom的函数
DOM Manipulation You might be seeing a trend here if you have gotten this far in the tutorial, in th ...
- 使用Jquery与vuejs操作dom比较
jquery实现添加功能 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- JQuery学习之操作DOM
1.DOM,就是Document Object Model(文档对象模型) 2.获得内容的方法: **text():设置或返回所选元素的文本内容 $("#btn1").click( ...
- Dojo操作dom元素的样式
1.使用dom-style的set方法,可以直接设置dom元素的样式属性,这和使用dom元素的style属性效果一样. 2.使用dom-class的replace方法可以替换某个dom元素的样式,ad ...
随机推荐
- Java 内部类种类及使用解析【转】
内部类Inner Class 将相关的类组织在一起,从而降低了命名空间的混乱. 一个内部类可以定义在另一个类里,可以定义在函数里,甚至可以作为一个表达式的一部分. Java中的内部类共分为四种: 静态 ...
- activiti designer下载地址
http://www.activiti.org/designer/update/ http://www.activiti.org/designer/archived/ 这个地址貌似不能用了 ...
- jmeter 之 BSF,BeanShell(转载)
jmeter无法自行处理javascript,但是它可以用自带的BSF PreProcessor(BSF:面向java的脚本语言,支持javascript) (使用这个之前要把bsh-2.0b2.ja ...
- 一个简单的MariaDB认证插件demo
代码地址如下:http://www.demodashi.com/demo/13076.html 一.前言 众所周知(其实可能很多人不知道)MariaDB支持插件认证.在MariaDB中新建用户,常见的 ...
- Swift 泛型參数
原文:http://www.cocoachina.com/newbie/basic/2014/0612/8802.html 本页内容包含:泛型形參语句和泛型实參语句 本节涉及泛型类型.泛型函数以及泛型 ...
- Tomcat几种启动报错及解决办法
今天真跪了,tomcat的错想到想不到的都遇到了.不记录一下都愧对今天愁掉的hair 在此之前分享一个集错网站,应该是程序员必备的网站之一,不过纯英文,小酸爽 Tags - Stack Overflo ...
- freemarker相关
大部分引入:http://www.blogjava.net/alinglau36/archive/2011/02/23/344970.html Freemarker操作字符串 1.substring( ...
- Spring核心项目及微服务架构方向
spring 顶级项目:Spring IO platform:用于系统部署,是可集成的,构建现代化应用的版本平台,具体来说当你使用maven dependency引入spring jar包时它就在工作 ...
- asp.net core mvc视频A:笔记5-1.路由规则
方法一:通过MapRoute方法,配置文件位置 小例子:如果所有路径都要在admin下,可以这样写 方法二:通过路由属性 相对路由 现在需要加/admin/home/index才能正常访问原来的默认页 ...
- Avira Free Antivirus 小红伞免费杀毒软件广告去除工具
Avira Free Antivirus 小红伞免费杀毒软件经常跳出广告, 用起来比较烦, 这里提供一个广告去除的免费小工具. 原理就是用组策略来阻止广告的跳出, 网上到处都是. 一键傻瓜式去除, 也 ...