javascript：与html结合方式、类型和变量、语法、Bom和Dom对象等

RenSLei

已于 2023-05-29 11:12:48 修改

阅读量735

点赞数 2

分类专栏： javaweb JavaScript Html 文章标签： javascript html java

于 2018-06-25 22:54:33 首次发布

本文链接：https://blog.csdn.net/renshilei123/article/details/80767248

版权

javaweb 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

Html

2 篇文章 0 订阅

订阅专栏

1、JavaScript的简介

JavaScript是基于对象和事件驱动的语言，应用于客户端（浏览器）。

基于对象:

- 提供了很多的对象，可以直接拿来使用

事件驱动：

- html做静态的效果，JavaScript做动态的效果

客户端:专门指的是浏览器

*JavaScript的特点：
(1) 交互性
- 信息的动态交互
(2) 安全性
- JavaScript不能访问本地的磁盘的文件
(3) 跨平台性

- 只要安装了支持js的浏览器，都可以运行

*JavaScript和java的区别
(1) java是Sun公司，现在是oracle；JavaScript是网景公司
(2) JavaScript 是基于对象，java是面向对象
(3) java是强类型语言，JavaScript是弱类型的语言
- 比如java里 int i=10；不能int i = "10";
- 而JavaScript里面装什么都可以
(4) JavaScript只需要解析就可以执行，而java要先编译再执行。
*JavaScript的组成
三部分组成：
(1) ECMAScript
- ECMA:欧洲计算机协会
- 有ECMA组织制定的js的语法，语句......
(2)BOM
- broswer object model：浏览器对象模型
(3) DOM

- Document object model:文档对象模型

2、JavaScript和html的结合方式（两种）

第一种

- 使用一个标签<script type="text/Javascript">js代码</script>
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
alert("这是个字符串弹窗");
</script>
</body>

</html>

第二种

- 使用script标签引入一个js的文件
-创建一个js文件
-<script type="text/javascript" src="引入的js文件的路径">
这种方式就不要在这里写js代码了，因为不会执行
</script>
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="j.js">
// 这里不再写js代码
</script>
</body>
</html>

3、js的原始类型和声明变量

java的基本数据类型：byte short int float long double boolean char

js的原始类型（五个）
- String：字符串
- var str="abc";
- number：数字类型
- var n=4;
- boolean:布尔类型
- var flag=true;
- null
- 值获取对象的引用，null表示对象的引用为空，所有的对象的引用也是object
- undefined
- 定义一个变量，没有赋值
- var s;

- typeof(变量名);查看当前变量的数据类型

示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"></style>
</head>
<body>
<script type="text/javascript">
//定义一个字符串
var str="afjsdk";
alert(typeof(str));//页面弹出String

//定义数字
var n=35;

//定义boolean
var flag=true;

</script>
</body>
</html>

4、js的语句

- java里面的语句
- if
- switch
- for while do-while

- js的语句
-if 判断语句
-switch 语句
-java里面支持的数据类型。支持String吗？在jdk1.7才出现
-js里面都支持，switch和java里的一样
如：
var b = 5;
switch(b){
case 3:
break;
case 6:
break;
default:
alert("aaaa");
}
- 循环语句 for while
-while：
示例：
var n=5;
while(n>1){
alert(n);
n--;
}
-for:
示例：
for(var n = 0; n < 3; n++){
alert(n);
}

5、js的运算符

5.1 一般情况和java的基本的运算符没有区别

5.2 不一样的地方：

5.2.1 js里面不区别整数和小数

比如java里：int i = 123;
i/100的结果是12
而js里面就会是12.3

5.2.2 对于java：String str = "123";

str+1的结果是字符串1231；而var s = "123"， s+1的结果是字符串1231；

str-1在java里出现语法错误, 而s-1是真正的相减的运算得到122

但是如果是var s ="abc"，执行s-1会出现NaN的错误, 因为"abc"里面不是数字

-即js对于字符串的加碱运算是：
**相加是字符串的连接

**相减是真正的减法运算

5.2.3 boolean 类型也可以操作

true==1

false==0

5.2.4 ==和===的区别

==比较的是值
===比较的是值和类型

5.2.5 引入知识

直接向页面输出语句（可以把内容显示在页面上）
document.write("html代码、固定值、变量");

