zoukankan      html  css  js  c++  java
  • 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() - 从被选元素中删除子元素

    八、移动元素

    九、事件

                                                                       
  • 相关阅读:
    vue 移动端项目,动态控制div距离底部的距离
    输入一个整形数组,求数组中连续的子数组使其和最大
    事件冒泡、组织事件冒泡、以及组织默认行为
    vuex存储和本地存储的区别
    Uncaught TypeError: Cannot read property 'offsetTop' of undefined at VueComponent.handleScroll
    js悬浮吸顶
    Python爬虫之爬取煎蛋网妹子图
    Python框架-pygal之世界地图
    Python框架-pygal之雷达图
    Python框架-pygal之饼图
  • 原文地址:https://www.cnblogs.com/myyouthlife/p/3441926.html
Copyright © 2011-2022 走看看