最近想学习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的更多相关文章

  1. JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分)

    JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...

  2. js,jQuery数组常用操作小结

    一.js中数组常用操作小结 (1) shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift() ...

  3. 廖雪峰js教程笔记11 操作DOM(包含作业)

    由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM. 始终记住DOM是一个树形结构.操作一个DOM节点实际上就是这么几个操作: 更新:更新 ...

  4. Jquery选择器,操作DOM

    刚接触jQuery,她真的是个好东西,操作DOM,修改样式,都很方便,主要获取DOM树的类和子代很方便. 今天用jq做了tab面包屑,不过用的是别人的代码,自己修改的,不错也做出来了,原理也有些明白, ...

  5. js基础总结01 --操作DOM

    1.选择对象 通过id来选择绑定一个dom节点 :document.getElementById('p1'): 通过类名来绑定一个类数组的对象集合,:document.getElementsByCla ...

  6. Dojo - 操作Dom的函数

    DOM Manipulation You might be seeing a trend here if you have gotten this far in the tutorial, in th ...

  7. 使用Jquery与vuejs操作dom比较

    jquery实现添加功能 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  8. JQuery学习之操作DOM

    1.DOM,就是Document Object Model(文档对象模型) 2.获得内容的方法: **text():设置或返回所选元素的文本内容 $("#btn1").click( ...

  9. Dojo操作dom元素的样式

    1.使用dom-style的set方法,可以直接设置dom元素的样式属性,这和使用dom元素的style属性效果一样. 2.使用dom-class的replace方法可以替换某个dom元素的样式,ad ...

随机推荐

  1. 获取request中的查询参数

    //获取request中的查询参数 public static Map<String, Object> getRequestParamsByMap(HttpServletRequest r ...

  2. (转)jquery实现图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. requireJS目录

    前言 对于像我这种requireJS初学者而言,requireJS最难理解的部分应该是它的路径问题.晚上随便折腾了一下,算是稍微理清了这个目录问题吧. requireJS学习网址:requireJS中 ...

  4. Android应用中使用百度地图API之POI(三)

    先看执行后的图吧: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWFqaWFuamll/font/5a6L5L2T/fontsize/400/fill/ ...

  5. 【Android】 给我一个Path,还你一个酷炫动画

    本篇文章已授权微信公众号 hongyangAndroid (鸿洋)独家公布 转载请标明出处: http://blog.csdn.net/zxt0601/article/details/53040506 ...

  6. linux文件系统调用(1)---mount

    术语表: struct mount:挂载点 struct mountpoint:挂载点节点 struct vfsmount:挂载项 源文件系统:用户将要挂载的文件系统 目的文件系统:挂载源文件系统的文 ...

  7. Atitit .jvm 虚拟机指令详细解释

    Atitit .jvm 虚拟机指令详细解释 1. 一.未归类系列A1 2. 数据mov系列2 2.1. 二.const系列2 2.2. 三.push系列2 2.3. ldc系列 该系列命令负责把数值常 ...

  8. java设计模式 -------- 创建模式 之 抽象工厂模式

    本文是自己学习所做笔记,欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 工厂方法模式和抽象工厂模式不好区分清楚: 工厂方法模式特点: 1. 一个抽象产品 ...

  9. Angularjs学习笔记11_手工初始化

    http://my.oschina.net/fuckBAT/blog/375579 Angular的编译机制允许开发人员给浏览器添加新的Html语法,允许我们添加一些html节点,attribute, ...

  10. java的集合层次图