6、99乘法表的练习

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">

</style>
</head>
<body>
<script type="text/javascript">
//循环行9
document.write("<table border='1' bordercolor='blue'>");
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("</tr>");
}
document.write("</table>");
</script>
</body>
</html>

7、js的数组

js数组的定义方式：

1）、var arr= [1,2,3,"abc",true];

2)、使用内置的对象Array对象
var arr1 = new Array(5);//定义一个长度为5的数组
arr1[0]="1";
arr1[1]="a";
arr1[2]="3";
3)、使用内置对象Array
var arr2 = new Array(6,7,8);

数组里面有一个属性：length：获取数组的长度

数组可以存放不同的数据类型

8、js的函数

*在java里面定义方法：
public void 方法名(参数列表){
方法体
}
如：
public int add(){
int sum = a+b;
return sum;
}
*在js里面有三种定义函数的方式：

1)、使用一个关键字 function
function 方法名(参数列表){
方法体；
返回值可有可无；
}

如何调用：方法名(参数列表);

注意：参数列表直接写参数名称,不需要写var 。如fun(a,b){}
如果设置了返回值，则调用后的结果为返回值，但是不会自动显示在页面，需要其他语句才行

2)、匿名函数：没有名字，需要调用的时候给这个函数起一个名

var add function (参数列表){
方法体和返回值；
}
调用：add(参数列表);
3)、使用内置对象 Function(用的很少)

var add = new Function("参数列表","方法体和返回值");

9、js的全局变量和局部变量

**全局变量：在script标签里面定义的变量，这个变量在页面的js中都可以使用
都可以使用：在方法内部，在方法外部，在其他script标签中都可以
**局部变量：在方法的内部定义一个变量，只能在这个方法中使用
若再方法外部使用提示出错
** ie浏览器自带了调试工具，IE8及其以上的版本中，键盘上F12，在页面下方出现一个条，选择控制台即可看到错误信息

10、script标签应该放的位置

建议将script代码放在body 标签的后面，因为如果放前面，可能会出现下面的情况：

*示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
// 在这里写上获取输入项的value值，就会出错，因为这里还没有执行到输入项
var input1 = document.getElementById("1");
alert(input1.value);
</script>
</head>
<body>
<input type="text" id="1" value="name1">;
</body>
</html>

11、js的重载

为什么没有重载？

二、JavaScript的对象

1、js的String对象

**创建String对象
var str = "abc";
**方法和属性
- 属性：
就需要知道length就行，如str.length;返回字符串长度
- 方法：

（1）String HTML 包装方法：

str.bold();加粗
str.fontcolor("red");设置字符串的颜色
str.fontsize(1-7);设置字符串的字体大小
等
如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>String HTML 包装方法</title>

</head>

<body>

（2）与java相关的方法

- concat方法：连接字符串；
如：str.concat(str1,str2,...)连接str str1 str2

- charAt():
var str="HELLO WORLD";
var n=str.charAt(str.length-1);

得到D

- indexOf()返回字符串首次出现的位置

var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");
得到：13

var str="Hello world, welcome to the universe.";
var n=str.indexOf("e",5);
得到：14

- split("")切分字符串为字符串数组
如：
var str="How are you doing today?";
var n=str.split(" ");
得到：How,are,you,doing,today?

var str="How are you doing today?";
var n=str.split("");
得到：H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?

var str="How are you doing today?";
var n=str.split(" ",3);
得到：How,are,you

- replace()替换字符串
-var str="Visit Microsoft!";
var n=str.replace("Microsoft","Runoob");
得到：Visit Runoob!

- substr()和substring
- string.substr(start,length)
如：
var str="Hello world!";
var n=str.substr(2,3)
得到：llo
var n=str.substr(2)
得到：llo world!

- string.substring(from, to)
substring() 方法返回的子串包括开始处的字符，但不包括结束处的字符。
<script>
var str="Hello world!";
document.write(str.substring(3)+"<br>");
document.write(str.substring(3,7));
</script>
输出: lo world!
lo w

2、js的Array对象（字符串数组）

三种创建方式：
var arr1= [1,2,3];
var arr2= new Array(3);//长度是3
var arr1= new array(1,2,3);元素是123

属性：
length 查看数组的长度

