JS基础学习笔记

说明：这篇文档是自己在暑期自学JS编程时做的文档笔记，现在上传上来方便以后查看

---

积少成多，全靠自觉

---

JS基础学习

• 直接输出

  document.write("");  
  

• 警告（消息对话框）

  alert(""); 
  

• 确认（消息对话框）
  var mymessage = confirm(“这是确认框显示内容”);
  if(mymessage == true){
  document.write(“你点击了确认”);
  }else{
  document.write(“你点击了取消”);
  }

• 提问（消息对话框）
  prompt 弹出消息对话框，通常用户询问一些需要交互的消息。弹出消息对话框（包含一个确认按钮，取消按钮与一个文本输入框）

  prompt(str1,str2);
  

参数说明：

• str1:要先是在消息对话框中的文本，不可修改
• str2:文本框中的内容，可以修改

返回值:

• 1.点击确定按钮，文本框中的内容将作为函数返回值

• 2.点击取消按钮，将返回null

• 打开新窗口（window.open）

  window.open([URL], [窗口名称], [参数字符串])
  
  
  
  

*关闭窗口（window.close）

    var mywin=window.open('http:/www.imooc.com'); //将新打的窗口对象，存储在mywin中
    mywin.close();

js demo练习

• 通过ID获取元素

  
      
  js_test
  test
  
  
  
  结果：[object HTMLParagraphElement]
  

结果:null或[object HTMLParagraphElement]

---

innerHTML 属性

• Object.innerHTML

  • 1.Object是获取的元素对象，如通过document.getElmentById(“ID”)获取的元素。

  • 2.注意书写innerHTML大小写区分

    var mychar = document.getElementById("con") ;
    document.write("原标题:"+mychar.innerHTML+"
    "); //输出原h2标签内容
    mychar.innerHTML = "New text!";   //修改P元素
    document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
    

改变HTML样式

• Object.style.property = new style;

• Object是获取的元素对象。如通过document.getElementbyId(“id”)

   
  I love JavaScript
      
   JavaScript使网页显示动态效果并实现与用户交互功能。
      
  

显示和隐藏（display属性）

• Object.style.display = value

• Object是获取的元素对象。如通过document.getelmmentbyId(“id”)

• value取值：

  • none：隐藏元素
  • block:显示元素

练习demo

    
    
    
    
    
         
     
      
        
JavaScript
  
        
做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。
 
        

            
            
        
     
    

控制类名

• Object.className = classname

  1. 获取元素的class 属性

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

demo

    
    
    
    
    
    
    
    
        
 JavaScript使网页显示动态效果并实现与用户交互功能。
        
        
JavaScript使网页显示动态效果并实现与用户交互功能。
        

        
    
    

demo”改变颜色”、”改变宽高”、”隐藏内容”、”显示内容”、”取消设置

    
    
    
    
    
    
    
    
      
JavaScript课程
      
 
         
JavaScript为网页添加动态效果并实现与用户交互的功能。
            
1. JavaScript入门篇，让不懂JS的你，快速了解JS。
            
2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。
            
3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。
      
      

      
          
        
        
        
        
      
      
    
    

js数组

一维数组

    第一个人的成绩是:80第二个人的成绩是:60第三个人的成绩是:99

    var mynum=new Array(65,90,88,98);   //数组赋值的第二种写法

二维数组

    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
       }
    }

JS事件

JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

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

---

