JavaScript

  [1]事件

    ①用户操作网页或者浏览器所发生的交互行为称为事件。比如:点击按钮,最小化窗口,修改文本框内容等。

    ②JS为我们定义许多浏览器中的事件。比如:单击(onclick)、双击(ondblclick)、移动(onmousemove) 等。

    ③我们可以通过为事件设置一个响应函数来对事件进行响应:

 <body>
<button id="btn">按钮</button>
</body> <script type="text/javascript">
//获取到按钮的对象
var btn = document.getElementById("btn");
//为btn绑定一个单击响应函数
btn.onclick = function(){
alert("hello World!");
};
</script>

  [2]加载方式

    ①浏览器加载网页代码时是由上到下依次加载的。

    ②如果我们在浏览器还尚未加载网页中的元素,那么将无法确定,控制台将会报错,解决该问题有两种方式:

      1) 将JS代码编写到body标签的下边。但是我们习惯上将JS、CSS等代码都写在head标签中。这种形式不符合使用习惯。

      2) 将js代码编写到window.onload = function(){}中。推荐的使用方式。(ps:在编写js代码的时候最好开始的时候就将window.onload = function(){}写上)。

  [3]DOM编程

    DOM全称:Document Object Model。

    DOM主要是通过JavaScript来控制网页中的各种元素,从而达到使网页可以和用户进行动态交互的作用。

    DOM的操作主要分四部分增、删、改、查。   

    节点类型:
      - 元素节点
      - 文本节点
      - 属性节点

    ①DOM查询

      1) 通过document对象查询:

        document.getElementById(id);  ---> 通过id获取一个元素节点对象.   

        document.getElementsByTagName(标签名); ---> 通过标签名获取一组元素节点对象.

        document.getElementsByName(name属性); --->通过name属性获取一组元素节点对象,一般用来获取表单项. 

      2) 通过具体的元素对象查询:

        element.getElementsByTagName(标签名); --->查找当前元素节点内指定标签名的子节点

        element.childNodes; --->获取当前节点的所有子节点.

        element.parentNode; --->获取当前节点的父节点.

      3) 获取元素的属性:

        获取  :  元素.属性名

        设置  : 元素.属性名 = 属性值;

      4)this:

        this指向的是当前函数的所属对象。

    DOM的增删改:   

      1) 创建元素节点:document.createElement(标签名);

      2) 创建文本节点: document.createTextNode(文本值);

      3) 添加子节点: 父节点.appendChild(子节点);

      4) 插入节点: 父节点.insertBefore(新节点,旧节点);

      5) 替换节点: 父节点.replaceChild(新节点,旧节点);

      6) 删除节点: 父节点.removeChild(子节点); / 子节点.parentNode.removeChild(子节点) *****

      7) 读写元素内部HTML代码

        读取: 元素.innerHTML

        设置: 元素.innerHTML = 新值
        

    

    