方法：
- concat(),语法：array1.concat(array2,array3,...,arrayX) 数组的连接，返回新数组
- join() ,语法：array.join(separator) 插入新的字符串，返回新的数组，
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join(" and ");
得到：Banana and Orange and Apple and Mango

- push(),语法：array.push(item1, item2, ..., itemX)尾部追加字符串，返回新数组的长度
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var n = fruits.push("Kiwi","Lemon","Pineapple")
push后的数组是:Banana,Orange,Apple,Mango,Kiwi,Lemon,Pineapple
n==7

注意：若添加的是一个数组，则这个数组作为一个整体元素添加到原来的数组中

- pop()，语法array.pop()，删除数组的最后一个元素，并且返回这个元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var n = fruits.pop();
fruits最后一个字符串删除，n=="Mango"
- revrse(),语法：array.reverse()颠倒数组中元素的顺序，返回颠倒顺序后的数组
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();

fruits：Mango,Apple,Orange,Banana

3、js的date对象

**js获取当前的时间：
var date=new Date();格式不是中国的习惯。
**转换为当前日期：date.toLocaleDateString();

**转换为当前时间：date.toLocaleTimeString();

**得到当前的年份：date.getFullYear();
**得到当前的月份：date.getMonth();返回的是0-11月，所以需要加1来得到准确的月份
**得到当前的星期：date.getDay();返回的是0-6，对应是星期日-星期六
**得到当前的天：date.getDate();返回1-31
**得到当前的小时：date.getHours();
**得到当前的分钟：date.getMinutes();
**得到当前的秒：date.getSeconds();

**获取毫秒数：date.getTime();获取1970年1月1日至今的毫秒数
应用场景：使用毫秒数来处理缓存的效果（不使用缓存）

4、js的math对象

*数学的运算

*静态的方法，直接类名.方法名();
*常用的方法：
- ceil():向上舍入为整数
- round():四舍五入
- floor():向下舍入为整数

- random：得到随机数，返回 0 ~ 1 之间的随机数。
如：取得介于 1 到 10 之间的一个随机数：
Math.floor((Math.random()*10)+1);

5、js的全局函数

全局函数：不属于任何一个对象
- eval：
eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。
如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。

evval(string);如eval（"4+5"）返回9；

- decodeURI()解码某个编码的 URI。
encodeURI() 函数可把字符串作为 URI 进行编码。
对以下在 URI 中具有特殊含义的 ASCII 标点符号，encodeURI() 函数是不会进行转义的： , / ? : @ & = + $ # (可以使用 encodeURIComponent() 方法分别对特殊含义的 ASCII 标点符号进行编码。).
- decodeURIComponent()解码一个编码的 URI 组件。

decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

- encodeURI()把字符串编码为 URI。
decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
- encodeURIComponent()把字符串编码为 URI 组件。
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。
其他字符（比如：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

- isNaN() 函数用于检查其参数是否是非数字值。如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。

- parseInt() 函数可解析一个字符串，并返回一个整数。
当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。

6、js的重载：面试常考题，实际开发不需要

js没有重载
- 会调用最后一个方法。
- 会把参数放在一个arguments数组里面

但是可以通过其他的方式来模拟重载，通过arguments数组来模拟：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function add(){
var sum = arguments[0];
for(var i=1;i<arguments.length;i++){
sum+=arguments[i];
}
return sum;
}
document.write(add(1,2,3,4));
</script>
</body>

</html>

7、js的浏览器Bom对象

访问和操作浏览器窗口的模型称为浏览器对象模型BOM（Browser Object Model）。

核心是window对象；

以下有特殊双重身份：

window对象既是ECMAScript规范中的Global对象，也是BOM中的顶级对象；
document对象既是BOM顶级对象的一个属性，也是DOM模型中的顶级对象
location对象既是window对象的属性，同时也是document对象的属性。

BOM有哪些对象?
- navigator对象
Navigator 对象包含有关浏览器的信息。
属性：appName 返回浏览器的名称

- screen对象
Screen 对象包含有关客户端显示屏幕的信息。
- 属性：height 返回屏幕的总高度
- 属性：width 返回屏幕的总宽度

- location对象
Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。
-属性：href 获取完整的url地址，设置url地址