鼠标单击事件( onclick ）

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

---

鼠标经过事件（onmouseover）

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

---

鼠标移开事件（onmouseout）

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

---

光标聚焦事件（onfocus）

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

---

失焦事件( onblur）

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

---

内容选中事件（onselect）

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

---

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

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

---

加载事件（onload）

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

---

1. 加载页面时，触发onload事件，事件写在标签内。
2. 此节的加载页面，可理解为打开一个新页面时。

---

卸载事件（onunload）

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

---

JS计算器demo

    
    
     
        
       
      
     
        
       
            +
            -
            *
            /
       
        
         
          
     
    

JS对象

JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。
* 对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；

• 对象的方法：能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；

• JavaScript 提供多个内建对象，比如 String、Date、Array 等等，使用对象前先定义，如下使用数组对象：

      例如：
      var objectName =new Array();//使用new关键字定义对象
      或者  
      var objectName =[];
  

• 访问对象属性的语法:

  objectName.propertyName
  

• 如使用 Array 对象的 length 属性来获得数组的长度：

  var myarray=new Array(6);//定义数组对象
  var myl=myarray.length;//访问数组长度length属性
  

• 访问对象的语法:

  objectName.methodName()
  

• 如使用string 对象的 toUpperCase() 方法来将文本转换为大写

  var mystr="Hello world!";//创建一个字符串
  var request=mystr.toUpperCase(); //使用字符串对象方法
  

Date日期对象

• 定义一个事件对象：

  var Udate = new Date();
  

  使 Udate 成为日期对象，并且已有初始值：当前时间(当前电脑系统时间)

• 自定义初始值：

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

• Date对象中处理时间和日期的常用方法：

• get/setDate()： 返回/设置日期
• get/setFullYear()： 返回/设置年份，用4位数表示
• get/setYear()： 返回/设置年份
• get/setMonth()： 返回/设置月份
• get/setHours()： 返回/设置小时，24小时制
• get/setMinutes()： 返回/设置分钟数
• get/setSeconds()： 返回/设置秒钟数
• get/setTime()： 返回/设置时间（毫秒为单位）

WebView中 js的alert,confirm,windows.open不起作用原因

采用WebView实现安卓手机OA时，OA系统中有js的alert、confirm、window.open()不起作用。
要点：重载WebChromeClient类；实现alert对应的onJsAlert，confirm对应的onJsConfirm，window.open对应的onCreateWindow；setSupportMultipleWindows支持弹出窗口；setWebViewClient支持在webview上打开连接。

---

使用webView.setWebChromeClient(new WebChromeClient())
当webView.setWebChromeClient(new WebChromeClient())后，默认已实现alert和confirm方法。但是提示窗口标题有带url，而且window.open没有反应。要自定义alert和confirm窗口和实现window.open需要重载WebChromeClient。

• 参考webviewtest案例
  

  ---

引入JS文件的写法

1. 若母文件在根目录下，则应这样写：

     
     这个时候下面的两种写法是不正确的：
     
     
   

2. 若母文件在根目录下的一个叫login的文件夹下，则应这样写：

     
     这个时候下面的两种写法是不正确的：
     
     
       同样对CSS文件的引用也是这样的。
   

返回星期

    今天是：星期三

日期对象

    当前时间：Wed Mar 05 2025 20:29:40 GMT+0000 (Coordinated Universal Time)
推迟二小时时间：Wed Mar 05 2025 22:29:40 GMT+0000 (Coordinated Universal Time)

String字符串对象

• 定义一个字符串并赋值

  var mystr = "I love JavaScript";
  

• 访问字符串对象的属性

  var mystr = "Hello world";
  var myl = mystr.length;
  

• 访问字符串对象的方法

  var mystr = "hello world";
  var mynum = mtstr.toUpperCase();
  

toUpperCase():将字符串小写字母转换为大写

toLowerCase():将字符串大写字母转换为小写

charAt() 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

    stringObject.indexOf(substring, startpos)

* 参数说明
* substring:规定检索的字符串值
* startpos:可选的整数参数。规定在字符串中开始检索的位置。它的合法值取值时0~string.length-1。如果省略该参数，则将从字符串的首字符开始检索。

字符串分割split()

    stringObject.split(separator,limit)

* 参数说明
* separator:从该参数指定的地方分割stringObject
* limit:分割的次数，如果设置该参数，返回的字串不会多于这个参数指定的数组，如果无此参数为不限制次数

注意：如果把空字符串(“”)用作separator,那么stringObject中的每个字符都会被分割

*例：使用制定符号分割字符串

    var mystr = "www.baidu.com";
    document.write(mystr.split(".")+"
");
    document.write(mystr.split(".",2)+"
";)

提取字符串substring()

• substring()方法用于提取字符串中介于两个指定下标之间的字符

  stringObject.substring(starPos,stopPos)
  

• 参数说明：
• startPos:一个非负的整数，开始位置

• stopPos:一个非负的整数，结束位置，如果省略该参数，返回的字串会一直到字符串对象的结尾

  例子：
  mystr.substring(6,11);
  

提取自定数目的字符substr()

• substr()方法从字符串中提取从startPos位置开始的指定数目的字符串

  语法
  stringObject.substr(startPos,length);
  

• 参数说明：

• startPos:要提取的字串的起始位置，必须是数值
• length:提取字符串的长度。如果省略，返回从stringObject的开始位置startPos到stringObject的结尾的字符

Math对象

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

---

Math对象时一个固有的对象，无需创建它，直接把Math作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别

---

• Math对象属性

  • E ：返回算数常量e,即自然对数的底数（约等于2.718）
  • LN2：返回2的自然对数（约等于0.693）
  • LN10：返回10的自然对数（约等于2.302）
  • LOG2E:返回以2为底的e的对数(约等于1.442)
  • LOG10E:返回以10为底的对数
  • PI:返回圆周率(约等于3.14159)
  • SQRT1_2:返回2的平方根的倒数(约等于0.707)
  • SQRT2:返回2的平方根
    

    ---

• Math对象方法

  • abs(x): 返回数的绝对值
  • acos(x):返回数的反余弦值
  • asin(x):返回数的反正弦值
  • atan(x):返回数字的反正切值
  • atan2(y,x):返回由x轴到点(x,y)的角度（以弧度为单位）
  • ceil(x):对数进行上舍入
  • cos(x):返回数的余弦值
  • exp(x):返回e的指数
  • floor(x):对数进行下舍入
  • log(x):返回数的自然对数(底为e)
  • max(x,y):返回x和y中的最高值
  • min(x,y):返回x和y中的最低值
  • pow(x,y):返回x的y次幂
  • random():返回0~1的随机数
  • round(x):把数四舍五入为最接近的整数
  • sin(x):返回数的正弦值
  • sqrt(x):返回数的平方根
  • tan(x):返回角正切
  • toSource:返回该对象的源代码
  • valueOf():返回Math对象的原始值
    

    ---

• 四舍五入round()

  • Math.round(x):x必须是数字
  • 返回与 x 最接近的整数。

• 随机数 random()

  • Math.random();

    例子：

    3
    
    

Array 数组对象

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

数组属性

• length
• 用法：<数组对象>.length；
• 返回：数组的长度，即数组里有多少个元素。它等于数组里最后一个元素的下标加一。

数组方法

• concat():连接两个或更多的数组，并返回结果
• join():把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分割。
• pop():删除并返回数组的最后一个元素
• push():向数组的末尾添加一个或更多元素，并返回新的长度
• reverse():颠倒数组中元素的顺序
• shift():删除并返回数组的第一个元素
• slice():从某个已有的数组返回选定的元素
• sort():对数组的元素进行排序
• splice():删除元素，并向数组添加新元素
• toSource():返回该对象的源代码
• toString():把数组转换为字符串，并返回结果
• toLocaleString:把数组转换为本地数组，并返回结果
• unshift():向数组的开头添加一个或更多元素，并返回新的长度
• valueOf:返回数组对象的原始值

数组连接concat()

concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。

    arrayObject.concat(array1,array2,...,arrayN)

demo:

    
    
    
    
    
    010,1,2,
010,-,84697581
010,-,84697581
    
    
    
    

指定分隔符连接数组元素join()

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

    arrayObject.join(分隔符)

• separator:指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符

  I,love,JavaScript
  
  
  I.love.JavaScript
  

颠倒数组元素顺序reverse()

reverse() 方法用于颠倒数组中元素的顺序。

    arrayObject.reverse()

• 注意：该方法会改变原来的数组，而不会创建新的数组。

• 倒序输出

  1,2,3
  3,2,1
  

选定元素slice()

slice() 方法可从已有的数组中返回选定的元素。

    arrayObject.slice(start,end)

• 1.返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

• start:

• 正数，按照数组顺序选取。
• 
  
  • 负数，它规定从数组尾部开始算起的位置，-1代表倒数第一位

数组排序sort()

sort()方法使数组中的元素按照一定的顺序排列。

    arrayObject.sort(方法函数)

注意: 该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

• 若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。
• 若返回值>-1 && <1，则表示 A 和 B 具有相同的排序顺序。

• 若返回值>=1，则表示 A 在排序后的序列中出现在 B 之后。

• 例子、

  100,80,50,16,6,1
  

demo

    
    
    
    
    

    2025年3月5日星期三
班级的总分为：82
    
    
    
    

windows对象

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

window对象方法

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

JavaScript计时器

在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。

计时器类型：
* 一次性计时器：仅在指定的延迟时间之后触发一次
* 间隔性触发计时器：每隔一定的

计时器方法：
* setTimeout():指定的延迟时间之后来执行代码
* clearTimeout():取消setTimeout()设置
* setlnterval():每隔指定的时间执行代码
* clearlnterval():取消setlnterval()设置

计时器setInterval()

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

    setInterval(代码，交互时间);

参数说明：

1. 代码：要调用的函数或要执行的代码串。

2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。

setInterval计时器（demo）

取消计时器clearInterval()

    clearInterval(id_of_setInterval)


    var i = setInterval("clock()",100);
    

计时器setTimeout()

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

    setTimeout(代码,延迟时间);

参数说明：

1. 要调用的函数或要执行的代码串。
2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。

demo（setTimeout计时器）

ClearTimeout()

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

    clearTimeout(id_of_setTimeout)

demo:

History对象

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

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

• 语法：

  • window.history.[属性|方法]
• 注意：
  
  • window可以省略。
• History对象属性
  
  • length:返回
• History对象方法
  
  • 
    
    • back():加载history列表中的前一个URL
  • forward():加载history列表中的下一个URL
  • go():加载history列表中的某个具体的页面

History-demo

    
    
    
    
    
    
     
    
    
        点击下面的锚点链接，添加历史列表项:    
        

        第一个锚点
        
        

        第二个锚点
        
        


        使用下面按钮，实现返回前或下一个页面:
        

           
            
        
    
    

Location对象

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

    window.location.[属性|方法]

demo：

    www.e-com-net.com
www.e-com-net.com
https://www.e-com-net.com/article/1290275067200086016.htm
/article/1290275067200086016.htm
https:

location对象属性：
* hash:设置或返回从井号（#）开始的URL（锚）
* host:设置或返回主机名和当前URL的端口号
* hostname:设置或返回当前URL的主机名
* href:设置或返回完整的URL
* pathname:设置或返回当前URL的路径部分
* port:设置或返回当前URL的端口号
* protocol:设置或返回当前URL的协议
* search:设置或返回从问号（？）开始的URL（查询部分）

location对象方法
* assign():加载新的文档
* reload():重新加载当前文档
* replace():用新的文档替换当前文档

---

Navigator对象

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

对象属性：

• appCodeName:浏览器代码名的字符串表示
• appName:返回浏览器的名称
• appVersion:返回浏览器平台和版本信息
• platform:返回运行浏览器的操作系统平台
• userAgent:返回由客户机发送服务器的user-agent头部的值

Navigator-demo

    浏览器代码名的字符串:Mozilla
浏览器的名称:Netscape

浏览器平台和版本信息:5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)

运行浏览器的操作系统平台:Linux x86_64

客户机发送服务器的user-agent头部的值:Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)

screen对象

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

    window.screen.属性

对象属性：

• availHeight:窗口可以使用的屏幕高度，单位像素
• acailWidth:窗口可以使用的屏幕宽度，单位像素
• colorDepth:用户浏览器表示的颜色位数，通常为32位（每像素的位数）
• pixekDepth：用户浏览器表示的颜色位数，通常为32位（每像素的位数）（IE不支持此属性）
• height:屏幕的高度，单位像素
• width:屏幕的宽度，单位像素

demo：

    //屏幕的高和宽度
    屏幕宽度：1280
屏幕高度：720 

    //屏幕可用高和宽度
    可用宽度：1280
可用高度：720

demo(制作一个跳转提示页面：)

    
    
     
        
          
        

     
     
      
        
操作成功
        5 
        秒后回到主页
            返回

                  

    
    

DOM

document.getElementById(“”);

* 通过元素的 id 属性查询元素

document.getElementｓByName(name);

* 通过元素的 name 属性查询元素

注意:

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

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

getElementsByTagName()

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

demo

    
      
      
      
      
      
      

            

                

                    

                        

                            学号:
                        
                        

                            
                            

                        
                    
                    

                        

                            姓名:
                        
                            

                            
                        
                    
                    

                        

                            性别:
                        
                        

                            
                            男
                            
                            女
                        
                    
                    

                        

                            年龄:
                        
                        

                            
                        
                    
                    

                        

                            地址:
                        
                        

                            
                        
                    

                
            
            

                看看三种获取节点的方法?
            
            

                点击标题弹出它的值。
            
            
            

            

                 

        
    

---

• getElementById():通过指定id获得元素 一个
• getElementsByName():通过元素名称name属性获得元素 一组
• getElementsByTagName():通过标签名称获得元素 一组

demo：

    
    
        
            
            
        

        
            

              请选择你爱好:

                音乐
                登山
                游泳
                阅读
                打球
                跑步 

              
              
              
请输入您要选择爱好的序号，序号为1-6:
              
              
            
            
        
    

getAttribute()方法

通过元素节点的属性名称获取属性的值。
elementNode.getAttribute(name)

1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
2. name：要想查询的元素节点的属性名字

demo：

    
    
    
    
    
    
       
    
课程列表
  
        
  
            
HTML
  
            
CSS
  
            
JavaScript
  
            
Jquery
  
            
Html5
  
        
  
    
以下为获取的不为空的li标签title值:
    第1个li
第3个li
第4个li
 
    
    

setAttribute()方法

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

elementNode.setAttribute(name,value)

说明：

1. name: 要设置的属性名。

2. value: 要设置的属性值。

---

元素类型 节点类型

• 元素 1
• 属性 2
• 文本 3
• 注释 8
• 文档 9

---

节点属性

在文档对象模型（DOM）中，每个节点都是一个对象，DOM节点有三个重要的属性:
1. nodeName:节点的名称
2. nodeValue:节点的值
3. nodeType:节点的类型

节点属性:

• Attributes 存储节点的属性列表(只读)
• childNodes 存储节点的子节点列表(只读)
• dataType 返回此节点的数据类型
• Definition 以DTD或XML模式给出的节点的定义(只读)
• Doctype 指定文档类型节点(只读)
• documentElement 返回文档的根元素(可读写)
• firstChild 返回当前节点的第一个子节点(只读)
• Implementation 返回XMLDOMImplementation对象
• lastChild 返回当前节点最后一个子节点(只读)
• nextSibling 返回当前节点的下一个兄弟节点(只读)
• nodeName 返回节点的名字(只读)
• nodeType 返回节点的类型(只读)
• nodeTypedValue 存储节点值(可读写)
• nodeValue 返回节点的文本(可读写)
• ownerDocument 返回包含此节点的根文档(只读)
• parentNode 返回父节点(只读)
• Parsed 返回此节点及其子节点是否已经被解析(只读)
• Prefix 返回名称空间前缀(只读)
• preserveWhiteSpace 指定是否保留空白(可读写)
• previousSibling 返回此节点的前一个兄弟节点(只读)
• Text 返回此节点及其后代的文本内容(可读写)
• url 返回最近载入的XML文档的URL(只读)
• Xml 返回节点及其后代的XML表示(只读)
• nextSibling 返回相领的节点

节点方法:

方法：

• appendChild 为当前节点添加一个新的子节点,放在最后的子节点后
• cloneNode 返回当前节点的拷贝
• createAttribute 创建新的属性
• createCDATASection 创建包括给定数据的CDATA段
• createComment 创建一个注释节点
• createDocumentFragment 创建DocumentFragment对象
• createElement 创建一个元素节点
• createEntityReference 创建EntityReference对象
• createNode 创建给定类型,名字和命名空间的节点
• createPorcessingInstruction 创建操作指令节点
• createTextNode 创建包括给定数据的文本节点
• getElementsByTagName 返回指定名字的元素集合
• hasChildNodes 返回当前节点是否有子节点
• insertBefore 在指定节点前插入子节点
• Load 导入指定位置的XML文档
• loadXML 导入指定字符串的XML文档
• removeChild 从子结点列表中删除指定的子节点
• replaceChild 从子节点列表中替换指定的子节点
• Save 把XML文件存到指定节点
• selectNodes 对节点进行指定的匹配,并返回匹配节点列表
• selectSingleNode 对节点进行指定的匹配,并返回第一个匹配节点
• transformNode 使用指定的样式表对节点及其后代进行转换
• transformNodeToObject 使用指定的样式表将节点及其后代转换为对象

访问子节点childNodes

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

    elementNode.childNodes

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

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

   node.firstChild 
   

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

   node.lastChild
   

访问父节点parentNode

    elementNode.parentNode

访问兄弟节点

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

   nodeObject.nextSibling
   

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

   nodeObject.previouSibling
   

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

demo：

    
    
    
    
    
    
    
    
   
                
javascript
   
                
jquery
   
                
html
   
            
   
            
   
                
css3
   
                
php
   
                
java
   
            
   
    LI = 首页
nextsibling: LI = 在线工具
LI = 首页
nextsibling: LI = 首页
    
    

插入节点appendChild()

语法：

appendChild(newnode)

参数：

newnode:指定追加的节点

demo：