知识点总结于崔希凡+王泽(广陵散)的JavaWeb视频教程，侵权请联系删除。

JavaScript

  • JavaScript
    • JavaScript简介
      • JavaScript的组成
    • JavaScript和HTML的结合方式
    • JavaScript的数据类型
    • JavaScript的语句
    • JavaScript运算符
      • 引入知识
      • 实现九九乘法表
    • JavaScript的数组
    • JavaScript的函数（方法）
      • JavaScript的全局变量和局部变量
    • Script标签在页面中的位置
    • JavaScript中的对象
      • String对象
      • Array对象
      • Date对象
      • Math对象
      • JavaScript全局函数（顶层函数）
      • JavaScript模拟函数的重载
    • JavaScript中的BOM对象
    • JavaScript中的DOM对象
      • Document对象
        • Window弹窗案例
        • 在标签末尾添加节点
      • Element对象
      • Node对象
        • 常用方法
        • 父节点、子节点和同辈节点
        • 插入节点
        • 删除节点
        • 替换节点
        • 复制节点
        • 检查子节点和属性
      • Attribute对象（了解）
      • Event对象
    • DHTML
    • innerHTML
      • 动态获取时间

JavaScript

JavaScript简介

Javascript是基于对象和事件驱动的脚本语言，主要应用在客户端。

特点：

  • 交互性（信息的动态交互）
  • 安全性（不可以直接访问本地硬盘）
  • 跨平台性（只要是可以解析js的浏览器都可以执行，和平台无关）

JavaScript与Java的不同（它们之间没有任何关系）：

  • JavaScript是Netscape公司开发的一种脚本语言 ，并且可在所有主要的浏览器中运行；
  • JavaScript 是基于对象的，java是面向对象；
  • JavaScript只需解析就可以执行，而java需要先编译成字节码文件，再执行；
  • JavaScript 是一种弱类型语言，java是强类型语言。
    示例： 在Java中：int i=“10” 这是错误的；
    在JavaScript中：var i=10 , var j=“10” 这是正确的。

JavaScript的组成

  1. ECMAScript：
    ECMA : 欧洲计算机协会，有ECMA组织制定的js的语法，语句…
  2. BOM（browser object model）：浏览器对象模型
    对浏览器窗口进行访问和操作。用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
  3. DOM（document object model）：文档对象模型
    DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）,DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。

JavaScript和HTML的结合方式

HTML 的 <script> 标签用于把 JavaScript 插入 HTML 页面当中。

编写JavaScript 两种方式：内部JS和外部JS：

1.内部JS程序，在HTML源码中：

<script type="text/javascript">         alert(1);
</script>

language 属性不赞成使用，请使用type属性替代

2.外部JS程序，在HTML中引入单独的JS程序（.js后缀名文件）

<script type="text/javascript" src="1.js">alert(1);//注意，该弹窗不会执行
</script>

在引用外部JS的script标签间不能编写JavaScript代码

JavaScript的数据类型

  • JavaScript和Java一样存在两种数据类型：
    原始值 （存储在栈Stack中简单数据），例如 Number、Stirng、Boolean、Null、Underfined 。
    引用值 （存储在堆heap中对象），例如 Object、Function、Array、Date、RegExp 。
    存储在堆（heap）中的对象，也就是说，存储在变量处的值是一个指针（point），指向存储对象的内存处。
  • JavaScript有5种原始数据类型：
    Undefined、Null、Boolean、Number 和 String （常用的为后三种数据类型）
    注意：JavaScript中字符串是原始数据类型
    Undefined：undefined 的字面意思就是未定义的值，这个值的语义是，希望表示一个变量最原始的状态，而非人为操作的结果。
    Null：null 的字面意思是 空值 ，这个值的语义是，希望表示 一个对象被人为的重置为空对象，而非一个变量最原始的状态 。 在内存里的表示就是，栈中的变量没有指向堆中的内存对象
    区分 undefined 和 null：

    • 变量定义了未初始化/访问对象不存在属性 — undefined
    • 访问的对象不存在 — null
  • 定义变量都使用关键字 var
  • 通过typeof运算符，查看变量类型：typeof(变量名称)
    • 所有原始数据类型的变量返回类型都是该变量所属的原始数据类型，但是Null类型返回的是object类型；
      为什么 typeof 运算符对于 null 值会返回 “Object”？
      这实际上是 JavaScript 最初实现中的一个错误，然后被 ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。
      这里需要注意的是：alert(typeof null);
      //输出的是object 。null被认为是对象的占位符，但仍然算做原始数据类型
    • 所有引用类型都是object

JavaScript的语句

  • 判断语句中，条件如果直接写=号，那就是赋值操作；
  • Switch语句和java中的一样
    Java中Switch语句支持的数据类型：byte、short、int 、char、String（在jdk1.7开始支持）
    JS中Switch语句支持任何类型
  • For循环也和java中的一样，但是要注意定义变量时使用var，不要写成java的int。

JavaScript运算符

  • Javascript中小数和整数都是数字类型，所以除法中没有整数，会出现小数；
    示例：在Java中，int i=100;i/1000*1000=0; 因为i为int型，没有小数；
    在JavaScript中，var i=100;i/100*100=100;因为i为数字（Number）类型
  • 字符串与数字相加，是字符串连接，如果相减，字符串直接转换成数字再相减；
    var i=“100”;i+1=“1001”;i-1=99;
  • Boolean类型可以进行运算，false就是0或者null，非0非空是true，默认用1显示；
  • ++ --等于Java一致。
    示例：x+=y —> x=x+y
  • ==和===的区别：
    ==：比较的只是值； //var i=100; i==“100” //true 值为100
    ===：比较的是值和类型；// var i=100; i===“100”; //false 值为100，但是i是数字类型，比较对象是字符串类型