- history对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
-属性：length 返回历史列表中的网址数
- 方法：
history.back() 加载 history 列表中的前一个 URL
forward() 加载 history 列表中的下一个 URL
go() 加载 history 列表中的某个具体页面

***** - window对象(*********重要********)
* 窗口对象
* 顶层对象（所有的BOM对象都是在window里面操作的）
** 方法：
- window.alert()：页面弹出一个框，显示内容。简写alert();
- confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
此方法返回true，否则返回false。
如：
function myFunction(){
var x;
var r=confirm("按下按钮!");
if (r==true){
x="你按下了\"确定\"按钮!";
}
else{
x="你按下了\"取消\"按钮!";
}
document.getElementById("demo").innerHTML=x;
}

- prompt() 显示可提示用户输入的对话框。
prompt()方法用于显示可提示用户进行输入的对话框。
这个方法返回用户输入的字符串。
window.prompt("在页面显示的内容","输入框里面的默认值")

- open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
window.open(URL,name,specs,replace)四个参数都是可选的。
如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="百度一下" οnclick="open_win()">
</body>
<script>
function open_win() {
window.open("http://www.baidu.com");
}
</script>
</html>

- close()关闭浏览器窗口。window.close() ,浏览器兼容差
window.close();

- setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
语法：setInterval(code, milliseconds);

- 每三秒（3000 毫秒）弹出 "Hello" :
setInterval(function(){ alert("Hello"); }, 3000);
或者：setInterval("alert('Hello')", 3000);

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

- setTimeout() 在指定的毫秒数后调用函数或计算表达式。
3 秒（3000 毫秒）后弹出 "Hello" :setTimeout(function(){ alert("Hello"); }, 3000);
- 只执行一次
- clearInterval() 取消由 setInterval() 设置的 timeout。
参数是setInterval时候返回的值
- clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
参数是setTimeout时候返回的值
如：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="clear_Interval" οnclick="clear_Interval()">
<input type="button" value="clear_Timeout" οnclick="clear_Timeout()">
</body>
<script>
var si = setInterval("alert('setInterval Show!!');",2000);
var st = setTimeout("alert('setTimeout Show!!');",4000);
function clear_Interval() {
window.clearInterval(si);
}
function clear_Timeout() {
window.clearTimeout(st);
}
</script>
</html>

8、js的dom对象

什么是dom对象？

dom：doucment object model :文档对象模型

**文档：超文本文档（超文本标记文档） html、xml
**对象：提供了属性和方法

**模型：使用属性和方法操作超文本标记型文档

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

***想要对标记型的文档进行操作，首先需要对标记型的文档里面的所有内容封装成对象

dom解析html的过程：
根据html的层级结构，在内存中分配一个属性结构，把html的每一个部分都封装成一个对象：
- document 对象：整个文档
- element 对象：标签对象
- 属性对象：
- 文本对象

另，还有node 节点对象是这些对象的父对象，如果在对象里面找不到想要的方法，就在node对象去找

9、DHTML的简介：

是很多技术的简称：
*html:封装数据
*css：使用属性和属性值设置样式
*dom：操作html文档（标记型文档）
*JavaScript：专门指的是js的语法语句（ECMAScript）

10、document对象

浏览器载入html文件的时候就会产生一个document对象，在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点

属性和方法：
- document.getElementById(id的值) 返回对拥有指定 id 的第一个对象的引用。
语法：document.getElementById(elementID)
注意：id值是某个标签的值，返回的是该标签的引用，可以通过该引用访问、设置该元素的值

- document.getElementsByName() 返回带有指定名称的对象集合。
语法：document.getElementsByName("标签里面的name的值")
注意： Elements有一个s，集合乐意理解为数组，可以用脚标操作元素
返回的是集合，集合里是所有那么值为指定值的元素，遍历元素可以访问该元素的其他属性

- document.getElementsByTagName() 返回带有指定标签名的对象集合。
语法：document.getElementsByTagName(tagname)
注意： Elements有一个s，集合乐意理解为数组，可以用脚标操作元素
返回的是一个集合，参数是指定标签的名字

**这三个方法一定要掌握，其中，通过后两个方法获取的集合，可以直接加下标来引用对应的元素
如:
<body>
<input type="text" name="name1" value="aaa">
<script type="text/javascript">
//得到input标签的value值：aaa
document.getElementsByName("name1")[0].value;
</script>
</body>

