JavaScript学习笔记_javascript编写程序当鼠标滑过出现不同内容-CSDN博客

本文链接：https://blog.csdn.net/m0_53703061/article/details/125675297

JavaScript学习笔记

一、入门

1.常用互动方法

（1）JavaScript-向页面输出内容（document.write）

document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。

var mystr="hello world!";
document.write(mystr);  //直接写变量名，输出变量存储的内容。

document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接

document.write(mystr+"<br>");//输出hello后，输出一个换行符

（2）JavaScript-警告（alert 消息对话框）

语法：alert(字符串或变量);

<script type="text/javascript">
   var mynum = 30;
   alert("hello!");
   alert(mynum);
</script>

（3）JavaScript-确认（confirm 消息对话框）

语法：confirm(str);
参数说明：
str：在消息对话框中要显示的文本
返回值: Boolean值

返回值：
当用户点击"确定"按钮时，返回true
当用户点击"取消"按钮时，返回false

<script type="text/javascript">
    var mymessage=confirm("你喜欢JavaScript吗?");
    if(mymessage==true)
    {   document.write("很好,加油!");   }
    else
    {  document.write("JS功能强大，要学习噢!");   }
</script>

（4）JavaScript-提问（prompt 消息对话框）

语法：prompt(str1, str2);
参数说明：
str1:要显示在消息对话框中的文本，不可修改
str2:文本框中的内容，可以修改

返回值：
点击确定按钮。文本框中的内容将作为函数返回值
点击取消按钮，将返回null

var myname=prompt("请输入你的姓名:");
if(myname!=null)
  {   alert("你好"+myname); }
else
  {  alert("你好 my friend.");  }

（5）JavaScript-打开新窗口（window.open）

语法：window.open([URL],[窗口名称],[参数字符串])
URL：可选参数，窗口中要显示的网址或路径
窗口名称：可选参数，被打开窗口的名称。“_top”、“_blank”、“_self”
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开

例如:打开http://www.imooc.com网站，大小为300px * 200px，无菜单，无工具栏，无状态栏，有滚动条窗口：

<script type="text/javascript"> window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>

（6）JavaScript-关闭窗口（window.close）

用法：

  window.close();   //关闭本窗口
  <窗口对象>.close();   //关闭指定的窗口

 <script type="text/javascript">
    var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象，存储在变量mywin中
    mywin.close();
 </script>

（7）向控制台输出内容console.log()

开发人员在控制台查看，用户看不到

2.DOM操作

HTML文档可以说由节点构成的集合，三种常见的DOM节点:

（1）元素节点：<html>、<body>、<p>等都是元素节点，即标签。

（2）文本节点：向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

（3）** 属性节点**：元素属性，如<a>标签的链接属性href=“http://www.imooc.com”。

例子：

<a href="http://www.imooc.com">JavaScript DOM</a>

元素节点：a
文本节点：JavaScript DOM
属性节点：href="http://www.imooc.com"

（1）通过ID获取元素(后面的Object是通过该方法获取的元素对象)

在网页中，我们通过id先找到标签，然后进行操作。

语法：document.getElementById(“id”)

（2）innerHTML 属性

innerHTML 属性用于获取或替换 HTML 元素的内容。

语法：Object.innerHTML

通过id="con"获取<p> 元素，并将元素的内容输出和改变元素内容，代码如下:

<h2 id="con">javascript</H2>
<script type="text/javascript">
  var mychar= document.getElementById("con");
  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
  mychar.innerHTML="Hello world!";
  document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>

（3）改变html样式

语法：Object.style.属性=“ ”；

如：改变 <p> 元素的样式，将颜色改为红色，字号改为20,背景颜色改为蓝

<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";
</script>

（4）显示与隐藏（display属性）

语法：Object.style.display=value

value取值：

none：此元素不会被显示（即隐藏）
block：此元素将显示为块级元素（即显示）

（5）控制类名

语法：Object.className=classname

作用：

获取元素的class 属性

