欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JavaScript DOM编程艺术 读书笔记

程序员文章站 2022-07-12 18:00:18
...

绕不过去的坑。港拔蛋

1.js代码应该存放于HTML中</body>之前，这样能使浏览器更快加载脚本
<!DOCTYPE html><html><head lang="en">    
<meta charset="UTF-8">    
<title>Just a test</title>    
</head>
<body>
something content here!
</body>        
<script type="text/javascript" src="gallery.js"></script> 
</html>

2.语法

<1>变量

var 声明 大小写敏感，允许字母，数字，美元符号，下划线（但是第一个字符不能为数字）

<2>字符串，数值，布尔值
<3> 数组
var beatles = Array();  //关键字申明
var beatles = [];          //类似python数组申明

特别有意思的地方是，js中有个关联数组，类似python中的字典。可以用字符串来代替数字值。如下实例:

var lennon = [];
lennon['name'] = 'John';
lennon['year'] = 1940;
lennon['living'] = false;
<4> 对象
var lennon = Object(); //关键字声明
lennon.name = 'John';
lennon.year = 1940;
lennon.living = false;
----------------------------------------
var lennon = {name:'John', year:1940; living:false}; //大括号声明
<5>操作 算术操作符

跟python差不多，只不过支持 i++， i-- 累加累减。

<6>控制流

if语句，大部分跟python差不多，值得注意的是 js的比较操作符中分为严格比较（===）和不严格比较（==），区别 ==操作符认为空字符与false相同，而 === 操作符则认为两则不同。

if(condition){
  statements;
}else{
}

逻辑操作符
&&与操作符，相当于python中的 and关键字
|| 或 操作符，相当于python中的 or 关键字

循环
while循环，for循环

var beatles = ['John', 'pual', 'George', 'Ringo'];
for(var i=0; i<beatles.length; i++){
   alert(beatles[i])
}

函数 使用function关键字定义，值得注意的是函数的作用域，
如果函数中使用var 定义变量，则视其为局部变量，如果没有var声明，则为全局变量。

function shout(){
  var beatles = ['John', 'pual', 'George', 'Ringo'];
  for(var i=0; i<beatles.length; i++){
     alert(beatles[i])
  }    
}

对象 使用关键字new 创建新的实例

var jeremy = new Person；  //创建新实例

内建对象
数组length属性, 获取数组有多少个元素
Math.round（） 把十进制的数值舍入为最接近的整数
Date对象包括getDay(), getHours(), getMonth()等一系列方法

var current_date = new Date();
var today = current_date.getDay();

宿主对象， 是指浏览器提供的预定义对象，包括Form, Image, Element等

3. DOM

DOM有三种节点，元素节点（element node）, 文本节点(text node), 属性节点

getElementById( id )

根据元素id 获取元素节点 对象

getElementByTagName( tag )

根据标签 返回一个 对象数组
值得注意的是，该方法可以用通配符（‘*’）为参数，返回一个所有元素的对象数组

document.getElementById('purchases');
document.getElementByTagName('a');
getElementByClassName( class )

根据标签类属性，放回一个 元素对象
值得注意的是，该方法可以带多个类名元素，用空格*即可，而且类名顺序不重要
可惜的是该方法许多老旧浏览器不支持，所以在考虑兼容性的时候需要重写，如下函数

function getElementsByClassName(node, classname){
  if (node.getElementsByClassName){    //如果支持 使用老方法
    return node.getElementByClassName(classname);  
  }else{
      var results = [];
      var elems = node.getElementByTagName('*');
      for(var i=0; i<elems.length; i++){
        if(elems[i].className.indexOf(classname) !=-1)
          results[results.length]= elems[i];  
      }
    }
}
getAttribute

object.getAttribute( attribute )获取元素属性

var  paras = document.getElementsByTagName('p');
for(var i=0; i<paras.length; i++){
  var title_text = paras[i].getAttribute('title');
  if ( title_text ) alter(title_text);
}
setAttribute

object.setAttribut( attribute, value ) 设置属性值

3 js图片库

一 事件处理函数

showPic( this )
函数showPic以this为关键词时，其中this是指‘这个对象’ 具体表示的话为某某元素节点。