注：本例在测试的时候犯得错误，误以为td标签有value的属性，查阅api才知道可以用abbr属性来代替。
在火狐浏览器上可以正常的测试，为什么在谷歌浏览器上不行？
因为js有一个安全性的特点，就是不允许浏览器访问本地的文件，所以操作失败。
这时候可以通过服务器来做到

11、案例：在末尾添加节点

代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>add node test</title>
</head>
<body>

<ul id="ulid">
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
</ul>

<input type="button" name="add" value="add" οnclick="add()">
<script type="text/javascript">
function add(){
// 第一步，想要在ul下添加一个元素节点，先获取ul这个元素
var ul1=document.getElementById("ulid");
//第二步，创建一个li标签
var li1= document.createElement("li");
//第三步，创建一个文本节点，文本节点是没有子节点的
var text1=document.createTextNode("005");
//第四步，把文本节点添加到li标签下
li1.appendChild(text1);
//第五步，将li标签添加到ul1中
ul1.appendChild(li1);
}
</script>

</body>
</html>

总结：
第一步，想要在ul下添加一个元素节点，先获取ul这个元素
第二步，创建一个li标签
document.createElement("li");
第三步，创建一个文本节点，文本节点是没有子节点的
document.createTextNode("文本内容");
第四步，把文本节点添加到li标签下
li1.appendChild(text1);
第五步，将li标签添加到ul1中
ul1.appendChild(li1);

12、Html的DOM元素对象，element对象

再加深一下印象：
在 HTML DOM (Document Object Model) 中, 每个东西都是节点 :
文档本身就是一个文档对象
所有 HTML 元素都是元素节点
所有 HTML 属性都是属性节点
插入到 HTML 元素文本是文本节点
注释是注释节点

元素相当于标签

元素对象的子节点可以是元素节点，文本节点，注释节点。

要操作元素的的属性值，先要获取该元素
（1）element.setAttribute() 设置或者改变指定属性并指定值
（2）element.getAttribute() 返回指定元素的属性值
（3）element.removeAttribute() 从元素中删除指定的属性
如：<input type="text" id="inputid" name="inputname">
var in1=document.getElementById("inputid");
in1.setAttribute("class","haha");//增加一个属性class
in1.getAttribute("name");//获取属性name的值
in1.removeAttribute("name");//删除属性name,注意不能删除属性value

获取标签下面的子标签:
（4）element.appendChild() 为元素添加一个新的子元素
浏览器兼容性差，所以想要获取子节点的唯一有效的办法是用：
element.getElementsByTagName() 返回指定标签名的所有子元素集合。

注意区别document.getElementsByTagName()和element.getElementsByTagName()
前者是根据标签名来获得该标签的元素的数组，后者是根据标签名获得该元素的子节点的对应的集合

13、node对象的属性一：

JavaScript中所有HTML DOM节点类型都继承自Node类型，因此所有类型的节点都有一些相同的属性和方法。Node接口是DOM1级中定义的一个接口，在JavaScript中Node接口被实现为Node类型。Node类型介绍

介绍3个：
1、nodeName 返回节点的名称，根据其类型。
2、nodeType 返回节点的类型。
3、nodeValue 设置或返回节点的值，根据其类型。

对元素节点、属性节点、文本节点分别测试上述三个属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span id ="s">123</span>
<br>
<script type="text/javascript">
//对于元素节点
var span1=document.getElementById("s");
document.write(span1.nodeType);//1
document.write("<br>");
document.write(span1.nodeName);//SPAN
document.write("<br>");
document.write(span1.nodeValue);//null
document.write("<br>");

//对于属性节点
var id1=span1.getAttributeNode("id");
document.write(id1.nodeType);//2
document.write("<br>");
document.write(id1.nodeName);//id
document.write("<br>");
document.write(id1.nodeValue);//s
document.write("<br>");

//对于文本节点
var text1 =span1.firstChild;
document.write(text1.nodeType);//3
document.write("<br>");
document.write(text1.nodeName);//#text
document.write("<br>");
document.write(text1.nodeValue);//123
document.write("<br>");

</script>

</body>
</html>

