js初级+DOM

1.DOM的结构

html文档中,所有的事物都是节点,DOM是被视为节点树的HTML。

整个文档时一个文档节点;每个html元素是元素节点;html元素内的文本是文本节点;

每个html属性是属性节点;注释是注释节点。

注解:html元素即为html的标签,如:<a>元素(标签),div元素,input元素,body元素,html等。元素一定是节点,但是节点不一定是元素。文本节点,属性节点不是元素。

nodeName属性:

nodeName是只读的。

元素节点的nodeName与标签名相同

属性节点的nodeName与属性名相同

文本节点的nodeName始终#text

文档节点的nodeName始终是#document

注释:nodeName始终是大写字母

nodeValue属性:

元素节点的nodeValue是undefined或null

文本节点的nodeValue是文本本身

属性节点的nodeValue是属性值

一些常用的HTMLDOM属性:

innerHTML-节点(元素)的文本值

parentNode-节点(元素)的父节点

childNodes-节点(元素)的子节点

attributes-节点(元素)的属性节点

一些常用方法

document.getElementById()返回带有指定ID的元素。

document.getElementsByTagName()返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。

document.getElementsByClassName()返回包含带有指定类名的所有元素的节点列表。(不推荐,有很多浏览器上不兼容)

element.appendChild(newChild)把新节点追加到自己的孩子节点的最后一个

element.removeChild(oldChild)删除子节点。

element.replaceChild(newChild,oldChild)替换子节点。

element.insertBefore(newChild,refChild)在指定的子节点前面插入新的子节点。

document.createAttribute("属性名")创建属性节点。

document.createElement("div")创建元素节点。

document.createTextNode("str")创建文本节点。

element.getAttribute("name")返回指定的属性值。

element.setAttribute("name","value")把指定属性设置或修改为指定的值。

element.cloneNode(true);克隆一个一样的节点

//注:创建属性节点与设置的区别:

createAttribute的使用方法:(多了一个名为good的属性节点仅建立一个属性节点)

varatt=document.createAttribute("good");

att.value="demogood";//设置属性的值

document.getElementsByTagName("H1")[0].setAttributeNode(att);

而setAttribute建立一个属性,并同时给属性捆绑一个值。(注:setAttribute中的属性可以是任意的,随便设置)

children只返回元素如input,span,script,div等,不会返回TextNode,注释

childNodes只但会返回元素,还会返回TextNode,注释等。

DOM获取元素的方式:js选择器

1.form名.表单名.value

2.document.getElementById("..")

3.document.getElementsByName("..");

4.document.getElementsByTagName("...");

由于类似P、div、span他们没有attribute。意味着

我们无法获取他们的文本。

获取文本的方式是:

1.innerHTML:获取子HTML

2.innerText:获取文本。

-------------------------------------

1.常用的输入框

模式对话框

alert

confirm确认框,返回true/false

showModalDialog打开页面

非模式

prompt有返回值

open打开新页面

BOM:documentbrowserhistorytopwindow

2.事件:

鼠标:onmouseoveronmousemoveonmouseuponmousedown

键盘:onkeypressonkeyuponkeydown

内存:onloadonunloadonfocusonblur

触摸:ontouchonlongtouch

(1)js:基于对象事件驱动的脚本。脚本必需依赖宿主而存在

比如:js要寄生在HTML才能存在

除了js还有vbscript,ECMScript等都是属于脚本语言。

node.js除外。它是基于分布式运算和服务器作为宿主的脚本语言

所有他是唯一不需要HTML作为宿主的新型脚本语言。

普通JS是脚本运行客户端,而NODEJS中的JS是运行于服务器端

(2)js方法名不能重载。因为有arguments存在,重载没有意义

(3)js变量定义

vart="rwr";//也可以直接写成t="rwr";即缺省写var,因为js是需要通过值来确定类型的,

即,先有值,后有类型,但是代码规范和可读性,建议加上var

vart;//此时值为undefine,通过typeof得到元类型为Undefine

document.getElementById('notExistElement'));//如果不存在改元素,则为null,通过typeof得到元类型为Object

(4)--js先得到值,才知道这个变量的类型,体现了动态性

js是动态语言,数组长度如果定义的是3,但是还是可以继续添加数据,即边用数组长度变加。这样非常的灵活,很像java的集合list

(5)函数名首字母大写,则变成类

(6)js循环出来的是序号

(7)parseIntparseFloat

(8)数组定义的4种方式

方法1:

vararr1=newArray(3);//维度是3个

arr1[0]=1;

arr1[1]=21;

arr1[2]=3;

方法2:

vararr2=newArray("小胡","小习","小强");

arr2[3]=34;

arr2[4]=342;

方法3:

vararr3=[];

arr3[0]=31;

arr3[1]=321;

arr3[2]=3;

方法4:

vararr4=["小胡","小习","小强"];

arr4[3]=34;

arr4[4]=342;

(9)对象创建:

方法1:

varo=newObject();

o.stuId=1;

o.stuName='小习';

o.stuAddr="中南海";

o.sayLove=function(){

document.write("loveu..");

}

(10)js中类的方法名前置才可以在外部被访问,如:this.sayLove=function(){document.write("loveu..");}

(11)js中的私有,公开,特权。

【私有变量】在对象内部使用'var'关键字来声明,而且它只能被私有函数和特权方法访问。

【私有方法】在对象的构造函数里声明(或者是通过varfunctionName=function(){...}来定义),

它能被特权方法调用(包括对象的构造方法)和私有方法调用,私有函数只能访问私有的方法和属性。

【特权方法】通过this.methodName=function(){...}来声明而且可能被对象外部的代码调用。

它可以使用:this.特权函数()方式来调用特权函数,使用:私有函数()方式来调用私有函数。

【公共属性】通过this.variableName来定义而且在对象外部是可以读写的。不能被私有函数所调用。

【公共方法】通过ClassName.prototype.methodName=function(){...}来定义可以从对象外部来调用。

【原型属性】通过ClassName.prototype.propertyName=someValue来定义。

【静态属性】通过ClassName.propertyName=someValue来定义。

【静态方法】通过ClassName.funName=function(){...}来定义。

公开方法与特权方法的比较:相同特点:1都可以在构造函数外部公开访问。2.都可以访问公有属性

不同点:特权方法可以访问私有属性和方法,而公有方法不能。

类的私有变量用var申明,而公开属性用this定义。特权方法用this.methodName=function(){...}来申明

相关推荐