后端Java工程师常用JavaScript_DOM

JavaScript

  [1]事件

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

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

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

 1 <body>
 2 <button id="btn">按钮</button>
 3 </body>
 4
 5 <script type="text/javascript">
 6     //获取到按钮的对象
 7     var btn = document.getElementById("btn");
 8     //为btn绑定一个单击响应函数
 9     btn.onclick = function(){
10     alert("hello World!");
11     };
12 </script>
13                 

  [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 = 新值
        

    

    

时间: 2024-08-06 08:53:45

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

Java工程师常用Linux命令

本文所列的Linux常用命令包含:文件相关(目录操作,内容查看,查找与比较,压缩与解压),进程管理,网络操作,系统管理,性能监测与优化,Java常用工具多个方面概述. 文件目录基本操作 ls 命令用来显示目标列表,在Linux中是使用率较高的命令.ls命令的输出信息可以进行彩色加亮显示,以分区不同类型的文件. 常用选项: ls(选项)(参数) -a 显示所有档案及目录(ls默认不会列出隐藏文件): -l 所有输出信息用单列格式输出,不输出为多列: --color[=WHEN]:使用不同的颜色高亮

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

<菜鸟程序员成长之路:从技术小白到阿里巴巴Java工程师> 国庆节快乐!一年一度长度排第二的假期终于来了. 难得有十一长假,作者也想要休息几天啦. 不管你是选择出门玩,还是在公司加班,在学校复习,都希望你过好这个长假. 没有出去玩的也不用羡慕别人,利用这段时间充充电,不比去旅游看人头要好的多吗? 最近终于把我的原创文章整理成一本电子书了,趁着国庆开始之前发布出来,希望对你有所帮助. 这本电子书整理了我过去一年时间里在微信公众号[黄小斜]里创作的文章,包括Java学习.求职面试.成长心得.感悟思

Java工程师必备书单

Java开发工程师一般负责后端开发,当然也有专门做Java Web的工程师,但是随着前后端的分离,越来越多的Java工程师需要往大后端方向发展. 今天我们就来介绍一下Java后端开发者的书单. 首先要感谢一下江南白衣大大的后端书架,让我在初学阶段读到了很多好书,直到现在都印象深刻. 我在两年的学习历程中看了很多的书,其中不乏XXX入门到精通,XXX王者归来,XXX指南什么的. 虽然这类书确实毛病很多,但是作为非科班的我来说,当时还是看的津津有味.直到后来我看到一些优秀的书籍,以及白衣哥的书架,我

【转】Java工程师必备书单

江湖路险,你我同行. Java开发工程师一般负责后端开发,当然也有专门做Java Web的工程师,但是随着前后端的分离,越来越多的Java工程师需要往大后端方向发展. 今天我们就来介绍一下Java后端开发者的书单. 首先要感谢一下江南白衣大大的后端书架,让我在初学阶段读到了很多好书,直到现在都印象深刻. 我在两年的学习历程中看了很多的书,其中不乏XXX入门到精通,XXX王者归来,XXX指南什么的. 虽然这类书确实毛病很多,但是作为非科班的我来说,当时还是看的津津有味.直到后来我看到一些优秀的书籍

Java工程师学习指南

java学习指南-四个部分:分别是入门篇,初级篇,中级篇,高级篇 第一步是打好Java基础,掌握Java核心技术,                                               ---入门篇 第二步是掌握Java Web技术栈,能够做一些项目,                                       ---初级篇 第三步是掌握Java方面的进阶技术,包括网络编程.并发编程.JVM等,     ---中级篇 第四步是掌握后端进阶技术,比如分布式.缓

033.[转] Java 工程师成神之路 | 2019正式版

Java 工程师成神之路 | 2019正式版 原创: Hollis Hollis 2月18日 https://mp.weixin.qq.com/s/hlAn6NPR1w-MAwqghX1FPg http://www.hollischuang.com/ 主要版本 更新时间 备注 v1.0 2015-08-01 首次发布 v1.1 2018-03-12 增加新技术知识.完善知识体系 v2.0 2019-02-19 结构调整,更适合从入门到精通:进一步完善知识体系: 新技术补充: 1 基础篇 01 面

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

Java工程师学习指南 入门篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我之前写的文章都是站在Java后端的全局上进行思考和总结的,忽略了很多小白们的感受,而很多朋友都需要更加基础,更加详细的学习路线. 所以,今天我们重新开一个新的专题,分别按照四篇文章讲述Java的学习路线(分别是入门篇,初级篇,中级篇,高级篇),笔者也打算趁此机会,回忆一下自己的Java学习历程.今天我们要讲的是,

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

Java工程师学习指南 完结篇 先声明一点,文章里面不会详细到每一步怎么操作,只会提供大致的思路和方向,给大家以启发,如果真的要一步一步指导操作的话,那至少需要一本书的厚度啦. 因为笔者还只是一名在校生,所以写的内容主要还是针对Java初学者或者接触Java后端不久的朋友,不适用于已经工作多年的Java大佬们.所以本文中的方法不一定适合所有人,如有错误还请谅解. 本期的内容是系列文章的最后一部分内容了.这个系列可能还有很多东西没有说清楚,也有很多内容被忽略了.但是这些内容也确实是笔者结合自己经验

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

Java工程师学习指南 中级篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我写的文章都是站在Java后端的全局上进行思考和总结的,忽略了很多小白们的感受,而很多朋友都需要更加基础,更加详细的学习路线. 所以,今天我们重新开一个新的专题,分别按照四个部分讲述Java的学习路线,笔者也打算趁此机会,回忆一下自己的Java学习历程.今天我们要讲的是第三部分,Java工程师学习指南(中级篇).