注：以上的示例需要注意三个获取元素的方式（函数），
以及属性节点不是元素节点的子节点，关系是从属的关系

归纳起来就是：
*标签节点对应的值：
nodeType：1
nodeName:大写的标签的名称
nodeValue:null
*标签节点对应的值：
nodeType： 2
nodeName: 属性的名称
nodeValue: 属性的值
*标签节点对应的值：
nodeType： 3
nodeName: #text
nodeValue: 文本内容

14、node对象的属性二：

子节点：
childNodes 返回节点到子节点的节点列表。兼容差
firstChild 返回节点的首个子节点。
lastChild 返回节点的最后一个子节点。

父节点：
parentNode 返回节点的父节点。

同级节点：
nextSibling 返回节点之后紧跟的同级节点。
previousSibling 返回节点之前紧跟的同级节点。

15、（Node 对象的方法）操作dom树：

插入节点：
* appendChild:
一是可以在末尾添加节点
二是可以实现类似剪切的效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1 {
width: 200px;
height: 150px;
border: 3px solid red;
}

#div2 {
width: 200px;
height: 150px;
border: 3px dashed green;
}
</style>
</head>
<body>
<div id="div1">
<ul id="ulid">
<li>tom</li>
<li>mary</li>
<li>jack</li>
<li>haha</li>
</ul>
</div>

<div id="div2">

</div>
<input type="button" name="add" value="add" οnclick="add()">

<script type="text/javascript">
function add() {
var div22= document.getElementById("div2");
var ul1= document.getElementById("ulid");
div22.appendChild(ul1);
}
</script>

</body>
</html>

* insertBefore() 在指定的子节点前插入新的子节点。
语法：insertBefore(newchild,refchild)
如：
<ul id="ulid">
<li>tom</li>
<li>mary</li>
<li>jack</li>
<li>haha</li>
</ul>
要在Jack前面添加hehe
1、先获取jack的标签对象lij
2、创建新节点：var lih = document.createElement("li");
3、创建文本：var text=document.createTextNode("hehe");
4、将文本添加到节点后：lih.appendChild(text);
5、获取到ul：var ul1 = getElementById("ulid");
5、通过父节点来加：ul1.insertBefore(lih,lij);

注意：没有insertAfter方法

删除节点：
removeChild()
- 基本的原则，是通过父节点来删除、

- 父节点.removeChild(被删除的节点);

替换节点：
replaceChild（newNode，oldNode）
- 用要替换的节点的父节点去调用
- newNode：新的节点
- oldNode：被替换的节点
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>replaceChild</title>
</head>
<body>
<ul id="ul1">
<li id="li1">text01</li>
<li id="li2">text02</li>
<li id="li3">text03</li>
<li id="li4">text04</li>
</ul>
<input type="button" name="re" value="replace" οnclick="repalce1()">
<script type="text/javascript">
function repalce1() {
var li4= document.getElementById("li4");
var li5= document.createElement("li");
var text= document.createTextNode("ReplacedText");
li5.appendChild(text);
ul1.replaceChild(li5,li4);
}
</script>
</body>
</html>

*复制节点:
cloneNode(boolean):参数Boolean是指是否复制子节点
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>clone</title>
</head>
<body>
<ul id="ul1">
<li id="li1">text01</li>
<li id="li2">text02</li>
<li id="li3">text03</li>
<li id="li4">text04</li>
</ul>
<div id="divid">

</div>
<input type="button" name="re" value="copy" οnclick="copy()">
<script type="text/javascript">
function copy() {
var ul1= document.getElementById("ul1");
var clonecopy= ul1.cloneNode(true);
var divv= document.getElementById("divid");
divv.appendChild(clonecopy);
}
</script>
</body>
</html>

操作dom树的总结：

-获取节点：
getElementById();
getElementsByName();
getElementsByTagName();
- 删除节点：通过父节点删除
removeNode()
- 插入节点：
insertBefore()在某个节点之前插入
appendChild()在末尾添加，剪切粘贴
- 替换节点：通过父节点替换
replaceChild()

16、innerHTML属性

* 不是dom的组成部分，但大多数浏览器都支持
* 作用一:获取文本内容
<span id="1">哈哈</span>
document.getElementById("1").innerHTML == 哈哈
* 作用二：向标签里面设置内容（可以是html代码）
实际开发中用的很多
document.getElementById("1").innerHTML == "html代码"

