JavaScript-最基础知识---那年还年轻

概念: JavaScript是一种基于对象和时间和驱动的客户端脚本语言 ;
作用: JavaScript 诞生于1995年。它当时的目的是为了验证表单输入的验证。
第一个标准: ECMA-262(ECMAScript)
JavaScript组成
1.ecmascript:解释器、翻译
DOM: document object model(document)
Bom:browser object model(window)

JAVASCRIPT 的组成
1.核心:(ecmascript)ECMAScript是ECMA组织定义的一个script语言标准又叫ECMA-262.
2.文档对象模型(DOM: document object model) document
3 浏览器对象模型(BOM : browser object model) window

面对过程: 以往写程序,C语言,汇编语言,按照过程,按照步骤一步一步来;
面向对象: Java。c++面向对象是以功能来划分问题,思考问题的方式已经不一样了,是一种进步;

console.log()在控制台输出
作用: 对书写的程序进行调试

js注释: 对程序揭示、暂时不用的代码先注释掉
单行注释// or <!--注释内容
多行注释/**/
/**
     文档注释
*/
JavaScript 和HTML代码在同一个文件中写,他们的执行顺序是从上朝下,谁在前面谁先执行
js是一门语言
标识符:标识变量,数组,函数等有效字符序列(人的名字)
标识符的命名规则
1.不以数字开头的字母、数字、下划线、$组成
2.不能是保留字或是关键字(例:电话)
3.具有相关含义(匈牙利命名法)
4.驼峰命名法
5.标识符区分大小写,如:age和Age是不同的变量。但强烈不建议,用同一个单词的大小写区分两个变量。
关键字和保留字:系统将一些特定字符用于特殊使用,称保留字。
变量的概念: 在内存中开辟一块制定字节的空间,用于存储数据,且随着程序的运行,数据有可能发生变化,所以称为变量(例:初中未知数)
变量的声明
1.显示声明(var)
2.隐式声明(声明时必须赋值,否则报错)

数据类型:
number:数字类型--包含两种数值(整型和浮点型);
string:字符串(以引号为定界符的一串字符(单双引号));
布尔类型:Boolean(true false)用于条件判断成不成立;
null(空):--object(类型是一个只有一个值得数据类型,即特殊的值null。她表示一个空对象引用(指针),而typeof操作符检测会返回object);
undefined(未定义)--undefined类型(类型只有一个值,即特殊的undefined。在使用var声明变量,但没有对其初始化时这个值就是undefined;它是派生自null的因此他们的相等性测试时返回true的);object:对象;
js是弱类型的语言,容错性较高,在赋值的时候才确定数据类型;

typeof来检测变量的数据类型

算数运算符规则,一切正常的数字都正常计算,其他类型时先转换为数字再进行计算

(连接符)加号+两边有一个字符串,加号的作用是连接加号两边的数据,产生一个新的字符串-->拼接字符串

===全等、恒等:必须要是类型和数值都相等才为true

关系运算符://和其他的运算符一样,当关系运算符操作非数值时要遵循一下规则:
1.两个操作数都是数值,则比较数值
2.两个操作数都是字符串,则比较两个字符串相对应的字符编码值;
3.两个操作数有一个是数值,则将另一个转换为数值再进行数值比较;
在相等和不相等的比较上,如果操作数是非数值,则遵循以下规则
 1.一个操作数是布尔值,则比较之前将其转换为数字,false转换为0,true转换为1;
2.一个操作数是字符串,则比较值前将其转换为数值再比较
3.一个操作数是NaN,则==返回false,!=返回true,并且NaN和自身不等
4.在全等和去全部等的判断上,比如值和类型都相等,才返回true否则返回false

