后端Java工程师常用JavaScript_DOM
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的更多相关文章
- Java工程师常用Linux命令
本文所列的Linux常用命令包含:文件相关(目录操作,内容查看,查找与比较,压缩与解压),进程管理,网络操作,系统管理,性能监测与优化,Java常用工具多个方面概述. 文件目录基本操作 ls 命令用来 ...
- 我最推荐的一张Java后端学习路线图，Java工程师必备
前言 学习路线图往往是学习一样技术的入门指南.网上搜到的Java学习路线图也是一抓一大把. 今天我只选一张图,仅此一图,足以包罗Java后端技术的知识点.所谓不求最好,但求最全,学习Java后端的同学 ...
- 《菜鸟程序员成长之路：从技术小白到阿里巴巴Java工程师》
<菜鸟程序员成长之路:从技术小白到阿里巴巴Java工程师> 国庆节快乐!一年一度长度排第二的假期终于来了. 难得有十一长假,作者也想要休息几天啦. 不管你是选择出门玩,还是在公司加班,在学 ...
- 原创电子书《菜鸟程序员成长之路：从技术小白到阿里巴巴Java工程师》
<菜鸟程序员成长之路:从技术小白到阿里巴巴Java工程师> 国庆节快乐!一年一度长度排第二的假期终于来了. 难得有十一长假,作者也想要休息几天啦. 不管你是选择出门玩,还是在公司加班,在学 ...
- Java工程师学习指南（入门篇）
Java工程师学习指南 入门篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我之前写的文章都 ...
- Java工程师学习指南（初级篇）
Java工程师学习指南 初级篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我之前写的文章都 ...
- Java工程师学习指南（中级篇）
Java工程师学习指南 中级篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我写的文章都是站 ...
- Java工程师学习指南（完结篇）
Java工程师学习指南 完结篇 先声明一点,文章里面不会详细到每一步怎么操作,只会提供大致的思路和方向,给大家以启发,如果真的要一步一步指导操作的话,那至少需要一本书的厚度啦. 因为笔者还只是一名在校 ...
- Java后端开发工程师是否该转大数据开发？
撰写我对java后端开发工程师选择方向的想法,写给在java后端选择转方向的人 背景 看到一些java开发工程师,对java后端薪酬太悲观了.认为换去大数据领域就会高工资.觉得java后端没有前途.我 ...
随机推荐
- 基于jQuery左右滑动切换特效 附源码
分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效. 效果图如下: 废话不多说,代码奉上! html代码: <div ...
- 浅析SQL查询语句未显式指定排序方式，无法保证同样的查询每次排序结果都一致的原因
本文出处:http://www.cnblogs.com/wy123/p/6189100.html 标题有点拗口,来源于一个开发人员遇到的实际问题 先抛出问题:一个查询没有明确指定排序方式,那么,第二次 ...
- AutoMapper(五)
返回总目录 Dynamic和ExpandoObject映射 AutoMapper不用任何配置就可以从dynamic(动态)对象映射或映射到dynamic对象. namespace FifthAutoM ...
- Lesson 22 A glass envolops
Text My daughter, Jane, never dreamed of receiving a letter from a girl of her own age in Holland. L ...
- 免费的精品: Productivity Power Tools 动画演示
Productivity Power Tools 是微软官方推出的 Visual Studio 扩展,被用以提高开发人员生产率.它的出现一定程度上弥补和完善了 Visual Studio 自身的不足, ...
- 【初学者指南】在ASP.NET MVC 5中创建GridView
介绍 在这篇文章中,我们将会学习如何在 ASP.NET MVC 中创建一个 gridview,就像 ASP.NET Web 表单中的 gridview 一样.服务器端和客户端有许多可用的第三方库,这些 ...
- ABP源码分析四：Configuration
核心模块的配置 Configuration是ABP中设计比较巧妙的地方.其通过AbpStartupConfiguration,Castle的依赖注入,Dictionary对象和扩展方法很巧妙的实现了配 ...
- innerHTML和innerText的区别
以<p id="example">welcome to <strong>JavaScript</strong> !!!</p>为例: ...
- Spring的前期配置
1创建一个java项目,鼠标单击项目右键新建一个名为lib的文件夹 2在lib文件夹中考入Spring需要的配置文件(俗称jar包) 3 按Shift选中这些jar右键添加至构建路径 4选中src目录 ...
- [Java Collection]List分组之简单应用.
前言 今天有一个新需求, 是对一个List进行分组, 于是便百度到一些可用的代码以及我们项目使用的一些tools, 在这里总结下方便以后查阅. 一: 需求 现在我们一个数据库表t_series_val ...