引入知识

直接向页面输出的语句（可以把内容显示在页面上）

  • document.write(“aaa”);
    document.wirte("<hr/>");//可以向页面输出变量，固定值和html代码

实现九九乘法表

document.write("<table border='1' bordercolor='blue'>"); //输出在表格中，可以对结果分隔
//循环行 9
for(var i=1;i<=9;i++) {document.write("<tr>"); //加一行//循环列for(var j=1;j<=i;j++) {document.write("<td>");//运算document.write(j+"*"+i+"="+i*j);document.write("</td>"); //加一列}//document.write("<br/>");document.write("</tr>");
}
document.write("</table>");
  1. document.write里面是双引号，如果设置标签的属性需要使用单引号
    document.write("<table border=‘1’ bordercolor=‘blue’>");
  2. document.write可以输出变量，还可以输出html代码

JavaScript的数组

  • 数组有三种的定义方式

    • var arr = [1,2,4];定义一个数组，包含三个元素1、2、4；
    • var arr = new Array(5);定义一个数组，数组的长度是5；
    • var arr = new Array(1,2,4);定义数组，包含三个元素1、2、4.
  • 数组有属性length;
  • 数组的长度是可变的;
  • 数组可以存放不同的数据类型的数据.

JavaScript的函数（方法）

  • 方式一：
function add(a,b){return a + b;//返回值可有可无，具体要求根据实际需要
}
  • 方式二：匿名函数
var add = function(a,b){return a+b;} //给匿名函数命名
  • 方式三（不推荐使用）：动态函数，使用到了js里面的一个内置对象
    注意关键词Function中F为大写
var add=new Function('a','b','return a+b;');

JavaScript的全局变量和局部变量

  • 全局变量：在script标签里面定义一个变量，这个变量在页面中js部分都可以使用
    在方法外部使用，在方法内部使用，在另外一个script标签使用
  • 局部变量：在方法内部定义一个变量，只能在方法内部使用
    如果在方法的外部调用这个变量，提示出错

Script标签在页面中的位置

  • 建议把script标签放到 </body>后面
    如果现在有这样一个需求：
    在js里面需要获取到input里面的值，如果把script标签放到head里面会出现问题。
    因为html解析是从上到下解析的，由于script标签放在head标签中，直接在里面取input里面的值，因为页面还没有解析到input那一行，肯定取不到。

JavaScript中的对象

JavaScript中包含许多对象，不同对象有种不同的方法。我们难以记住所有的方法，所以需要学会查阅手册。

String对象

  • String对象可以分为两类：一种是关于与html有关的方法，另一种和java中的String相似的方法。

  • 属性：length（字符串的长度）

  • 常用方法：
    1.与HTML相关的方法：

       bold()：加粗fontcolor(): 设置字符串的颜色fontsize(): 设置字体的大小link(): 将字符串显示成超链接，示例： str4.link("hello.html")   sub()/sup(): 下标和上标

    2.与Java相似的方法：

      concat(): 连接字符串示例：var str1 = "abc";var str2 = "dfg";document.write(str1.concat(str2));charAt():返回指定指定位置的字符串示例：var str3 = "abcdefg";document.write(str3.charAt(20)); //字符位置不存在，返回空字符串indexOf()：返回字符串位置示例：var str4 = "poiuyt";document.write(str4.indexOf("w")); //字符不存在，返回-1split()：切分字符串，成数组示例：var str5 = "a-b-c-d";var arr1 = str5.split("-");document.write("length: "+arr1.length);replace()：替换字符串示例：* 传递两个参数：-- 第一个参数是原始字符-- 要替换成的字符* var str6 = "abcd";document.write(str6);document.write("<br/>");document.write(str6.replace("a","Q"));substr()和substring()substr()：从起始索引号提取字符串中指定数目的字符substring()：提取字符串中两个指定的索引号之间的字符示例：* var str7 = "abcdefghuiop";//document.write(str7.substr(5,5));  //fghui  从第五位开始，向后截取五个字符*** 从第几位开始，向后截取几位document.write("<br/>");示例：document.write(str7.substring(3,5)); //de  从第几位开始到第几位结束  [3,5)*** 从第几位开始，到第几位结束，但是不包含最后的那一位

Array对象

创建数组的三种方式：

  1. var arr1 = [1,2,3];
  2. var arr2 = new Array(3); //长度是3
  3. var arr3 = new Array(1,2,3); //数组中的元素是1 2 3