17、练习：写一个时间的页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>clock</title>
</head>

<body>
<p id="time" size="3">时钟隐藏在这里</p>
<input type="button" value="显示时间" οnclick="showTime()">
</body>
<script>
function showTime() {
setInterval("printTime()",1000);
}
function printTime(){
var t = document.getElementById("time");
t.innerHTML=new Date().toLocaleString();
}
</script>

</html>

18、练习：写一个全选/全不选复选框操作

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>selAllNo</title>
<style>
body {
font-size:120%;
color: green;
}
</style>
</head>
<body>

<input type="checkbox" id="selAllNoId" name="selAllNo" οnclick="selAllNo()">全选/全不选
<br>

<input type="checkbox" name="love" >篮球
<br>
<input type="checkbox" name="love" >排球
<br>
<input type="checkbox" name="love" >足球
<br>
<input type="checkbox" name="love" >羽毛球
<br>

<input type="button" name="selAll" value="全选" οnclick="selAll(true)">
<input type="button" name="selNo" value="全不选" οnclick="selAll(false)">

<input type="button" name="selOther" value="反选" οnclick="selOther()">

</html>

效果图：

19、下拉列表左右选择的案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.s{
width: 125px;
height: 200px;
}
#divLeft{
width: 150px;
height: 200px;
padding-left: 20PX;
float: left;
}
#divRight{
width: 150px;
height: 200px;
float: left;
}
.steps{
padding: 20px;
font-style:normal;
font-size:large;
color: green;
border: 2px dashed green;
}
.needs{
padding-top: 5px;
padding-bottom: 5px;
border: 2px dashed red;
}
</style>
</head>
<body>
<div class="needs">
需求：写两个，可以多选的下拉框，下面的按钮，分别可以实现移动选项到另一个下拉框里去
</div>
<br>
<pre class="steps">
思路：
1.得到目标下拉框的元素对象：getElementsById("选择框id")
2.获取选择框下面的子元素
子元素的集合==getElementsById("选择框id").getElementsByTagName("option");
3.遍历集合，判断每一个option是否被选中：
使用option的属性
-selected==true:被选中
-selected==false:未被选中
若是被选中，则将该option添加到目标下拉框中，注意此时集合的长度已经减一
4.添加使用appendChild()方法

</pre>




<div id="divLeft">
<select id="select1" class="s" name="left" multiple="multiple" >
<option value="选项1" class="leftOption">选项1</option>
<option value="选项2" class="leftOption">选项2</option>
<option value="选项3" class="leftOption">选项3</option>
<option value="选项4" class="leftOption">选项4</option>
<option value="选项5" class="leftOption">选项5</option>
<option value="选项6" class="leftOption">选项6</option>
<option value="选项7" class="leftOption">选项7</option>
</select>
<br>
<input type="button" name="selToRight" value="选中添加到右边>>" οnclick="selTo('select1','select2')">
<br>
<input type="button" name="allToRight" value="全部添加到右边>>" οnclick="allTo('select1','select2')">
</div>

<div id="divRight">
<select id="select2" class="s" name="right" multiple="multiple" >
<option value="选项8" class="rightOption">选项8</option>

</select>
<br>
<input type="button" name="selToLeft" value="<<选中添加到左边" οnclick="selTo('select2','select1')">
<br>
<input type="button" name="allToLeft" value="<<全部添加到左边" οnclick="allTo('select2','select1')">
</div>
<br>

<script type="text/javascript">
function selTo(selId,pasId) {
var s2=document.getElementById(pasId);
var s1= document.getElementById(selId);
var options1=s1.getElementsByTagName("option");//重要，注意不是使用document.getElementsByTagName

for (var i = 0; i < options1.length; i++) {
var option1=options1[i];
if(option1.selected==true){
s2.appendChild(option1);
i--;//每次若该i值对应的状态为选中，则将其添加到s2中，这时候长度就会减1，而i其实已经加1，必须-1来从当前的下一个元素来开始保证每次都遍历到所有的option
}
}
}

