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练习

    
    
     
       new document   
         
       
      
      
           
     
    
  • 通过ID获取元素

    
        

    js_test

结果: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

    
    
    
    
    display
         
     
      
        

JavaScript

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

控制类名

  • Object.className = classname

    1. 获取元素的class 属性

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

demo

    
    
    
    
    className属性
    
    
    
        

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

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

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

    
    
    
    
    javascript
    
    
    
      

JavaScript课程

JavaScript为网页添加动态效果并实现与用户交互的功能。

1. JavaScript入门篇,让不懂JS的你,快速了解JS。

2. JavaScript进阶篇,让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。

3. 学完以上两门基础课后,在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。

js数组

一维数组

    

    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文件的引用也是这样的。
    

返回星期

    

日期对象

    

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();

      例子:

      
      

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:

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

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

    arrayObject.join(分隔符)
  • separator:指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符

    
    
    
    
    
颠倒数组元素顺序reverse()

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

    arrayObject.reverse()
  • 注意:该方法会改变原来的数组,而不会创建新的数组。
  • 倒序输出

    
    
选定元素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 之后。

  • 例子、

    
    

demo

    
    
    
    
    系好安全带,准备启航

    
    
    
    
    

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:

    

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

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


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

对象属性:

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

screen对象

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

    window.screen.属性

对象属性:

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

demo:

    //屏幕的高和宽度
     

    //屏幕可用高和宽度
    

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

    
    
     
      浏览器对象  
          
        

     
     
      
        

操作成功

5 秒后回到主页 返回

DOM

document.getElementById(“”);

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

document.getElementsByName(name);

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

注意:

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

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

getElementsByTagName()

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

demo

    
      
      
      
    JavaScript  
      
      

            
学号:
姓名:
性别:
年龄:
地址:

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

点击标题弹出它的值。



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

demo:

    
    
        
            
            无标题文档
        

        
            
请选择你爱好:
音乐 登山 游泳 阅读 打球 跑步

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

getAttribute()方法

通过元素节点的属性名称获取属性的值。
elementNode.getAttribute(name)
  1. elementNode:使用getElementById()、getElementsByTagName()等方法,获取到的元素节点。
  2. name:要想查询的元素节点的属性名字

demo:

    
    
    
    
    getAttribute()
    
       
    

课程列表

  • HTML
  • CSS
  • JavaScript
  • Jquery
  • Html5

以下为获取的不为空的li标签title值:

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:

    
    
    
    
    nextSibling
    
    
    
  • javascript
  • jquery
  • html
  • css3
  • php
  • java

插入节点appendChild()

语法:

appendChild(newnode)

参数:

newnode:指定追加的节点

demo:

     

你可能感兴趣的:(JavaScript)