var arr = []; //创建一个空数组

  • 属性：length：查看数组的长度

  • 常用方法：

      1.concat方法： 连接两个或更多的数组，并返回结果。示例：var arr11 = [1,2,3];var arr12 = [4,5,6];document.write(arr11.concat(arr12));2.join()：把数组的所有元素放入一个字符串，并通过指定的分隔符进行分隔。示例：var arr13 = new Array(3);arr13[0] = "a";arr13[1] = "b";arr13[2] = "c";document.write(arr13);document.write("<br/>");document.write(arr13.join("-"));3.push()：向数组的末尾添加一个或更多元素，并返回新的长度。注意：如果添加的是一个数组，那么会把数组当做整个字符串添加，所以长度算为1.示例：   //push方法var arr14 = new Array(3);arr14[0] = "tom";arr14[1] = "lucy";arr14[2] = "jack";document.write("old array: "+arr14);document.write("<br/>");document.write("old length:"+arr14.length);document.write("<br/>");document.write("new length: "+arr14.push("zhangsan"));document.write("<br/>");document.write("new array: "+arr14);---添加数组var arr15 = ["aaa","bbb","ccc"];var arr16 = ["www","qqq"];document.write("old array:"+arr15);document.write("<br/>");document.write("old length:"+arr15.length);document.write("<br/>");document.write("new length:"+arr15.push(arr16));document.write("<br/>");document.write("new array: "+arr15);for(var i=0;i<arr15.length;i++) {alert(arr15[i]);}pop()：删除并返回数组的最后一个元素。示例：var arr17 = ["zhangsan","lisi","wangwu","zhaoliu"];document.write("old array: "+arr17);document.write("<br/>");document.write("return: "+arr17.pop());document.write("<br/>");document.write("new array: "+arr17);reverse():颠倒数组中的元素的顺序。示例：document.write("<hr/>");var arr18 = ["zhangsan1","lisi1","zhaoliu1","niuqi1"];document.write("old array: "+arr18);document.write("<br/>");document.write("new array:"+arr18.reverse());

Date对象

Date 对象用于处理日期和时间。

  • 创建Date对象：var date = new Date();

  • 常用方法：

    在java里面获取当前时间： Date date = new Date();//格式化 //toLocaleString()   //2015年4月17日 11:17:12//从JDK 1.1版开始，由DateFormat.format(Date date)替换。---------------------------------------------------------js里面获取当前时间：var date = new Date();//获取当前时间var date = new Date();document.write(date);  // Fri Apr 17 10:47:46 UTC+0800 2015 转换成习惯的格式：document.write("<hr/>");document.write(date.toLocaleString());获取当前的年方法：getFullYear()：得到当前的年//替代了getYear()document.write("year: "+date.getFullYear());获取当前的月方法：getMonth()：获取当前的月//返回的是 0-11月，如果想要得到准确的值，加1var date1 = date.getMonth()+1;document.write("month: "+date1);获取当前的星期：getDay()：星期,返回的是 (0 ~ 6)外国朋友把星期日作为一周的第一天，星期日返回的是 0，而星期一到星期六 返回的是 1-6document.write("week: "+date.getDay());获取当前的日：getDate()：得到当前的天 1-31document.write("day: "+date.getDate());获取当前的小时getHours()：获取小时document.write("hour: "+date.getHours());获取当前的分钟getMinutes()：分钟document.write("minute: "+date.getMinutes());获取当前的秒getSeconds(): 秒document.write("second: "+date.getSeconds());获取毫秒数getTime()返回的是1970 1 1 至今的毫秒数应用场景：使用毫秒数处理缓存的效果（不有缓存）：http://www.baidu.com?毫秒数

Math对象

Math 对象用于执行数学任务。
注意：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。

Math对象中的方法全部是静态方法，所以不用new直接调用即可。

  • 常用方法：

    ceil(x)：对一个数进行上舍入 14
floor(x)：对一个数进行下舍入
round(x)：把一个数四舍五入为最接近的整数
pow(x,y)：返回 x 的 y 次幂
random()：返回 0 ~ 1 之间的随机数（大于等于0.0，小于1.0）示例：var mm = 10.7;document.write("old : "+mm);document.write("<br/>");document.write("ceil: "+Math.ceil(mm));  //11document.write("<br/>");document.write("floor: "+Math.floor(mm)); //10document.write("<br/>");document.write("round: "+Math.round(mm)); //11//random方法document.write("<hr/>");document.write(Math.random());//得到0-9的随机数document.write("<hr/>");document.write(Math.floor(Math.random()*10));//pow(x,y)  2的5次方document.write("<hr/>");document.write(Math.pow(2,5));

JavaScript全局函数（顶层函数）

全局函数可用于所有内建的 JavaScript 对象。由于不属于任何一个对象，直接写名称使用。

  • 常用的全局函数：

    eval()：执行js代码（如果字符串是一个js代码，使用方法直接执行）
//把javascript 字符串作为脚本代码来执行
示例：var str = "alert('1234');";//alert(str);eval(str);encodeURI() ：对字符进行编码 //进行url跳转时可以整体使用encodeURI
decodeURI()：对字符进行解码
encodeURIComponent() 和 decodeURIComponent()功能与前者类似
//但它们编码的范围有所不用。
//encodeURI()方法不会对下列字符编码：ASCII字母、数字、~!@#$&*()=:/,;?+'
//encodeURIComponent()方法不会对下列字符编码：ASCII字母、数字、~!*()'escape()：对字符串进行编码
//通过对三个函数的分析，我们可以知道：
escape()除了 ASCII 字母、数字和特定的符号外，对传进来的字符串全部进行转义编码，因此如果想对URL编码，最好不要使用此方法。
encodeURI() 用于编码整个URI,因为URI中的合法字符都不会被编码转换。
encodeURIComponent方法在编码单个URIComponent（指请求参 数）应当是最常用的，它可以讲参数中的中文、特殊字符进行转义，而不会影响整个URL。isNaN():判断当前字符串是否是数字
（Is Not a Number）是否不是数字var str2 = "aaaa";alert(isNaN(str2));//如果是数字，返回false//如果不是数字，返回trueparseInt()：类型转换，解析一个字符串并返回一个整数var str3 = "123";document.write(parseInt(str3)+1); //124