function allTo(selId,pasId) {
var sel=document.getElementById(selId);
var pas=document.getElementById(pasId);
var opss=sel.getElementsByTagName("option");

for (var i = 0; i < opss.length; i++) {
pas.appendChild(opss[i]);
i--;
}
}

</script>
</body>

</html>

20、省市联动案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="font-size:large;color: green" >
需求：两个下拉框，第一个下拉框里存放province，第二个下拉框里存放对应的city
当选择第一个下拉框的内容的时候，第二个下拉框里出现对应的city
</div>

<pre style="color: gray">
分析：
1、利用select 的onchange属性来选择，当选择一个值后，便执行一个脚本事件
2、将this.value作为函数的参数
3、将省对应的城市的数据暂时用二维数组来模拟，即将数据存放在二维数组里
4、遍历数组，得到每一个元素也是数组，将每个数组的第一个元素与参数比对，如果是就将剩下的元素添加到city下拉框
* 先创建一个元素option
* 创建文本，内容就是该元素的值
* 将文本添加到option中去，将option添加到city下拉框（先获取下拉框）
*
5、注意每次开始前先检查city框是否有内容，若有就将其全部清空
* 注意清空的时候的参数的变化
*
</pre>
<br>
<select name="province" id="pro" οnchange="proToCity(this.value)">
<option value="0">请选择省份</option>
<option value="四川">四川</option>
<option value="浙江">浙江</option>
<option value="山东">山东</option>
<option value="广东">广东</option>
</select>

<select name="city" id="cityid">

</select>

<script type="text/javascript">
// 将城市的数据放在二维数组中
var pro=new Array(4);
pro[0] = ["四川","成都","资阳","内江","攀枝花","宜宾","广安","南充","乐山","泸州","绵阳"];
// alert(pro.length);
pro[1]=["浙江","杭州","宁波","温州","嘉兴","湖州","金华","台州","丽水","绍兴","舟山"];
pro[2]=["山东","济南","青岛","烟台","威海","东营","日照","聊城"];
pro[3]=["广东","广州","佛山","深圳","珠海","汕头","江门","台山"];

function proToCity(val) {
//获取city下拉框
var citys = document.getElementById("cityid");
//先查看city下拉框里面有没有内容
var ops=citys.getElementsByTagName("option");

for (var m = 0; m < ops.length; m++) {
citys.removeChild(ops[m]);
m--;
}
//遍历每一个二维数组，把第一个值拿出来与参数对比，如果是，就将剩下的元素添加到city里面去
for (var i = 0; i < pro.length; i++) {
//如果每个数组的第一个元素是参数，对每个数组再进行循环
if(pro[i][0] == val){
for (var j = 1; j < pro[i].length; j++) {
var op = document.createElement("option");
var text = document.createTextNode(pro[i][j]);
op.appendChild(text)
citys.appendChild(op);
}
}
}

}
</script>

</body>

</html>

21、动态生成表格案例

重在理解将表格放到变量中去，使用tab +="代码"以及innerHTML来实现表格的生成以及显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态生成表格</title>
</head>
<body>


行：<input type="text" id="row">
列：<input type="text" id="column">
<br>
<input type="button" value ="create" οnclick="createTable()">


<div id="tb">

</div>
<script type="text/javascript">
function createTable(){
// 首先得到输入的行和列的值
var r=document.getElementById("row").value;
var c=document.getElementById("column").value;
//两个循环生成表格
// 一个重要的思想：将表格放入变量中：
var tab = "<table border='2' bordercolor='blue'>";
for (var i = 0; i < r; i++) {
tab +="<tr>";
for (var j = 0; j < c; j++) {
tab += "<td>单元格</td>"
}
tab+="</tr>";

}

tab +="</table>";

// 获取div
var divt = document.getElementById("tb");
divt.innerHTML = tab;
}
</script>
</body>
</html>

关于dom和window的操作思维导图：

BOM、DOM、Window的关系图

RenSLei

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
javascript：与html结合方式、类型和变量、语法、Bom和Dom对象等

1、JavaScript的简介JavaScript是基于对象和事件驱动的语言，应用于客户端（浏览器）。基于对象: - 提供了很多的对象，可以直接拿来使用事件驱动： - html做静态的效果，JavaScript做动态的效果客户端:专门指的是浏览器 *JavaScript的特...
复制链接

扫一扫