自动转换(类型转换):
1.数字+字符串:数字转换为字符串
2.数字+布尔值:true转换为1,false 转换为0;
3.字符串+布尔值:布尔值转换为字符串true 和false;
强制转换:
1.isNaN();判断是否为NaN
2.parseInt();强制转换为整数
3.parseFloat():强制转换为浮点数
4.Number();强制转换为数字
5.eval();将字符串强制转换为表达式并返回计算后的结果;

逻辑运算符:! && ||
!(非)优先级最高,大于关系运算符
算术运算符优先级>关系运算符>逻辑运算符
三目运算符:(条件)?语句A:语句B

运行逻辑 :先运行条件,true执行前面的语句A,false执行后面的语句B
顺序结构 :按照程序的书写顺序,一条一条语句执行不允许跳过任何一条语句;
选择结构 :按照条件是否成立,选择执行的语句段(三目);
循环结构 :根据条件是否成立,重复执行一个相同的语句块;
循环结构:需要重复执行同一操作的结构称为循环结构;循环结构是程序中一种很重要的结构,其特点是在给定的条件成立时,反复执行某段程序段,直到条件不成立为止。
分类while循环; do...while循环; for循环;
循环三要素:循环起点;循环结束条件;步长(步进);
while循环while(循环条件;(表达式)){循环体;(语句)}
1.先判断表达式,表达式成立后执行语句;
2.循环条件中使用的变量(循环变量)需要经过初始化;
3.循环体重,应有结束循环的条件,否则会造成死循环;
4.循环体中可以写若干句合法的JavaScript代码,包括if,也可以再套个循环语句。
do while循环:do{语句;}while(表达式);
注意:循环体中,应有结束循环的条件,否则会造成死循环。
while 和do while 的区别:
for循环:for(表达式1;表达式2;表达式3){语句;}
执行过程:
1.先求解表达式1(只求一次);
2.求解表达式2,若其值为真(非0),则执行for语句中指定的内嵌语句,然后求解表达式3;再求解表达式2,若为假,则结束循环,执行for循环外的语句。
break 和 continue 的区别:
强调!:
1.如果已经执行break语句,就不会执行循环体中位于break后的语句。
2.在多层循环中,一个break语句只向外跳一层。
continue:只能在循环语句中使用,使本次循环结束,即跳过循环体中下面尚未执行的语句,接着进行下次是否执行循环的判断;
强调:continue语句只能用在循环里;
函数:概念:对于需要反复使用的功能代码,将其封装成一个独立的模块,这种功能代码块叫函数;
重复使用一段代码
方便代码管理
便于控制程序的执行时间
内置函数(系统函数,官方函数)
是官方提供好的函数,直接使用
如:alert(),isNaN();document.write();等;
自定义函数(用户自己定义的函数)
用户根据实际需求,需要自己封装一个函数。
定义函数: 语句定义法(任何地方都可以调用)function 函数名(){方法体;}
表达式定义法(必须先声明,后调用)
函数名(用户自己定义的名字)
1.函数名必须体现,函数的功能;
2.函数名首字母小写,第二个单词开始,首字母大写(小驼峰);
3.函数名中的单词可以简写,但是简写的单词必须是易懂的
typeof 函数名 是function类型;
表达式定义法:var 函数名= function(){}
1.只能先定义函数,再去调用函数,必须先声明,后调用
2.不会影响按钮的调用
形参和实参: 函数的参数跟变量是一样使用。
形参 就是在函数定义是时,函数名后面的参数,不能用var修饰。 实参 就是调用时函数名后面的参数
参数可以传递多个,与函数的定义无关
如:function test(paramx,paramy){}
test("a","b","c");
函数的返回值 :如果我们要是外部获取到函数内运行的结果,可以通过return语句跟后面的要返回的值来实现返回值。 return 返回结果;
没用var声明的变量,作用域是全局,注意在函数体内一定要加上var

事件驱动 所有的函数,没用调用不会执行,那么函数调用的源头在何处,就是事件,现在学了onclick点击事件;
递归:概念 :函数调用函数自身,称为递归调用;(先传递,后回归);1.首先找这一次和上一次的关系(一般是从后往前找)2.去找临界值,即无需计算,获得的值。

