最近想学习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. (一)Activiti之——简介、插件安装及BPMN元素

    1. 工作流概念 工作流(Workflow):就是“业务过程的部分或整体在计算机应用环境下的自动化”,它主要解决的是“使在多个参与者之间按照某种预定义的规则传递文档.信息或任务的过程自动进行,从而实现 ...

  2. Jenkins2.x Pipeline持续集成交互

    原文地址:http://blog.csdn.net/aixiaoyang168/article/details/72818804 Pipeline的几个基本概念: Stage: 阶段,一个Pipeli ...

  3. 牛散NO.2:MACD西施说风情,柳下惠高位勿迷情

    创业板日线“高位夺命勾魂枪” 话说在创业板的波段调整中,MACD的勾魂枪同样让多头“魂断蓝桥”.圈内图形又好比西施姑娘回眸一笑,吴王夫差便注定命赴黄泉了.范蠡的精心设计让西施 布了一个风情万种的局,被 ...

  4. table行编辑

    一个简单的Demo <html> <head> <title>Table Test Demo</title> <style> .view_t ...

  5. Spring的AOP配置

    Spring的AOP配置 1.先写一个普通类: package com.spring.aop; public class Common {  public void execute(String us ...

  6. 448. Find All Numbers Disappeared in an Array【easy】

    448. Find All Numbers Disappeared in an Array[easy] Given an array of integers where 1 ≤ a[i] ≤ n (n ...

  7. js中级四: 跨域

    原文链接:http://www.cnblogs.com/scottckt/archive/2011/11/12/2246531.html 什么是跨域? 首先什么是跨域,简单地理解就是因为JavaScr ...

  8. 高分辨率转HTML成PDF(ephtmltopdf.dll)

    今天看到园友分享的 wkhtmtopdf--高分辨率转HTML成PDF(三) 想起我做 一键保存网页为PDF_V1.2 的时候,也研究过一段时间这个,一开始也看的是wkhtmltopdf,不过发现wk ...

  9. java中static变量的声明和初始化

     目录(?)[+] 问题1静态变量如何初始化 问题2JDK如何处理static块 问题3如何看待静态变量的声明 对初始问题的解答 在网上看到了下面的一段代码: public class Test  ...

  10. windows下mysql表名不自动转换小写配置

    mysql5.6版本配置文件有两个 1.默认的配置在program files/MySQL/MySQL Server 5.6/my-default.ini 2.一个在programData/MySQL ...