后端Java工程师常用JavaScript_DOM的更多相关文章

  1. Java工程师常用Linux命令

    本文所列的Linux常用命令包含:文件相关(目录操作,内容查看,查找与比较,压缩与解压),进程管理,网络操作,系统管理,性能监测与优化,Java常用工具多个方面概述. 文件目录基本操作 ls 命令用来 ...

  2. 我最推荐的一张Java后端学习路线图,Java工程师必备

    前言 学习路线图往往是学习一样技术的入门指南.网上搜到的Java学习路线图也是一抓一大把. 今天我只选一张图,仅此一图,足以包罗Java后端技术的知识点.所谓不求最好,但求最全,学习Java后端的同学 ...

  3. 《菜鸟程序员成长之路:从技术小白到阿里巴巴Java工程师》

    <菜鸟程序员成长之路:从技术小白到阿里巴巴Java工程师> 国庆节快乐!一年一度长度排第二的假期终于来了. 难得有十一长假,作者也想要休息几天啦. 不管你是选择出门玩,还是在公司加班,在学 ...

  4. 原创电子书《菜鸟程序员成长之路:从技术小白到阿里巴巴Java工程师》

    <菜鸟程序员成长之路:从技术小白到阿里巴巴Java工程师> 国庆节快乐!一年一度长度排第二的假期终于来了. 难得有十一长假,作者也想要休息几天啦. 不管你是选择出门玩,还是在公司加班,在学 ...

  5. Java工程师学习指南(入门篇)

    Java工程师学习指南 入门篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我之前写的文章都 ...

  6. Java工程师学习指南(初级篇)

    Java工程师学习指南 初级篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我之前写的文章都 ...

  7. Java工程师学习指南(中级篇)

    Java工程师学习指南 中级篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我写的文章都是站 ...

  8. Java工程师学习指南(完结篇)

    Java工程师学习指南 完结篇 先声明一点,文章里面不会详细到每一步怎么操作,只会提供大致的思路和方向,给大家以启发,如果真的要一步一步指导操作的话,那至少需要一本书的厚度啦. 因为笔者还只是一名在校 ...

  9. Java后端开发工程师是否该转大数据开发?

    撰写我对java后端开发工程师选择方向的想法,写给在java后端选择转方向的人 背景 看到一些java开发工程师,对java后端薪酬太悲观了.认为换去大数据领域就会高工资.觉得java后端没有前途.我 ...

随机推荐

  1. CentOS7之按时间段截取指定的Tomcat日志到指定文件的方法

    CentOS7之按时间段截取指定的Tomcat日志到指定文件的方法 sed -n '/2016-11-02 15:00:/,/2016-11-02 15:05:/p' catalina.out > ...

  2. Team Leader 你不再只是编码, 来炖一锅石头汤吧

    h3{ color: #000; padding: 5px; margin-bottom: 10px; font-weight: bolder; background-color: #ccc; } h ...

  3. 如何设计一门语言(七)——闭包、lambda和interface

    人们都很喜欢讨论闭包这个概念.其实这个概念对于写代码来讲一点用都没有,写代码只需要掌握好lambda表达式和class+interface的语义就行了.基本上只有在写编译器和虚拟机的时候才需要管什么是 ...

  4. 架构 Roadmap 笔记分享

    虽然我们的架构不是开源的,不过一些笔记可以愿意公开和大家讨论一下,我相信不少人在和我们干着同样的事情,那不如一块儿交流一下,这样我们可以更快. 这里前端,后端都有,前端我们用的是 avalon js, ...

  5. 自定义Sublime Text的图标

    sublime text很赞,windows上最接近mac逼格的轻量编辑器,对于我这样比较喜欢格调的人来说,简直不二之选啊. 美中不足的是,看久了觉得它的图标似乎不是很上心.现在都流行扁平化了而它还停 ...

  6. 快速Android开发系列网络篇之Volley

    Volley是Google推出的一个网络请求库,已经被放到了Android源码中,地址在这里,先看使用方法 RequestQueue mRequestQueue = Volley.newRequest ...

  7. Android消息处理机制(Handler、Looper、MessageQueue与Message)

    Android是消息驱动的,实现消息驱动有几个要素: 消息的表示:Message 消息队列:MessageQueue 消息循环,用于循环取出消息进行处理:Looper 消息处理,消息循环从消息队列中取 ...

  8. quartz.net 时间表达式----- Cron表达式详解

    序言 Cron表达式:就是用简单的xxoo符号按照一定的规则,就能把各种时间维度表达的淋漓尽致,无所不在其中,然后在用来做任务调度(定时服务)的quart.net中所认知执行,可想而知这是多么的天衣无 ...

  9. Node.js简单操作

    在node中是不支持BOM和DOM操作的,所以像alert().document.write...都是不支持的,可以是console.log() 首先我们来输出"hello world&qu ...

  10. SharePoint2013 Set a custom application page as site welcome page

    本文主要介绍如何添加一个custom application page as site welcome page 1.首先创建一个sharepoint 2013 empty solution, add ...