JavaScript模拟函数的重载

  • JavaScript的重载是否存在？
    不存在。如果按照Java中的重载写法，只会调用最后一个方法，因为html解析是从上到下解析的。
  • JavaScript可以通过其它方式模拟重载的效果：通过aruguments数组来实现
    Javascrip中每个函数都会有一个Arguments对象实例arguments，它引用着函数的实参，可以用数组下标的方式"[]"引用arguments的元素。

示例：

function add1() {if(arguments.length == 2) {return arguments[0]+arguments[1];//比如传递的是两个参数} else if (arguments.length == 3) {return arguments[0]+arguments[1]+arguments[2];//传递的是三个参数} else if (arguments.length == 4) {return arguments[0]+arguments[1]+arguments[2]+arguments[3];//传递的是四个参数} else {return 0; //传递其他个数的参数}
}

JavaScript中的BOM对象

BOM：浏览器对象模型提供了独立于内容而与浏览器窗口进行交互的对象。由于 BOM 主要用于管理窗口与窗口之间的通讯，因此其核心对象是 window。它允许 JavaScript 与浏览器对话。

BOM包含的对象：

  • Navigator：包含有关浏览器的信息。
    示例：document.write(navigator.appName);//返回浏览器的名称
  • Screen：包含有关客户端显示屏幕的信息。
    示例：document.write(screen.width);//返回显示器屏幕的宽度
  • Location：包含有关当前 URL 的信息。
    示例1：document.write(location.href);//获取到请求的url地址
    示例2：点击按钮跳转到百度
<!doctype html>
<html lang="en"><head><title>Document</title></head><body><input type="button" value="click" onclick="href1();"/></body><script>function href1(){location.href="https://www.baidu.com";}</script>
</html>

注意：单击事件(onclick)的方法名后可以写分号也可以不写

  • History：包含用户（在浏览器窗口中）访问过的 URL

    • back()：加载 history 列表中的前一个 URL。
      调用该方法的效果等价于点击后退按钮或调用 history.go(-1)。
    • forward() ：加载 history 列表中的下一个 URL。
      调用该方法的效果等价于点击前进按钮或调用 history.go(1)。
    • go(number|URL)：加载 history 列表中的某个具体页面。
      URL 参数使用的是要访问的 URL，或 URL 的子串。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。
      示例：相当于单击两次浏览器的后退按钮：history.go(-2)

  • Window：表示浏览器中打开的窗口
    window对象表示一个浏览器窗口或一个框架。在客户端JavaScript中，window对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性当作全局变量来使用。例如，可以只写document，而不必写window.document。

    • Window 对象是 JavaScript 层级中的顶层对象。

    • Window 对象代表一个浏览器窗口或一个框架。

    • 常用方法：
      alert("输入的信息")：显示带有一段消息和一个确认按钮的警告框。

      confirm("输入的信息")：显示带有一段消息以及确认按钮和取消按钮的对话框
      //如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。
      //在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 confirm() 时，将暂停对 JavaScript代码的执行，在用户作出响应之前，不会执行下一条语句。

      prompt(text,defaultText)：显示可提示用户输入的对话框
      //如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本。
      //在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 prompt() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。

      open(URL,name,features,replace) ：打开一个新的窗口
      //URL 一个可选的字符串，声明了要在新窗口中显示的文档的 URL。
      //name 新窗口的名称，如果名称存在则打开已存在的窗口并忽略features
      //features 一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。
      //replace 一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。
      重要事项：请不要混淆方法 Window.open() 与方法 Document.open()，这两者的功能完全不同。为了使代码清楚明白，请使用 Window.open()，而不要使用 open()。

      close()：关闭浏览器窗口

      setInterval("js代码",毫秒数)：按照指定的周期（以毫秒计）来调用函数或计算表达式
      //返回值：一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
      setTimeout("js代码（可以是函数名）",毫秒数) ：在指定的毫秒数后调用函数或计算表达式。
      //表示在毫秒数之后执行，但是只会执行一次

      clearInterval("setInterval的返回值") ：方法可取消由 setInterval() 设置的 timeout
      clearTimeout("setTimeout的返回值") ：取消由 setTimeout() 方法设置的 timeout
      //clearInterval() 和 clearTimeout() 方法的参数必须是由 setInterval() 和 setTimeout() 返回的 ID 值。

JavaScript中的DOM对象

DOM（document object model）： 文档对象模型

  • 文档指超文本文档（超文本标记文档）：html、xml
  • 对象指属性和方法
  • 模型指使用属性和方法操作超文本标记型文档

即可以使用JavaScript里的dom里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作。

  • DOM用来将标记型文档封装成对象，并将标记型文档中的所有内容（标签、文本、属性）都封装成对象。
  • 封装成对象的目的是为了更方便的操作这些文档及其文档中的所有内容。因为对象包含属性和行为。
  • 标记型文档包含标签、属性、标签中封装的数据。只要是标记型文档，DOM可以将任何HTML或XML文档描绘成一个有多层节点构成的结构。
    常见的标记型文档包括：HTML XML
  • DOM要操作标记型文档必须先进行解析
    DOM规范将网页中的HTML文档抽象为内存中的节点对象树(DOM Tree)。树中的每一个节点对象对应HTML文档中的一个元素。
    DOM的解析过程：
    document对象：整个文档
    element对象：标签对象
    属性对象：标签属性
    文本对象：标签中的文本内容
    Node节点对象：这个对象是这些对象的父对象（如果在对象里面找不到想要的方法，这个时候到Node对象里面去找）

Document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

常用属性：

all[]：提供对文档中所有 HTML 元素的访问  FF不支持
forms[]：返回对文档中所有 Form 对象引用
body：提供对 <body> 元素的直接访问

常用方法：

write()：向文档写 HTML 表达式 或 JavaScript 代码getElementById()：返回对拥有指定 id 的第一个对象的引用
getElementsByName()：返回带有指定名称的对象集合
getElementsByTagName()：返回带有指定标签名的对象集合
//要注意s，没有s代表一个，有s代表多个，返回的是数组（就算只有一个元素也返回数组）

注意：存在一个标签，且这个标签只能使用name获取到对象，但是getElementsByName返回的是一个数组，但是现在只有一个元素，这个时候不需要遍历（for循环遍历数组），而是可以直接通过指定数组的下标获取到值：

//通过name得到input标签
var inputs2 = document.getElementsByName("name11")[0];
alert(inputs2.value);var inputss = document.getElementsByTagName("input")[0];
alert(inputss.value);

Window弹窗案例

创建一个页面：有两个输入项和一个按钮，按钮上面有一个事件：弹出一个新窗口 open。

创践弹出页面：里面有一个表格，每一行有一个按钮和编号和姓名，按钮上有一个事件：把当前的编号和姓名，赋值到第一个页面相应的位置。

主页面：

<html><head><title>HTML示例</title></head><body>编号：<input type="text" id="numid"/><br/>姓名：<input type="text" id="nameid"/><br/><input type="button" value="选择" onclick="open1()"/><script type="text/javascript">//实现弹出窗口的方法function open1() {//open方法window.open("user.html","","width=250,height=150");}</script></body>
</html>

弹窗页面：

<html><head><title>HTML示例</title></head><body><table border="1" bordercolor="blue"><tr><td>操作</td><td>编号</td><td>姓名</td></tr><tr><td><input type="button" value="选择" onclick="s1('100','东方不败');"/></td><td>100</td><td>东方不败</td></tr><tr><td><input type="button" value="选择" onclick="s1('101','岳不群');"/></td><td>101</td><td>岳不群</td></tr><tr><td><input type="button" value="选择" onclick="s1('102','林平之');"/></td><td>102</td><td>林平之</td></tr></table><script type="text/javascript">//实现s1方法function s1(num1,name1) {//需要把num1和name1赋值到window页面//跨页面的操作  opener：得到创建这个窗口的窗口 得到window页面var pwin = window.opener; //得到window页面pwin.document.getElementById("numid").value = num1;pwin.document.getElementById("nameid").value = name1;//关闭窗口window.close();}</script></body>
</html>

这里用到了Window对象的opener属性，代表返回一个创建当前窗口的Window对象的引用。这样就可以直接调用创建当前窗口的窗口的属性。

但是做这个案例会有一个问题：创建的窗口无法传递值到input：

  • 由于我们现在访问的是本地文件，js安全性，例如谷歌浏览器安全级别很高，不允许访问本地文件
  • 在实际开发中，没有这样的问题，实际中不可能访问本地的文件

在标签末尾添加节点

示例：在ul标签中添加一个li标签
第一步：获取标签：getElementById
第二步：创建li标签：document.createElement(“标签名称”)方法
第三步：创建文本：document.createTextNode(“文本内容”);
第四步：把文本添加到li下面，使用document对象的 appendChild 方法
第五步：把里添加到ul末尾：使用 appendChild方法

<html><head><title>HTML示例</title></head><body><ul id="ulid"><li>111</li><li>222</li><li>333</li><li>444</li></ul><br/><input type="button" value="add" onclick="add1();"/><script type="text/javascript">//在末尾添加节点function add1() {//获取到ul标签var ul1 = document.getElementById("ulid");//创建标签var li1 = document.createElement("li");//创建文本var tex1 = document.createTextNode("5555");//把文本加入到li下面li1.appendChild(tex1);//把li加入到ul下面ul1.appendChild(li1);}</script></body>
</html>

Element对象

在 HTML DOM 中，Element 对象表示 HTML 元素。
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

  • element.getElementsByTagName()：返回拥有指定标签名的所有子元素的集合。
  • 操纵 Element 对象的属性
    • 获取属性：getAttitude(name)方法。
    • 设置属性：setAttribute(name,value)方法。
    • 删除属性：removeAttribute(name)方法。
      注意：在有些浏览器中，value属性是不能删除的
var input1 = document.getElementById("inputid");
//alert(input1.value);
alert(input1.getAttribute("value"));

区别：getAttribute可以获得类似class等关键字样式名字的属性，而直接通过标签对象无法获得。

Node对象

DOM的标准规范中提供了Node对象，该对象主要提供了用于解析DOM节点树结构的属性和方法。 DOM树结构主要是依靠节点进行解析，称为DOM节点树结构。Node对象是解析DOM节点树结构的主要入口。 Node对象提供的属性和方法，可以实现遍历节点、插入节点和替换节点等操作。

Node类型：Node接口是由DOM的所有节点类型实现的，Node接口在javascript中是作为Node类型实现的，javascript中所有节点类型都继承自Node类型，因此所有节点类型都有相同的基本属性和方法。

图例：

常用方法


示例：

<html><head><title>HTML示例</title></head><body><span id="spanid">哈哈呵呵</span><script type="text/javascript">//获取标签对象var span1 = document.getElementById("spanid");//alert(span1.nodeType);   //  1///alert(span1.nodeName);   // SPAN///alert(span1.nodeValue);  // null//属性var id1 = span1.getAttributeNode("id");//alert(id1.nodeType);  // 2//alert(id1.nodeName);  // id//alert(id1.nodeValue); // spanid//获取文本var text1 = span1.firstChild;//span标签只有一个子节点，所以也可以用span1.lastChildalert(text1.nodeType);  //  3alert(text1.nodeName);  // #textalert(text1.nodeValue); // 内容</script></body>
</html>

父节点、子节点和同辈节点

<html><head><title>HTML示例</title></head><body><ul id="ulid"><li id="li1">qqqqq</li><li id="li2">wwww</li><li id="li3">yyyyyy</li><li id="li4">test1111</li></ul><script type="text/javascript">//得到li1/*var li1 = document.getElementById("li1");//得到ulvar ul1 = li1.parentNode;alert(ul1.id);*///获取ul的第一个子节点 id=li1//得到ulvar ul1 = document.getElementById("ulid");//第一个子节点/*var li1 = ul1.firstChild;alert(li1.id);*///得到最后一个子节点/*var li4 = ul1.lastChild;alert(li4.id);*///获取li的id是li3的上一个和下一个兄弟节点var li3 = document.getElementById("li3");//alert(li3.nextSibling.id);alert(li3.previousSibling.id);</script></body>
</html>

插入节点

  • appendChild方法：添加子节点到指定节点的末尾

    • 特点：类似于剪切粘贴的效果，相当于将子节点移动
  • insertBefore(newNode,oldNode)方法：在某个节点之前插入一个新的节点
    • 两个参数：要插入的节点，在指定节点之前插入
    • 注意：调用该方法的节点应当是两个参数节点的父节点，且没有insertAfter()方法

appendChild：

div1中的标签会消失

InsertBefore：

删除节点

  • removeChild方法：删除节点

    • 只能通过父节点删除，不能自己删除自己

示例：删除杨玉环

<html><head><title>HTML示例</title></head><body><ul id="ulid31"><li id="li21">西施</li><li id="li22">王昭君</li><li id="li23">貂蝉</li><li id="li24">杨玉环</li></ul><input type="button" value="remove" onclick="remove1();"/><script type="text/javascript">//删除<li id="li24">杨玉环</li>function remove1() {/*1、获取到li24标签2、获取父节点ul标签3、执行删除（通过父节点删除）*///获取li标签var li24 = document.getElementById("li24");//获取父节点 两种方式  1、通过id获取 ； 2、通过属性 parentNode获取var ul31 = document.getElementById("ulid31");//删除（通过父节点）ul31.removeChild(li24);}</script></body>
</html>

替换节点

  • replaceChild(newNode,oldNode): 替换节点

    • 通过父节点替换，不能自己替换自己

示例：将青翼蝠王替换成张无忌

<html><head><title>HTML示例</title></head><body><ul id="ulid41"><li id="li31">紫衫龙王</li><li id="li32">白眉鹰王</li><li id="li33">金毛狮王</li><li id="li34">青翼蝠王</li></ul><input type="button" value="replace" onclick="replace1();"/><script type="text/javascript">//<li id="li34">青翼蝠王</li>替换  <li>张无忌</li>function replace1() {/*1、获取到li342、创建标签li3、创建文本4、把文本添加到li下面5、获取ul标签（父节点）6、执行替换操作 （replaceChild(newNode,oldNode)）*///获取li34var li34 = document.getElementById("li34");//创建livar li35 = document.createElement("li");//创建文本var text35 = document.createTextNode("张无忌");//把文本添加到li下面li35.appendChild(text35);//获取ul父节点var ul41 = document.getElementById("ulid41");//替换节点ul41.replaceChild(li35,li34);}</script></body>
</html>

复制节点

  • cloneNode(boolean): 复制节点，其中，参数boolean是判断是否复制子节点。

    • 通过父节点复制，不能自己复制自己

示例：把ul列表复制到另外一个div里面

<html><head><title>HTML示例</title></head><body><ul id="ulid41"><li id="li31">紫衫龙王</li><li id="li32">白眉鹰王</li><li id="li33">金毛狮王</li><li id="li34">青翼蝠王</li></ul><div id="divv"> </div><input type="button" value="copy" onclick="copy1();"/><script type="text/javascript">function copy1() {//把ul列表复制到另外一个div里面/*1、获取到ul2、执行复制方法 cloneNode方法复制 true3、把复制之后的内容放到div里面去** 获取到div** appendChild方法*///获取ulvar ul41 = document.getElementById("ulid41");//复制ul，放到类似剪切板里面var ulcopy = ul41.cloneNode(true)//获取到divvar divv = document.getElementById("divv");//把副本放到div里面去divv.appendChild(ulcopy);}</script></body>
</html>

将ul的内容复制，这样appendChild就不会方法删除原来的的ul

检查子节点和属性

  • 查看是否存在子节点： hasChildNodes()
  • 查看是否存在属性：hasAttributes()
  • 即使节点中没有定义属性，其attributes属性仍然有效的，而且长度值为0。同样节点中的childNodes属性也是如此。
  • 当你想知道某个节点是否包含子节点和属性时，可以使用hasChildNodes()和hasAttributes()方法。但是，如果还想知道该节点中包含多少子节点和属性的话，仍要使用attributes和childNodes属性。
  • 在IE浏览器中，不存在hasAttributes()方法！

Attribute对象（了解）

在 HTML DOM 中，attribute 对象表示 HTML 属性。

  • 节点属性attributes是Node接口定义的属性。

  • 节点属性attributes就是节点（特别是元素节点）的属性。

  • 事实上，attributes中包含的是一个节点的所有属性的集合。

  • attributes.getNameItem()和Element对象的getAttribute()方法类似，返回指定名称的属性节点的值

      //返回 button 元素的 onclick 属性值：var btn=document.getElementsByTagName("BUTTON")[0];btn.attributes.getNamedItem("onclick").textContent; //结果：myFunction()

Event对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

以下是部分事件示例：

  • 鼠标移动事件
<html><script language="JavaScript">function mouseovertest(){document.getElementById("info").value = "鼠标在输入框上";}function mouseouttest(){document.getElementById("info").value= "鼠标在输入框外";}</script><body><input type="text" id="info" onmouseover="mouseovertest();" onmouseout="mouseouttest();"/></body>
</html>
  • 鼠标点击事件
<html><script language="JavaScript">function addFile(){var file = document.createElement('input');file.setAttribute('id', 'temp_file');file.setAttribute('type', 'file');document.body.appendChild(file);
}</script><body><form action="uploadFile" method="post"><input type="button" value="添加附件" onclick="addFile();"></form></body>
</html>
  • 加载与卸载事件
<html><head><script Language="JavaScript">function loadform(){alert("这是一个自动装载例子!");}function unloadform(){   alert("这是一个卸载例子!");}</script></head><body onload=“loadform()” onbeforeunload=“unloadform()”> <a href=“http://www.itcast.cn”>传智播客</a></body>
</html>
  • 聚焦与离焦事件
<html><script language="JavaScript">function checkDate(){var date1 = document. getElementById("testdate").value;if(date1.match("^\\d{8}$")==null){alert("wrong");}//正则表达式else{alert("right");}}</script><body>请输入一个八位数字<input type="text" id="testdate" onblur="checkDate();"></body>
</html>
  • 键盘事件
<html><script language="JavaScript">function submitform(e){if(e.keyCode){if (e.keyCode == 13) {document.forms(0).submit();}  }else{if (e.which == 13) {document.forms(0).submit();}  }}</script><body>没有按钮的表单，用回车键提交<form action="login"><input type="text" name="username" onkeypress="submitform(event);"/></form></body>
</html>
  • 提交与重置事件
<html><script language="JavaScript">function isDelete(){var isdelete= window.confirm();if(isdelete){return true;}else{return false;}}</script><body><form action="delete" onsubmit="return isDelete();">姓名：小明  年龄：23  学校：清华大学<input type="submit" value="删除"></form></body>
</html>
  • 选择与改变事件

    • 范例代码，表单联动
<html>
<script src="content.js" language="javascript"></script><body><select id="provice" onchange="changecontent();"><option value="0">请选择省份</option><option value="1">河北</option><option value="2">山东</option></select><select id="city"></select></body>
</html>

DHTML

DHTML 指动态 HTML（Dynamic HTML）。它不是一门语言，是多项技术综合体的简称。
包括：html，css，dom，javascript

这四种语言的职责：

  1. Html：负责提供标签，封装数据，这样便于操作数据。
  2. Css：负责提供样式，对标签中的数据进行样式定义。
  3. Dom：负责将标签及其内容解析，封装成对象，对象中具有属性和行为。
  4. Javascript：负责提供程序设计语言，对页面中的对象进行逻辑操作。

要注意的是，DOM是属于Javascript，在这里Javascript单指ECMAScript。

如果想要获取标签下的子标签，可以使用属性 childNodes，但是这个属性兼容性很差，不同浏览器返回的节点数不同。这是因为childNodes属性返回的数组中包含着所有类型的节点，所有的属性节点和文本节点也包含在其中。

DOM中一般常见的节点类型：
1、元素节点
DOM中的原子都是元素节点，比如<body><table><div>等等。
如果把Web上的文档比作一座大厦，则元素就是构成这块大厦的砖石。一个文档是由N个元素组成的。元素可包含其他元素。
2、文本节点
任意的文字、空格、换行、空白行都算是文本节点。
3、属性节点
属性节点，故名思议就是其他节点的属性。例如所有的元素都有title属性，在title='title1’就是一个属性节点。
4、注释节点

解决办法：使用Document对象的getElementsByTagName方法

<html><head><title>HTML示例</title><style type="text/css"></style></head><body><ul id="ulid1"><li>aaaaaa</li><li>bbbbbb</li><li>cccccc</li></ul><script type="text/javascript">//获取到ul下面的所有子标签（子元素）//获取ul标签var ul11 = document.getElementById("ulid1");//获取ul下面的子标签//var lis = ul11.childNodes;//alert(lis.length);  //返回7var lis = ul11.getElementsByTagName("li");alert(lis.length);  //返回3</script></body>
</html>

innerHTML

对于innerHTML 属性，几乎所有的元素都有innerHTML属性，它是一个字符串，用来设置或获取位于对象起始和结束标签内的HTML。（获取HTML当前标签的起始和结束里面的内容）

  • 这个属性不是dom的组成部分，但是大多数浏览器都支持的属性

    • 第一个作用：获取文本内容

        //获取span标签的内容var span1 = document.getElementById("sid");alert(span1.innerHTML);

    • 第二个作用：向标签里面设置内容（可以是html代码）

        //向div里面设置内容 "<h1>AAAAA</h1>"//获取到divvar div11 = document.getElementById("div11");//设置内容div11.innerHTML = "<h1>AAAAA</h1>";

动态获取时间

<html><head><title>HTML示例</title></head><body><div id="div1"></div><script type="text/javascript">function getTime1(){var div1=document.getElementById("div1");div1.innerHTML=(new Date().toLocaleString()); }setInterval("getTime1();",1000);</script></body>
</html>

JavaWeb学习笔记（JavaScript）相关推荐

  1. javaWeb学习笔记1—前端三件套 HTML CSS JavaScript

    学习视频地址 javaWeb学习笔记-前端三件套 HTML CSS JavaScript 1.字体标签 2. 字符实体 3.标题标签 4.超链接 5.列表标签 6. img标签 路径 7.表格 8.i ...

  2. B站狂神说JavaWeb学习笔记

    JavaWeb学习笔记(根据b站狂神说java编写) 1.基本概念 1.1 前言 静态Web: 提供给所有人看数据不会发生变化! HTML,CSS 动态Web: 有数据交互,登录账号密码,网站访问人数 ...

  3. JavaWeb学习笔记（5）-B站尚硅谷

    文章目录 十四.书城项目第三阶段--优化 (1)页面jsp动态化 (2)抽取页面中相同的内容 A.登录成功的菜单 B.base.css.jQuery标签 C.每个页面的页脚 D.manager模块的菜 ...

  4. javaweb学习笔记2(jquery的使用，以及常用的方法，选择器，过滤器)

    javaweb学习笔记2 javascript正则表达式 regfxp对象 方式1: var putt=new RegExp("e");//表示要求字符串中必须包含字符串evar ...

  5. JavaWeb学习笔记（软件系统体系结构、Tomcat、Web应用、HTTP协议）

    JavaWeb学习笔记 JavaWeb学习笔记 软件系统体系结构 常见软件系统体系结构C/S.B/S Web资源 Web服务器 Tomcat Tomcat概述 安装.启动.配置Tomcat Web应用 ...

  6. JavaWeb学习笔记（十）--HttpServletRequest

    1. HttpServletRequest简介 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中 2. Ht ...

  7. JavaWeb学习笔记-目录（待完成）

    JavaWeb学习笔记-目录(待完成) 01-基础加强(注解+反射) 02-mysql基础 03-mysql约束 04-mysql多表事务 05-jdbc 06-jdbc连接池JDBCTemplate ...

  8. 学习笔记 JavaScript 动画

    学习笔记 JavaScript 动画 结果 代码里用到的图片 <html><head><style>#imageDiv {height: 100px;width: ...

  9. 学习笔记 JavaScript 动画 加速

    学习笔记 JavaScript 动画 加速 效果 代码中用到的图片 <html><head><style>#imageDiv {position: absolute ...

  10. JavaWeb学习笔记2 —— Web服务器简介

    JavaWeb学习笔记2 -- Web服务器简介 参考教程B站狂神https://www.bilibili.com/video/BV12J411M7Sj 相关技术 ASP: 微软:国内最早流行的就是A ...

最新文章

  1. 【OpenCV 4开发详解】轮廓面积与长度
  2. 做技术的，年龄大了你慌吗？
  3. 郁闷的时候看看这头驴，改变你的心态！
  4. web后端轻量级框架flask基础调用程序模板
  5. 为什么一些机器学习模型需要对数据进行归一化？——1）归一化后加快了梯度下降求最优解的速度；2）归一化有可能提高精度...
  6. 多项式求和x+(x^2)/2!+(x^3)/3!+...
  7. 完美图解教程 Linux环境VNC服务安装、配置与使用
  8. 上市之后，青云存储平台QingStor也要“进军”云原生
  9. Android Studio 代码混淆
  10. leetcode力扣617. 合并二叉树
  11. 机房收费系统个人重构版：暮然回首，灯火阑珊
  12. 七夕祝福网页制作_啥？七夕过了你还不知道自己为啥单身？？
  13. 16 ValidationSummary
  14. 计算机之父ppt,24计算机之父童年的故事.ppt
  15. 【ZYNQ】从入门到秃头10 DDS增强版实验ADDA测试（基于ALINX 7020 AN108）
  16. 模拟 nbut1225 NEW RDSP MODE I
  17. WDK_基于Fabric的区块链系统开发
  18. 用gulp实现代码压缩、图片压缩和项目打包
  19. 【Java】【Lambda】东京奥运奖牌排序
  20. 阿里云mysql端口管理_怎样更改数据库端口号

热门文章

  1. cygwin和mingw的比较
  2. Autofill安装使用
  3. Could not load the Qt platform plugin “xcb“ 问题解决
  4. 数据挖掘十大算法--PageRank
  5. bilibili视频爬取报错
  6. NLP之句子相似度之入门篇
  7. [杂谈]亿元大奖为何总落陌生客
  8. MySQL inet aton函数_MySQL INET_ATON()用法及代码示例
  9. linux查看进程状态
  10. 牛客网数字化招聘解决方案，支持10万人同时在线笔试