时间处理函数的处理工作机制，给某个元素添加了时间处理函数后，一旦时间发生，相应的js代码就会执行，被调用的嗲吗返回一个至，这个值将被传递那个时间处理函数，如 给某个链接添加一个onclick时间处理函数，并让这个处理函数所触发的js代码返回true 或者fasle。 js返回true，onclick时间处理函数就认为 这个链接呗点击了，js返回false，onclick事件处理函数就认为‘这个链接没有被点击’

二 childNodes属性

element.childNodes
childNodes可以用来获取任何一个元素的所有子元素

三nodeType

node.nodeType 属性有12中可取值，但是只有三种有实用价值。
元素节点 nodeType的值为 1；
属性节点 nodeType的值为 2；
文本节点 nodeType的值为 3；

四 nodeValue

node.nodeValue 获得节点的值 如:

<p id="description"> something here </p>

那么获取文本节点的值应该这样写

var description = document.getElementById( 'description' );
text = description.childNodes[0].nodeValue;
>>>text为something here
五 firstChild 和lastChild属性

node.firstChild = node.childNodes[0] 访问节点的第一个子节点
node.lastChild = node.childNodes(node.childNodes.length-1) 访问节点的最后一个子节点

4 最佳实践

平稳退化
不要使用 javascript: 伪协议
不要使用 内嵌的实践处理函数
javaScript应该与HTML分离
添加对象检测， 如 if（！getElementById） return false;
性能考虑
一 不管什么时候，只要查询DOM中的某些元素， 浏览器都会搜索整个DOM树，从中查找可能过匹配的元素
二 尽量减少文档中的标记数量
三 合并js文档，减少加载页面时发出的请求数量
四 把所有<script>标签都放到文档末尾 </body>之前
五 压缩脚本

共享onload事件
/*一个函数一个函数加载*/
  window.onload = firstFunction;
  window.onload = secondFunction;

  /*创建匿名函数 加载  同时少量函数加载 最优方案*/
  window.onload = function{
     firstFunction( );
     secondFunction( );
  }
  /* 同时加载多个函数*/
  function addLoadEvent( func ){
    var oldload = window.onload;
    if( typeof window.onload != 'function' ){
      window.onload = func;
    }else{
      window.onload = function( ){
        oldload( );
        func( );
        }
      }
  }
>>>使用的时候可以这样 addLoadEvent( firstFunction );
        addLoadEvent( secondFunction );
关于三元操作
variable = condition ? if true : if fasle
//是指判断条件是否为true, 如果为true 把 ？ 后的表达式赋值给variable，反之则把 : 后的表达式赋值给 variable

5 动态创建标记

document.write()
document.innerHTML()

  document.write('<p>This is insert</p>')
  //缺点是混杂HTML与js语言
  document.innerHTML( '<p>i inserted <em>this</em> contetn</p> ' )
  //可以插入一大片html但是 缺点是混杂HTML与js语言，容易出错

值得注意的是， document.write, document.innerHTML 都是HTML专有属性，如果浏览器读取XHTML文档是将忽略innerHTML和write

DOM方法动态创建

document.createElement( nodeName ) 创建元素节点
**parent.appendChild( child ) **
document.createTextNode( text)

  var para = document.createElement( "p" ); //创建p元素节点

  var testdiv = document.getElementById( "testdiv" )； //获得testdiv元素节点
  testdiv.appendChild( para );  //p元素节点添加为testdiv节点的子元素
  var text = document.createTextNode( "Hello World" )；
  para.appendChild( text );

inserBefore( )在已有元素前插入一个新元素
parentElement.insertBefore( newElement, targetElement )

var gallery = document.getElementById( "imagegallery" );
gallery.parentNode.insertBefore( placeholder, gallery );

自定义inertAfter( )函数

function insertAfter( newElement, targetElement ){
  var [aremt = targetElement.parentNode;
  if( parent.lastChild == targetElement ){
      parent.appendChild( newElement );
    }else{
      parent.insertBefore(newelement, targetElement.nextSibling);
      }
}

关于ajax

上一篇： C++ STL标准模板库（list）

下一篇： [算法笔记]C++标准模板库（STL）（3）map

推荐阅读