为网页内的某个元素指定一个css样式来更改该元素的外观

二、进阶

1.数组

（1）创建数组

创建数组var myarr=new Array(); 
给数组赋值 myarr[1]=" 张三";
        myarr[2]=" 李四";
        
var myarray = new Array(66,80,90,77,59);//创建数组同时赋值

（2）数组属性

数组属性length：JavaScript数组的length属性是可变的，这一点需要特别注意。

arr.length=10; //增大数组的长度
document.write(arr.length); //数组长度已经变为10

数组随元素的增加，长度也会改变，如下:

var arr=[98,76,54,56,76]; // 包含5个数值的数组
document.write(arr.length); //显示数组的长度5
arr[15]=34;  //增加元素，使用索引为15,赋值为34
alert(arr.length); //显示数组的长度16

（3）二维数组

一维数组，我们看成一组盒子，每个盒子只能放一个内容。myarray[]

二维数组，我们看成一组盒子，不过每个盒子里还可以放多个盒子。myarray[][]

定义方法一：

var myarr=new Array();  //先声明一维 
for(var i=0;i<2;i++){   //一维长度为2
   myarr[i]=new Array();  //再声明二维 
   for(var j=0;j<3;j++){   //二维长度为3
   myarr[i][j]=i+j;   // 赋值，每个数组元素的值为i+j
   }
 }

定义方法二：

 var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]

myarr[0][0]=0	myarr[0][1]=1	myarr[0][2]=2
myarr[1][0]=1	myarr[1][1]=2	myarr[1][2]=3

赋值： myarr[0][1]=5; //将5的值传入到数组中，覆盖原有值。

2.流程控制语句

（1）判断if…else…

（2）多种选择switch

switch(表达式)
{
case值1:
  执行代码块 1
  break;
case值2:
  执行代码块 2
  break;
...
case值n:
  执行代码块 n
  break;
default:
  与 case值1 、 case值2...case值n 不同时执行的代码
}
//Switch必须赋初始值，值与每个case值匹配。满足执行该 case 后的所有语句，并用break语句来阻止运行下一个case。如所有case值都不匹配，执行default后的语句。

注意:记得在case所执行的语句后添加上一个break语句。否则就直接继续执行下面的case中的语句

（3）循环语句

for循环

while循环

do-while循环：它保证循环体至少被执行一次。因为它是先执行代码，后判断条件，如果条件为真，继续循环。

（4）退出循环break

（5）继续循环continue：continue的作用是仅仅跳过本次循环，而整个循环体继续执行。

3.函数

（1）定义函数

function  函数名( )
{
     函数体;
}

（2）函数调用

第一种情况：在<script>标签内调用。

<script type="text/javascript">
    function add2()
   {
         sum = 1 + 1;
         alert(sum);
    }
  add2();//调用函数，直接写函数名。
</script>

第二种情况：在HTML文件中调用，如通过点击按钮后调用定义好的函数。

<html>
<head>
<script type="text/javascript">
   function add2()
   {
         sum = 5 + 6;
         alert(sum);
   }
</script>
</head>
<body>
<form>
<input type="button" value="click it" onclick="add2()">  //按钮,onclick点击事件，直接写函数名
</form>
</body>
</html>

（3）有参数的函数 function add(x,y)

（4）返回值的函数 return sum;

4.事件

主要事件表：

事件	说明
onclick	鼠标单击事件
onmouseover	鼠标经过事件
onmouseout	鼠标移开事件
onchange	文本框内容改变事件
onselect	文本框内容被选中事件
onfocus	光标聚集
onblur	光标离开
onload	网页导入
onunload	关闭网页