数组的概述: 1.数组的概念:数组是一个可以存储一组或一系列相关数据的容器。2.数组元素:是指存储在数组中并赋予唯一索引号的数据段。3.数组的作用:为了解决大量相关数据的存储和使用问题;

数组的定义:1 创建对象的方式来创建2.隐式声明的方式来创建3.赋值方式:1直接赋值。2.声明后再赋值
var arr = new Array();
var arr = new Array(4);//创建一个长度为4的数组,没有赋值,以对象的方式创建数组,如果有一个参数是整数且仅有一个参数,这个参数表示数组的长度;
var arr2 = new Array("字符串",30);//创建一个数组有两个元素;
var arr3 = [1,2,3,4,5];
//隐式声明,无论中括号中写的什么数据都表示数组元素,数组中可以存储任何数据类型的数据,但是建议存储相同类型的;
<!---------->
数组元素的访问,通过【下标】, 【注】下标是从0开始的,通过下标获取值,下标从0开始,如果对于下标的值存在,则会修改原来的值如果不存在则会添加一个元素;
arr[0]表示数组的第一个元素,0是下标也叫作索引 index;
数组的长度(length属性)
数组的使用: 遍历数组:普通for循环;for..in语句用于遍历数组或对象的属性(快速遍历,不建议使用);
数组的方法: 增删改截拼复排转;
增: 前增(unshift()) ;从数组前端增加一个或者多个元素;后增( push() 方法可以接受任意数量的参数,把他们逐个添加到数组的末尾,并返回修改后的数组的长度);
栈: pop() :方法则从数组尾移除最后一个元素,减少数组的length值,然后返回移除的元素
shift() 在数组前端移除一个元素;
splice(起始下标,删除的元素的个数,后面的参数是在删除后的坐标上增加元素的内容) ;splice(start位置,删除num,“加入的值");
slice(start,end): 截取指定位置的元素,包含起始位置start的元素不包含结束位置end的元素,返回一个新的结果,不影响原来的结果; 不传第二个参数的时候表示从start位置开始截取到最后;

concat(): 方法用于连接两个或多个数组拼接后生成一个新的数组,对原数组没有影响;
排序:reverse() 逆序排列,会改变原数组(数组倒过来)--》源数组也被逆序排序了;
sort():1.如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说的更精确点,是按照字符编码的顺序进行排序;2.按字母(字符串排序)排序;--》源数组也被升序排序了;

字符串的概念和定义: var s1 = new String('hello'); var s2 = String('hello'); 当String()和元素符new一起作为构造函数使用时,它返回一个新创建的String对象,存放的是字符串s1 或s2 的字符串表示//object; 当不用new运算符调用String()时,它只把s1 s2转换成原始的字符串,并返回转换后的值://String
字符串的属性: length:表示字符串的长度;
ECMAScript中的字符串是不可变的;也就是说 字符串一旦创建,他们的值就不能改变,要改变某个变量保存的字符串,首先要销毁原来的字符串,然后再用另一个包含新值的字符串填充该变量; eg:var str1 = "hello"; str1 = str1 + "world"; 关于空格 (js空格,可以扩展长度,HTML空格只能识别一个);

字符串方法: charAt();charCodeAt(); 获取字符编码; String.fromCharCode(94) ://编码转换成字符;
Unicode是ASCLL码不能满足使用以后的升级版;
indexOf():查找字符串第一次出现的位置,返回子串在父串中第一次出现的位置;(找得到返回第一个下标,找不到返回-1);
lastIndexOf();
search()正则匹配(返回第一次出现的位置;
eg:var str = "visit w3cschool" alert(str.search(/w3cshool/i));
replace()替换字符串; 这里的替换只能执行一次,不能够进行全局匹配,如果需要全局匹配则应使用正则表达式 str.replace(/are/gi,"old are")g表示进行全局匹配,i表示匹配的时候忽略大小写;
substring():字符串的截取和拆分,substring(start,end);//截取字符串--包含开始不包含结束[start,end)
var str =“hello”;alert(str.substring(2,5));substring(0):从第一个到结尾(复制);substring():全部截取;
split(separator,howmany)--根据分隔符,拆分成数组: separator(字符串或正则表达式),howmany(可以指定返回的数组的最大长度)
注:如果空字符串(“”)用作separator那么stringObject中的每个字符之间都会被分割。

toLowerCase() 方法用于把字符串转换成小写
toUpperCase() 方法用于把字符串转换成大写

对象: 什么是对象,其实就是一种类型,即引用类型,而对象的值就是引用类型的实例。在ECMAScript中引用类型是一种数据结构,用于将数据和功能组织在一起。 什么是类 ,在传统的面向对象的语言中,类是对象的抽象,对象是类的具体,由类来创建对象,但ECMAScript中却没有这种东西,虽然ECMAScript是一门面向对象的语言,却不是具备传统面向对象语言所支持的类的基本结构。
对象的创建: 创建object类型有两种:1一种是使用new运算符,2一种是字面量表示法;
1.var person = new object();//new关键字可以省略
person.name = “姓名”;person.age="年龄";
alert(JSON.stringify(person));//把对象object转换成字符串
2.var person={
name:"jerry",
age:18,
sex:"male"
}
3.var box={
'name':"zhangsan",
'age':20
}
4.var box = {};//字面量的方式声明空的对象
box.name="zhangsan";
box.age = 18;
5输出方式,(1),alert(box.age);(2)alert(box['age']);
字面量:数组--【】,字符串--“”,
6.给对象创建方法:
var box = {
run:function(){
return"快跑~";
}
}
调用:alert(box.run());
7. 使用delete删除对象属性:delete box.name;//删除属性

日期对象Date,var d =new Date();
创建日期并制定时间:var d = new Date("2015/08/22");
注:日期的格式可以是“2015/8/22”,"2015-08-22"或1970年前日期的毫秒数56521211021;

alert(box.toDateString());//以特定的格式显示星期几、月、日、年;
alert(box.toTimeString());//以特定的格式显示时、分、秒和时区;
alert(box.toLocaleDateString());//以特定地区格式显示年、月、日;//(常用点)
alert(box.toLocaleTimeString());//以特定格式显示时、分、秒;
alert(box.toUTCString());//以特定的格式显示完整UTC日期:年、月、日、时、分、秒;

Date.parse("2015-08-24");//转换格式默认支持2015-08-24或2015/08/24;
d.getTime()/d.setTime();//返回距离1970年1月1日0时的毫秒数;
getTime获取某个日期自1970年以来的毫秒数;
setTime()修改日期的毫秒数,对应的日期也会修改;
日期对象Date:
set/getDate()//从对象中返回一个月中的某一天(1-31)
getDay()//从Date对象返回一周中的某一天(1-6)
set/getMonth()//从Date对象中返回月份(0-11)
set/getFullYear()//从Date对象以四位数返回年份
set/getHours()//返回Date对象的小时(0-23)
set/getMinutes()//返回Date对象的分钟 (0-59)
set/getSeconds()//返回Date对象的秒数(0-59)
set/getMilliseconds()//返回Date对象的毫秒
set/getTime()//返回1970年1月1日至今的毫秒数;

注意:1.月份是从0-11,所以取得的值要加1才是当前月份;2.星期天是0-6,0是星期天;

定时器:setInterval()函数;1.方法可按照指定的周期(以毫秒计)来调用函数或计算表达式;2.方法会不停的调用函数,直到clearInterval()被调用或窗口被setInterval()返回的ID值可用作clearInterval()方法的参数。
创建定时器:
setInterval(code,millisec)
1.code是要调用的代码块或者函数
2.millisec是周期性执行代码块或函数的间隔,以毫秒计;
//创建定时器timer,每隔1秒调用一次函数function
var timer = serInterval(function(){},1000);
关闭定时器:clearInterval(timer);

Math对象:Math对象常用的函数;
Math.round(3.6)//四舍五入;
Math.random()//[0-1)之间的随机数;
Math.max(num1,num2);//返回较大值
Math.min(num1,num2);//返回较小值
Math.abs(num);//返回绝对值
Math.ceil(19.3);//向上取整;
Math.floor(19.3);//向下取整
Math.pow(x,y);//返回x的y次方
Math.sqrt(num);//开平方
/*******************BOM********************/
bom的概念和定义:浏览器对象模型(browser object model);
在客户端JavaScript中,Window对象是全局对象,所有表达式都在当前环境中计算。
全局变量是window对象的属性。
全局函数是window对象的方法。
甚至 HTML DOM的document也是window对象的属性之一:window.document.getElementById("header");
系统对话框:浏览器可以通过alert()、confirm()、和prompt()方法可以调用系统对话框向用户显示信息。
1.alert()--弹出警告框:alert(“lee”);
2.提示框:确定取消confirm(“请确定或者取消”);
if(confirm("请确定或者取消")){
alert("您按了确定!");//按确定返回true;
}else{
alert("您按了取消!")//按取消返回false;
}
带输入的提示框:提示文字和输入框默认值
var num = prompt("请输入一个数字(提示信息)","0(默认值)");
返回值:点击确定,但会输入框的文本;点击取消,返回值为null;
alert(num);//得到输入的值;

window.open()方法可以导航到一个特定的URL,也可以打开一个新的浏览器窗口,一般可以接受三个参数:
1.要加载的URL;
2.窗口的名称或者窗口的目标;
3.一个特性的字符串;
open("http://www.baidu.com","_blank");//新建页面并打开百度,默认;
open("http://www.baidu.com","baidu");//新建页面并命名窗口并打开百度;
open("http://www.baidu.com","_parent");//在本页窗口打开,_blank是新建
【注】:不命名会每次打开新窗口,命名的第一次打开新窗口,之后在这个窗口中加载。
open("http://www.baidu.com","_baidu","width=200,height=200,top=100,left=100");//2第三个参数是设置新窗口位置;width=新窗口宽度,不能小于100,height 不能小于100,top 新窗口的Y坐标,不能是负值,left新窗口的X坐标,不能是负值;
// *1*open本身返回子窗口的window对象
//var box = open();
box.alert("":);//可以指定弹出的窗口执行alert();
// *2*opener:父窗口对象
var subWindow = open("demo.html","titi","left=0,top=0");
subWindow.opener.document.write("我的子窗口让我输出的");

延时调用:setTimeout():指定的时间过后执行代码;
setTimeout("alert('Leo')",1000);//不建议直接使用字符串
function box(){
alert("Leo");
}
setTimeout(box,1000);//直接传入函数名即可
var str = setTimeout(function(){
alert("Leo");
},1000)
【注】:直接使用函数传入的方法,扩展性好,性能更佳。上述方法会返回唯一标识符,可以通过它来取消超时调用。要取消尚未执行的超时调用计划,可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它。
clearTimeout(str);
Location对象:Location是bom对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。事实上,location对象是window对象的属性,也是document对象的属性,所以window。location和document。location等效;
alert(window.location);//获取当前的URL;
alert(location);//window可以省略;
alert(window.document.location);
/**************************************/
在web开发中,我们经常要获取诸如?id=5&search=ok这种类型的URL键值对。那么通过location,我们可以写个函数来一一获取;
function getArray(){
//创建一个存放键值对的数组;
var array=[];
//取出?
var str = location.search.substring(1);
//按&字符串拆分数组
var items = str.split("&");
//遍历
for(var i =0;i<i.items.length;i++){
var itemArray = items[i].split("=");
array[i] = itemArray[1];
}
return array;
}
Location对象的方法:assign()--跳转到指定的页面,与href等效;reload()--重载当前URL;replace()--用新的URL替换当前页面;
location.assign("http://www.baidu.com");//跳转到指定的URL
location.reload();//最有效的重新加载,有可能缓存加载;
location.reload(true);//强制加载,不经过缓存,从服务器源头重新加载;
location.replace("http://www.baidu.com");//可以避免产生跳转前的历史记录;

history对象:history对象是window对象的属性,它保存这用户上网的记录,从窗口被打开的那一刻算起。
属性:history.length;//history对象中的记录数
方法:history.back();//前往浏览器历史条目前的一个URL,类似后退
history.forward();//前往浏览器历史条目下的一个URL,类似前进
history.go(num);//浏览器在history对象中向前或向后

onScroll滚动事件:实时获取距离顶部的距离;
window.onscroll = function(){
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;( 标准浏览器只认识document.documentElement.scrollTop,在有文档声明时也只认识document.body.scrollTop; 这两者同时只会有一个值有效!
var box = document.getElementById("box");
box.innerHTML = scrollTop;
}
window.onload = function(){
alert("sss");
}//onload:加载页面完成之后,页面所有的资源也都加载完成;一个页面只能出现一次,出现多次,只有最后一次起作用;

obj.offsetTop 指obj间隔上方或上层空的地位,整型,单位像素。
obj.offsetLeft ~~~左方或上层~~
obj.offsetwidth

DOM就是document object model 定义了访问HTML文档的标准;
它允许脚本动态的访问和更新文档的内容、结构和样式;
加载HTML页面时,web浏览器生成一个树形结构,dom将这种树形结构成为节点组成的节点树。节点和节点之间关系 :父子--兄弟
节点的种类:<div title="属性节点">测试div(文本节点)</div>
查找元素:分别为--(1) getElementById():查找特定的ID元素的节点、 getElementsByTagName():获取相同元素的节点列表、 getElementsByName():获取相同名称的节点列表、 getAttribute():获取特定元素节点属性的值;、 setAttribute():设置特定元素节点属性的值和 removeAttribute():移除特定元素节点属性。
getElementById()方法接受一个参数:获取元素的ID如果找到相应的元素则返回该元素HTMLDivElement对象如果不存在则返回null;ps:上面的例子默认情况是返回null这无关是否存在ID=“box”的标签而是执行顺序的问题,解决办法:1.把script调用标签移到HTML末尾;2.就是用window.onload = function(){};

tagName:元素的标签名;innerHTML:标签内容;
var box = document.getElementById("box").id;//获取ID;
box.id = "person";//设置id(不推荐)
box.title;//获取title;box.title = '标题'//设置title;
box.style;//获取style对象;
box.style.color;//获取style中的color的值;
box.style.color = "red";//设置style对象中的color值;
box.className ;//获取class;
box.className = "box";//设置class;
alert(document.getElementById("box").)

getElementsByTagName()方法将返回一个数组,这个数组保存着所有相同元素名的节点列表。
getElementByName():可以获取到具有 相同属性name并name相同的不同元素节点返回一个对象数组,但是一定要注意该元素节点是否支持那么属性;(某些低版本浏览器会有兼容性问题)
box.getAttribute("id")//获取元素的ID值;
box.getAttribute('mydiv');//获取元素的自定义属性值;
box.getAttribute('class');//获取元素的class值;
setAttribute('class','aa');//设置属性和属性值(如果属性存在则会覆盖)
setAttribute('bbb','ccc');//设置字符你故意的属性和值;
removeAttribute();//方法可以移除HTML属性;
document.getElementById("box").removeAttribute('style');//移除style属性
DOM节点(节点属性):
节点可以分为 元素节点,属性节点,和文本节点,而这些节点又有三个非常重要额属性。分别为: nodeName. nodeType,和 nodeValue;
document.getElementById('box').nodeType;//元素节点;
attributes属性:返回该节点的属性节点集合;
box.attributes.length;//返回属性节点个数
box.attributes[0];//返回第一个属性节点
box.attributes[0].nodeType;//2,节点类型
box.attributes[0].nodeValue;//属性值
box.attributes['id'];//Attr,返回属性为ID的节点
box.attributes.getNamedItem('id');//Attr
firstChild和lastChild属性:
firstChild用于获取当前元素节点的第一个子节点,相当于childNodes[0];
lastChild用于获取当前元素节点的最后一个子节点,相当于childNodes[box.childNodes.length-1].
alert(box.firstChild.nodeValue);//获取第一个子节点的文本内容;
alert(box.lastChild.nodeValue);//获取最后一个子节点的文本内容;
childNodes属性:可以获取某一个元素节点的所有子节点;
var box = document.getElementById("box");//获取一个元素节点;
alert(box.childNodes.length);//获取这个元素节点的所有子节点;
alert(box.childNodes[0]);//获取第一个子节点对象;
PS:使用childNodes[n]返回子节点对象的时候,有可能返回的是元素子节点,比如HTMLElement;也有可能返回的是文本子节点,比如TEXT。元素子节点可以使用nodeName或者tagName获取标签名称,而文本子节点可以使用nodeValue获取。
for(var i = 0;i<box.childNodes.length;i++){
//判断是元素节点,输出元素标签名
if(box.childNodes[i].nodeType==1){
alert('元素节点:'+box.childNodes[i].nodeName);
//判断是文本节点,输出文本内容
}
else if(box.childNodes[i].nodeType==3){
alert('内容是:'box.childNodes[i].nodeValue);
}
}
Ps:在获取到文本节点的时候,是无法使用innerHTML这个属性输出文本内容的,这个非标准的属性必须在获取元素节点的时候,才能输出里面包含的文本。
alert(box.innerHTML);//innerHTML和nodeValue第一个区别就是取值的,那么第二个区别就是赋值的时候,nodeValue会把包含在文本里面的HTML转义成特殊字符,从而达到形成单纯文本的效果。
box.childNodes[0].nodeValue = '<strong>abc</strong>';//结果为<strong>abc</strong
box.innerHTML = '<strong>abc</strong>';
//结果为:abc
ownerDocument 属性:ownerDocument属性返回该节点的文档对象根节点,返回的对象相当于document。
alert(box.ownerDocument===document);//true,根节点;
parentNode,preciousSibling,nextSibling属性;

alert(box.parentNode.nodeName);//获取父节点的标签名;
alert(box.lastChild.previousSibling);//获取前一个同级(兄弟)节点;
alert(box.firstChild.nextSibling);//获取后一个同级(兄弟)节点;
忽略空白文白节点:
1.var body = document.getElementsByTagName('body')[0];
//获取body元素节点;
alert(body.childNodes.length);//得到子节点数;
ps:在非IE中,标准的dom具有识别空白文本节点的功能,所以在火狐浏览器是7个,而IE自动忽略了,如果要保持一致的元素子节点,需要手工忽略掉它;
2.function filterSpaceNode(nodes){
var ret = [];//新数组;
for(var i = 0;i< nodes.length;i++){
//如果识别到空白文本节点,就不添加数组
if(nodes[i].nodeType==3&&/^\s+$/.test(nodes[i].nodeValue)){
continue;//把每次的元素节点,添加到数组里;
}
ret.push(nodes[i]);
}
return ret;
}
ps:上面的方法,采用的忽略空白文件节点的方法,把得到元素节点累加到数组里返回。那么还有一种做法是直接删除空位文件节点即可。


猜你喜欢

转载自blog.csdn.net/ylinwind/article/details/80431281
今日推荐