JavaScript DOM编程艺术小笔记

第一章

JavaScript简史

  • JavaScript是Netscape公司与sun公司合作开发，第一个版本出现在1995年推出的Netscape navigator 2 浏览器中
  • 1998年10月完成第一级dom

第二章 语法

  • 注释//或则/**/

变量

  • 把那些会发生变化的东西称为变量 var abc="jasd";

数据类型

  • 字符串
  • 数值
  • 布尔值
  • 数组
  • 对象

操作

  • 算术运算符
  • 条件语句if判断
  • 比较操作符
  • 逻辑操作符
  • 循环语句 while循环 for循环

函数

  • 允许你的代码随时调用的语句

变量作用域

  • 全局变量--- 可以在脚本中任何位置被引用，包括函数内部

  • 局部变量---只存在声明它的那个函数的内部，在那个函数的外部是无法引用的，作用域仅限于某个特定的函数

  • 注意！！！ 如果在某个函数中使用var，那么这个变量就是局部变量，只存在于这个函数的上下文，反之，如果没有使用var，则视为全局变量，如果脚本里面已经存在一个与之同名的全局变量，这个函数就会改变那个全局变量的值

    function abc(temp){
    a = temp*temp;
    return abc;
}
  var a= 5;
  var res = abc(3);
  console.log(a);//值为9

对象

  • 属性是隶属与某个特定对象的变量

  • 方法是只有某个特定对象才能调用的函数

  • 对象就是由一些属性和方法组合在一起而构成的一个数据实体

  • 属性和方法都是通过点“.”语法来访问

      object.property//属性访问person.age;
  object.method()//方法访问person.walk();

内建对象

  • 使用new关键字去初始化一个数组，其实就是创建一个array对象实例
    • 数组的长度arrayname.length
  • math对象，date对象。。。

宿主对象

  • 由浏览器提供的预定义对象就是宿主对象
  • 宿主对象包括form，image，element等

DOM

  • D document
  • O object
    • 用户定义对象：由程序员自行创建
    • 内建对象：内建在JavaScript语言内的对象，如Array,Math,Date...
    • 宿主对象：由浏览器提供的对象
    • M model 某种事物的表现形式

节点

  • 表示网络的一个连接点，一个网络就是一些节点构成的集合

元素节点

  • 元素 标签

文本节点

  • 文本

属性节点

  • 属性

获取元素

  • getElementById
    • 这个方法返回一个与那个有着对应id属性值的元素节点对应的对象
  • getElementsTagName
    • 返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素
  • getElementByClassName
    • 返回一个相同类名的元素的数组
    • 还可以查找带有多个类名的元素 只需在参数中用空格分隔开

获取和设置属性

  • getAttribute(attribute)获取元素的属性
  • setAttribute(attribute) 修改元素的属性

非DOM解决方案

  • element.value=“the new value”; 等价于element.setAttreibute("value","the new value");

事件处理函数

  • 在特定事件发生时间调用特定的JavaScript代码 event=“JavaScript statement” onclick=“abc();”
  • return false；认为这个链接没有被点击，而没有触发默认行为

childNodes属性

  • 可以用来获取一个元素的所有子元素，它是一个包含这个元素全部子元素的数组：element.childNodes
  • 其中也包括三种类型的节点还有空格和换行符等

nodeType属性

  • node.nodeType
  • nodeType属性总共有12种可能值
    • 元素节点nodeType 属性值是1
    • 属性节点的nodeType属性值是2
    • 文本节点的nodeType属性值是3

nodeValue属性

  • 用来得到和设置一个节点的值
  • node.nodeValue

firstChild和lastChild属性

  • 数组元素childNodes[0]等价于firstChild
  • node.firstChild
  • lastChild也一样

最佳实践

  • open方法创建新的浏览器窗口
    • Window.open(url,name,features)
    • 这三个参数都是可选的
    • 第一个参数是想在新窗口打开网页的url地址，如果省略这个参数，屏幕将弹出一个空白浏览器窗口
    • 第二个是新窗口的名字，可以在代码中通过这个名字与新窗口进行通信
    • 最后一个是一个以逗号分隔的字符串，内容是新窗口的各种属性（工具条，菜单条，初始位置，等等）
    • Window.open("","popup","width=320,height=480");

"javascript:"伪协议

  • “真”协议用来在因特网上的计算机之间传输数据包，如http协议，ftp协议
  • 伪协议是一种非标准的协议，“Javascript：”伪协议可以让我们通过一个链接去调用JavaScript函数

内嵌的事件处理函数

渐进增强，平稳退化

对象检测

  • if(!getElementById) return false;

性能考虑

  • 尽量少访问DOM和尽量减少标记
  • 合并和放置脚本 使用外部文件
  • 压缩脚本

第六章

  • window.onload=fun1;window.onload=fun2;只会执行第二个函数，我们可以创建匿名函数包裹 window.onload=function{
    fun1();
    fun2();
    }
  • 使用addLoadEvent函数创建队列执行

第七章动态创建标记

  • document.write
  • innerHTML属性

dom方法

  • createElement
    • document.createElement("p")
  • appendChild
    • parent.appendChild(child)
  • createTextNode
    • document.createTextNode("abc")

在已有元素前插入一个新元素

  • parentElement.insertBefore(newElement,targetElement)
    • targetElement.parentNode.insertBefore(newElement,targetElement)

在现有方法后插入一个新的元素

  • DOM本身没有提供，不过我们可以自己编写

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

ajax

  • readyState有5个可能值
    • 0表示初始化
    • 1表示正在加载
    • 2表示加载完毕
    • 3表示正在交互
    • 4表示完成
  • responseText用于保存文本字符串形式的数据
  • responseXML用于保存XML数据

第九章CSS-DOM

  • element.style.porperty
  • style属性只能找到内联式的样式，找不到内嵌式和外部式的样式
  • style可以改写样式
  • className 语法：element.className=value

第十章 用JavaScript实现动画效果

  • variable=setTimeout("function",interval)
  • clearTimeout(variable)

第十一章

  • modernizr 是一个开源JavaScript库，利用它的富特性检测功能，可以对HTML5文档进行更好的控制
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/cyany/p/7219124.html