（1）鼠标单击事件( onclick ）

当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。

<input name="button" type="button" value="点击提交" onclick="add2()" />

注意: 在网页中，如使用事件，就在该元素中设置事件属性。

（2）鼠标经过事件（onmouseover）

鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。

（3）鼠标移开事件（onmouseout）

鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。

（4）光标聚焦事件（onfocus）

当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。

（5）失焦事件（onblur）

onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。

（6）内容选中事件（onselect）

选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。

（7）文本框内容改变事件（onchange）

通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。

（8）加载事件（onload）

事件会在页面加载完成后，立即发生，同时执行被调用的程序。

注意：

加载页面时，触发onload事件，事件写在标签内。
此节的加载页面，可理解为打开一个新页面时。
如下代码,当加载一个新页面时，弹出对话框“加载中，请稍等…”。

<!DOCTYPE HTML>>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 加载事件 </title>
<script type="text/javascript">
  function message(){
    alert("加载中，请稍等…"); }
</script>    
</head>
<body onload="message()">
  欢迎学习JavaScript。
</body>
</html>

（9）卸载事件（onunload）

当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。

注意：不同浏览器对onunload事件支持不同。

5.JavaScript内置对象

（1）Date日期对象

方法名称	功能描述
get/setDate()	返回/设置日期
get/setFullYear()	返回/设置年份，用四位数表示
get/setYear()	返回/设置年份
get/setMonth()	返回/设置月份 0：一月…11:十二月，所以加一
get/setHours()	返回/设置小时，24小时制
get/setMinutes()	返回/设置分钟数
get/setSeconds()	返回/设置秒钟数
get/setTime	返回/设置时间（毫秒为单位）

定义一个时间对象 :

var Udate=new Date(); 
//注意:使用关键字new，Date()的首字母必须大写。
//使 Udate 成为日期对象，并且已有初始值：当前时间(当前电脑系统时间)。

如果要自定义初始值，可以用以下方法：

var d = new Date(2012, 10, 1);  //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日

返回/设置年份方法

**get/setFullYear() **返回/设置年份，用四位数表示。

返回星期方法

getDay() 返回星期，返回的是0-6的数字，0 表示星期天。如果要返回相对应“星期”，通过数组完成，代码如下:

<script type="text/javascript">
  var mydate=new Date();//定义日期对象
  var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//定义数组对象,给每个数组项赋值
  var mynum=mydate.getDay();//返回值存储在变量mynum中
  document.write(mydate.getDay());//输出getDay()获取值
  document.write("今天是："+ weekday[mynum]);//输出星期几
</script>

返回/设置时间方法

get/setTime() 返回/设置时间，单位毫秒数，计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数。如果将目前日期对象的时间推迟1小时，代码如下:

<script type="text/javascript">
  var mydate=new Date();
  document.write("当前时间："+mydate+"<br>");
  mydate.setTime(mydate.getTime() + 60 * 60 * 1000);
  document.write("推迟一小时时间：" + mydate);
</script>

（2）String字符串对象

定义字符串的方法就是直接赋值。

var mystr = "I love JavaScript!"

访问字符串对象的属性length
访问字符串对象的方法：

（1）使用 String 对象的 toUpperCase() 方法来将字符串小写字母转换为大写
（2）charAt(index) 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。
（3）indexOf(substring, startpos) 方法可返回某个指定的字符串值在字符串中首次出现的位置。
（4）split(separator,limit) 方法将字符串分割为字符串数组，并返回此数组。
（5）substring(startPos,stopPos) 方法用于提取字符串中介于两个指定下标之间的字符。
（6）提取指定数目的字符substr(startPos,length)

（3）Math对象

Math对象，提供对数据的数学计算。

Math对象属性：
PI：返回圆周率
…还有很多其他的

Math对象方法：
abs(x)：返回数的绝对值
ceil(x)：对数进行上舍入
floor(x)：对数进行下舍入
round(x)：把数四舍五入为最接近的整数
random()：返回0~1之间的随机数
max(x,y)：返回x和y中的最高值
min(x,y)：返回x和y中的最低值
pow(x,y)：返回x的y次幂
sqrt(x)：返回数的平方根
valueOf()：返回Math对象的原始值

（4）Array数组对象

数组对象是一个对象的集合，里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置，是从零开始的。

数组属性：length
数组方法：
（1） concat(arr1,arr2,…)：用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。注意: 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

（2） join(分隔符)：用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

（3） reverse()：用于颠倒数组中元素的顺序。**注意：**该方法会改变原来的数组，而不会创建新的数组。

（4） slice(start,end)：可从已有的数组中返回选定的元素。

（5）sort(方法函数)：使数组中的元素按照一定的顺序排列。
- 如果不指定<方法函数>，则按unicode码顺序排列。
- 如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。
按照数值的大小对数字进行排序。
```
<script type="text/javascript">
   function sortNum(a,b) {
   return a - b;
  //升序，如降序，把“a - b”该成“b - a”
 }
  var myarr = new Array("80","16","50","6","100","1");
   document.write(myarr + "<br>");
   document.write(myarr.sort(sortNum));
 </script>
```

6.浏览器对象

（1）window对象

window对象是BOM的核心，window对象指当前的浏览器窗口。

window对象方法:

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框
prompt()	显示可提示用户输入的对话框
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框
open()	打开一个新的浏览器窗口或查找一个已命名的窗口
close()	关闭浏览器窗口
print()	打印当前窗口的内容
focus()	把键盘焦点给予一个窗口
blur()	把键盘焦点从顶层窗口移开
moveBy()	可相对窗口的当前坐标把它移动指定的像素
moveTo()	把窗口的左上角移动到一个指定的坐标
resizeBy()	按照指定的像素调整窗口的大小
resizeTo()	把窗口的大小调整到指定的宽度和高度
scrollBy()	按照指定的像素值来滚动内容
scrollTo()	把内容滚动到指定的坐标
setInterval()	每隔指定的时间执行代码
setTimeout()	在指定的延迟时间之后来执行代码
clearInterval()	取消setInterval()的设置
clearTimeout()	取消setTimeout()的设置

1.计时器setInterval()

在执行时,从载入页面后每隔指定的时间执行代码。

setInterval(代码,交互时间);
//参数说明：1. 代码：要调用的函数或要执行的代码串。2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。
//返回值：一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。

调用函数格式（假设有一个clock()函数）

setInterval("clock()",1000)
或
setInterval(clock,1000)

2.取消计时器clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的交互时间。

clearInterval(id_of_setInterval)
//参数说明:id_of_setInterval：由 setInterval() 返回的 ID 值。

每隔 100 毫秒调用 clock() 函数,并显示时间。当点击按钮时，停止时间,代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
   function clock(){
      var time=new Date();                     
      document.getElementById("clock").value = time;
   }
// 每隔100毫秒调用clock函数，并将返回值赋值给i
     var i=setInterval("clock()",100);
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop" onclick="clearInterval(i)"  />
  </form>
</body>
</html>

3.计时器setTimeout()

setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

setTimeout(代码,延迟时间);

4.取消计时器clearTimeout()

setTimeout()和clearTimeout()一起使用，停止计时器。

clearTimeout(id_of_setTimeout)
//id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

下面的例子和上节的无穷循环的例子相似。唯一不同是，现在我们添加了一个 “Stop” 按钮来停止这个计数器：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  var num=0,i;
  function timedCount(){
    document.getElementById('txt').value=num;
    num=num+1;
    i=setTimeout(timedCount,1000);
  }
    setTimeout(timedCount,1000);
  function stopCount(){
    clearTimeout(i);
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="txt">
    <input type="button" value="Stop" onClick="stopCount()">
  </form>
</body>
</html>

（2）History对象

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。

window.history.[属性|方法]
//注意：window可以省略

History 对象属性

length：返回浏览器历史列表中的URL数量
History 对象方法

方法描述
back() 加载history列表中的前一个URL
forward() 加载history列表中的后一个URL
go() 加载history列表中的某个具体的页面

方法	描述
back()	加载history列表中的前一个URL
forward()	加载history列表中的后一个URL
go()	加载history列表中的某个具体的页面

1.返回前一个浏览的页面

back()方法，加载 history 列表中的前一个 URL。

window.history.back();
//注意：等同于点击浏览器的倒退按钮。

//back()相当于go(-1),
window.history.go(-1);

2.返回下一个浏览的页面

forward()方法，加载 history 列表中的下一个 URL。

window.history.forward();
//注意：等价点击前进按钮。

//forward()相当于go(1)
window.history.go(1);

3.返回浏览历史中的其他页面

go()方法，根据当前所处的页面，加载 history 列表中的某个具体的页面。

window.history.go(number);

//浏览器中，返回当前页面之前浏览过的第二个历史页面.和在浏览器中单击两次后退按钮操作一样
window.history.go(-2);

//返回当前页面之后浏览过的第三个历史页面
window.history.go(3);

（3）Location对象

location用于获取或设置窗体的URL，并且可以用于解析URL。

location.[属性|方法]

（4）Navigator对象

Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。

（5）screen对象

screen对象用于获取用户的屏幕信息。

window.screen.属性

7.DOM对象，控制HTML元素

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

（1）getElementsByName()方法

返回带有指定名称的节点对象的集合。

document.getElementsByName(name)
//与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。

注意:

（1）因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

（2）和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

（2）getElementsByTagName()方法

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

document.getElementsByTagName(Tagname)
//说明:1. Tagname是标签的名称，如p、a、img等标签名。2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

（3）区别getElementById,getElementsByName,getElementsByTagName

以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。

ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。

Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。

TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName(“小孩”)。

例子：
<input type="checkbox" name="hobby" id="hobby1">  音乐

//input标签就像人的类别。
//name属性就像人的姓名。
//id属性就像人的身份证。

总结

方法	说明	获得
getElementById	通过指定id获得元素	一个
getElementsByName	通过元素名称name属性获得元素	一组
getElementsByTagName	通过标签名称获得元素	一组

（4）getAttribute()方法

通过元素节点的属性名称获取属性的值。

elementNode.getAttribute(name)

说明:

elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。

name：要想查询的元素节点的属性名字

（5）setAttribute()方法

setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

elementNode.setAttribute(name,value)

注意：

（1）把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。

（2）类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。

（6）节点属性

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：

nodeName : 节点的名称

nodeValue ：节点的值

nodeType ：节点的类型

nodeName 属性 ：节点的名称，是只读的。

（1）元素节点的 nodeName 与标签名相同
（2）属性节点的 nodeName 是属性的名
（3）文本节点的 nodeName 永远是 #text
（4）文档节点的 nodeName 永远是 #document

nodeValue 属性：节点的值

（1）元素节点的 nodeValue 是 undefined 或 null

（2）文本节点的 nodeValue 是文本自身

（3）属性节点的 nodeValue 是属性的值

nodeType 属性：节点的类型，是只读的。以下常用的几种结点类型:

元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

元素类型	节点类型
元素	1
属性	2
文本	3
注释	8
文档	9

（7）访问子节点childNodes

访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。

elementNode.childNodes

注意：如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。

（8）访问子节点的第一和最后项

firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。

node.firstChild
//说明：与elementNode.childNodes[0]是同样的效果。

lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。

node.lastChild
//说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。

（9）访问父节点parentNode

获取指定节点的父节点

elementNode.parentNode

注意:父节点只能有一个。

（10）访问兄弟节点

（1） nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。

nodeObject.nextSibling
//说明：如果无此节点，则该属性返回 null。

（2）previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。

 nodeObject.previousSibling  
 //说明：如果无此节点，则该属性返回 null。

注意: 两个属性获取的是节点。

（11）插入节点appendChild()

在指定节点的最后一个子节点列表之后添加一个新的子节点。

appendChild(newnode)
//newnode：指定追加的节点。

（12）插入节点insertBefore()

insertBefore() 方法可在已有的子节点前插入一个新的子节点。

insertBefore(newnode,node);

例子：实现创建一个新li标签，内容为"php",并将新创建的li插入到内容为HTML的标签前。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
 <ul id="test"><li>JavaScript</li><li>HTML</li></ul> 
 
<script type="text/javascript">

  var otest = document.getElementById("test"); 
  var child=otest.childNodes;
  for(var i=0; i<child.length;i++)
  {
      if(child[i].nodeValue=="HTML")
      {
          var node=child[i];
      }
  }
  
  var newnode=document.createElement("li");
  newnode.innerHTML="PHP";
  otest.insertBefore(newnode,node);
  
  
  
</script> 

</body>
</html>

（13）删除节点removeChild()

removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

nodeObject.removeChild(node)
//node ：必需，指定需要删除的节点。

注意: 把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。

如果要完全删除对象，给 x 赋 null 值。

（14）替换元素节点replaceChild()

replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。

node.replaceChild (newnode,oldnew ) 
//newnode : 必需，用于替换 oldnew 的对象。 
//oldnew : 必需，被 newnode 替换的对象。

注意:

（1）当 oldnode 被替换时，所有与之相关的属性内容都将被移除。

（2） newnode 必须先被建立。

（15）创建元素节点createElement

createElement()方法可创建元素节点。此方法可返回一个 Element 对象。

document.createElement(tagName)
//tagName：字符串值，这个字符串用来指明创建元素的类型。

注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。

（16）创建文本节点createTextNode

createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。

document.createTextNode(data)
//data : 字符串值，可规定此节点的文本。

例子：在代码编辑器<script>标签中，创建一个P标签，设置className属性，使用createTextNode创建文本节点"I love JavaScript!"。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">

.message{    
	width:200px;
	height:100px;
	background-color:#CCC;}
	
</style>
</head>
<body>
<script type="text/javascript">
    var element=document.createElement("p");
    element.className="message";
    var textnode=document.createTextNode("I love JavaScript");
    element.appendChild(textnode);
    document.body.appendChild(element);
</script> 

</body>
</html>

（17）浏览器窗口可视区域大小

获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:

在不同浏览器都实用的 JavaScript 方案：

var w= document.documentElement.clientWidth
      || document.body.clientWidth;
var h= document.documentElement.clientHeight
      || document.body.clientHeight;

（18）网页尺寸scrollHeight

scrollHeight和scrollWidth，获取网页内容高度和宽度。

var w=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
   || document.body.scrollHeight;

（19）网页尺寸offsetHeight

offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。

offsetHeight = clientHeight + 滚动条 + 边框。

var w= document.documentElement.offsetWidth
    || document.body.offsetWidth;
var h= document.documentElement.offsetHeight
    || document.body.offsetHeight;

（20）网页卷去的距离与偏移量

scrollLeft：设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离，即左边灰色的内容。

scrollTop：设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离，即上边灰色的内容。

offsetLeft：获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。

offsetTop：获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
    function req(){
          var div = document.getElementById("div1");
          document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距离屏幕顶部的距离
          document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距离屏幕左部的距离
          document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1纵向滚动条滚动的距离
          document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1横向滚动条滚动的距离
     }
</script>
</head>
<body style="border:10px solid #ccc;padding:0px 0px;margin:5px 10px">
    <div style="width:60%;border-right:1px dashed red;float:left;">
        <div style="float:left;">
            <div id="div1" style="border:5px red solid;height:300px;width:200px;overflow:auto">
                <div style="height:500px;width:400px">请调整横竖滚动条后，点击按钮后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div>
            </div>
            <input type="button" value="点击我!" onclick="req()" style="border: 1px solid purple;height: 25px;"/>
        </div>
        
    </div>
    <div style="width:30%;float:left;">
        <ul style="list-style-type: none; line-height:30px;">结果：
            <li>offsetTop : <span id="li1"></span></li>
            <li>offsetLeft : <span id="li2"></span></li>
            <li> scrollTop : <span id="li3"></span></li>
            <li>scrollLeft : <span id="li4"></span></li>
        </ul>
        
    </div>
    <div style="clear:both;"></div>    
</body>
</html>