js初级+DOM

阅读更多

1.DOM的结构
  html文档中，所有的事物都是节点，DOM是被视为节点树的HTML。
  整个文档时一个文档节点；每个html元素是元素节点；html元素内的文本是文本节点；
  每个html属性是属性节点；注释是注释节点。

  注解：html元素即为html的标签，如：元素（标签），div元素，input元素，body元素，html等。元素一定是节点，但是节点不一定是元素。文本节点，属性节点不是元素。


  nodeName 属性：
      nodeName 是只读的。
      元素节点的nodeName 与标签名相同
      属性节点的nodeName 与属性名相同
      文本节点的nodeName 始终#text
      文档节点的nodeName始终是#document
      注释：nodeName始终是大写字母

nodeValue属性：
      元素节点的nodeValue是undefined或null
      文本节点的nodeValue是文本本身
      属性节点的nodeValue是属性值



一些常用的 HTML DOM 属性：
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的属性节点  仅建立一个属性节点）
var att=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:document browser history top window
2.事件：
   鼠标：onmouseover onmousemove onmouseup onmousedown
   键盘：onkeypress onkeyup onkeydown
   内存：onload onunload  onfocus onblur
   触摸：ontouch onlongtouch










（1）js:基于对象事件驱动的脚本。脚本必需依赖宿主而存在
  比如：js要寄生在HTML才能存在
除了js还有vbscript，ECMScript等都是属于脚本语言。
   node.js除外。它是基于分布式运算和服务器作为宿主的脚本语言
所有他是唯一不需要HTML作为宿主的新型脚本语言。
普通JS是脚本运行客户端，而NODEJS中的JS是运行于服务器端




（2）js方法名不能重载。因为有arguments存在，重载没有意义


（3）js变量定义
var t="rwr";  //也可以直接写成t="rwr";即缺省写var，因为js是需要通过值来确定类型的，
即，先有值，后有类型，但是代码规范和可读性，建议加上var


var t;  //此时值为undefine，通过typeof 得到元类型为Undefine

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



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

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



（5）函数名首字母大写，则变成类



（6）js循环出来的是序号


（7）parseInt    parseFloat


（8）数组定义的4种方式
    方法1：
    var arr1=new Array(3);//维度是3个
arr1[0]=1;
        arr1[1]=21;
arr1[2]=3;
  
    方法2：
     var  arr2=new Array("小胡","小习","小强");
     arr2[3]=34;
     arr2[4]=342;

    方法3：
     var arr3=[];
arr3[0]=31;
        arr3[1]=321;
arr3[2]=3;

    方法4：
        var  arr4=["小胡","小习","小强"];
arr4[3]=34;
        arr4[4]=342;



（9）对象创建：
    方法1：

       var  o=new Object();
o.stuId=1;
o.stuName='小习';
o.stuAddr="中南海";
        o.sayLove=function(){
     document.write("love u..");
}

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


(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(){...}来申明