zoukankan      html  css  js  c++  java
  • JS DOM编程艺术 | 笔记

    第一章 JavaScript语法

    1、最好的方法是<script>标签放到HTML文档的最后,</body>标签之前。

    2、与解释性语言相比,编译型语言往往速度更快,可移植性更好。

    3、字符串用单引号双引号都行,最好根据字符串包含的字符来选择,可以用转移字符

    4、一个数组中可以存不同的数据类型比如:var Lennon = ["john",1940,false];

    5、与数组类似,对象也是使用一个名字表示一组值,对象的每一个值都是对象的一个属性,使用点号来获取属性。创建对象使用Object关键字。

    6、拼接:把多个字符串首位连接在一起的操作 var message = “I am felling”+"happy"; JS是弱类型的语言,字符串+数字=字符串

    7、if(false==空字符串) 会返回true,要严格比较要用另外一种等号===

    8、函数声明function

    9、在函数中使用了var,变量就会被视为局部变量。如果没有使用var,就会被视为全局变量。

    10、对象里的数据可以用两种形式访问:属性和方法,属性和方法都可以用点来访问。

    11、给定对象创建一个新实例需要使用new关键字,如var a= new person;

    12、JS里对象可以分三类:

                  用户定义对象:程序员自行创建的对象。

                  内建对象:内建在JS语言里的对象,比如Array、Math和Data等。

                  宿主对象:由浏览器提供的预定义对象。

    13、DOM把文档表示为一颗家谱树,M代表Model。DOM里包含许多不同类型的节点。

                  元素节点

                  文本节点

                  属性节点

    14、id属性就像是一个挂钩,一头连着文档里的某个元素,另一头连接CSS样式表里的某个样式,DOM也可以使用这种挂钩。

    15、getElementsByTagName和getElementsByClassName返回的是数组

    16、getAttribute方法可以获取各个属性值。//不属于document对象

           setAttribute可以对属性节点值做出修改

    17、DOM的工作模式:先加载文档的静态内容,再动态刷新,刷新不影响文档的静态内容。DOM的真正威力在于对页面内容进行刷新却不需要在浏览器里刷新页面。

    18、DOM是一种适用于多种环境和多种程序设置语言的通用型API

    19、onclick事件处理函数,如果收到的JS代码返回值为true,则认为被点击了。如果接收的返回值是false,则认为没有被点击。

    20、<a href="#" > 这里的#代表的是未指向任何目标的内部链接。

    第二章 属性和方法

    1、childNodes属性

                  可以获取任何一个元素的所有子元素element.childNodes,返回的是一个数组

    2、nodeType属性

                  node.nodeType的值是一个数字而不是字符串

                  1—元素节点

                  2—属性节点

                  3—文本节点

    3、nodeValue属性

                  得到的并不是包含在这个这个段落里的文本

    4、firstChild和lastChild属性

                  获取数组第一个和最后一个元素

    5、nodeName属性

                  获取节点名称,总是返回一个大写字母的值

    第三章 实践&思想

    1、平稳退化

                可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利的浏览你的网站,就是所谓的平稳退化,虽然某些功能无法使用,但最基本的操作仍能顺利完成。

    2、向后兼容

                  对象监测:把某些方法打包在一个if语句中,根据这个方法是否存在true还是false来决定采取怎样的行动。//监测浏览器对JS的支持程度。

                  浏览器嗅探:通过JS代码检索关于浏览器品牌和版本的信息。

    3、性能考虑

                  为了保证应用流畅的运行,应该注意

                  尽量少访问DOM和尽量减少标记

                  合并和放置脚本:合并到一个js文件中,减少加载页面时发送的请求数量

                  压缩脚本:比如删除空格和注释,有很多压缩工具可以使用。精简版本一般命名中添加min.js

    4、JS和HTML是否应该分离

                  JS和HTML一般都混杂在一起

                  分离原则:如果想要用JS给某个网页添加一些行为,就不应该让JS代码对这个网页结构有任何依赖。

    5、onkeypress事件处理函数

                  这个函数容易出问题,用户每按下一个键都会触发它

    6、getElementById、getElementsByTagName、getAttribute、setAttribute都是DOM Core的组成部分,而onclick属于HTML-DOM里的内容。

    第四章 动态创建标记

    1、document.write

                  write()方法可以方便快捷的把字符串插入到文档里 /*write最大的缺点是违背了行为应该与表现分离的原则 */

    2、innerHTML属性

                  浏览器几乎都支持innerHTML,起源于IE4。这个属性不是W3C DOM标准的组成部分,但是已经包含在HTML5规范中了。

    3、DOM方法

                  DOM是文档的表示,是一条双向车道,不仅可以获取文档的内容,也可以更新文档的内容

                  createElement方法

                                只要使用了createElement方法,可以把新创建出来的元素赋值给一个变量。

                  appendChild方法

                                为元素添加一个子节点

                  createTextNode方法

                              把文本插入到一个空白的节点中,这个节点已经插入到了文档的节点树中。

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

                  insertBefore()方法  /* 新元素、目标元素、父元素   parentElement.insertBefore(newElement,targetElement)  */

           在现有元素后插入一个新元素

                  DOM本身没有提供insertAfter方法,所以可以自己写一个

    1 function insertAfter(newElement,targetElement){
    2     var parent = targetElement.parentNode;
    3     if(parent.lastChild == targetElement){
    4         parent.appendChild(newElement);
    5     }else{
    6     parent.insertBefore(newElement,targetElement.nextSibling);
    7     }
    8 }

    5、Ajax

                  Hijax /*渐进增强地使用Ajax */

                  Ajax应用主要依赖于服务器端处理,而非客户端处理。

    第五章 充实文档的内容

    1、使用DOM要记住两个原则:

                  渐进增强:先从最核心的部分开始,然后逐步完善。

                  平稳退化:渐进增强必然支持平稳退化。

    2、<abbr>标签:缩略语

                  <acronym>标签:首字母缩写词 /* 在HTML5中已经被<abbr>代替 */

    3、displayAbbreviation函数在IE6或者更早的windows版本中有问题

    4、避免使用DOM技术来创建核心内容

    第六章 CSS-DOM

    浏览器看到的网页其实是由三层信息构成的共同体:结构层、表示层、行为层

    1、结构层

                  由HTML或者XHTML之类的标记语言负责创建。标签页比如<p>对网页内容的语义做出了描述。

    2、表示层

                  由CSS负责完成,CSS描述页面内容应该如何呈现。

    3、行为层

                  JS和DOM主宰的领域

    4、这三种技术之间存在一些潜在的重叠区域,CSS利用伪类走进DOM的领地。

    5、style属性

                  文档的每个元素节点都有一个属性style

                  获取颜色可以使用style对象的color属性element.style.color

    6、许多DOM属性是只读的,也有例外,比如style对象的各个属性都是可读写的。

    7、利用表格做页面布局不是好主意,但利用表格来显示表格数据却是理所当然。

    8、className属性

                  可以用来设置一个元素的class属性,通过className属性设置某个元素的class属性时课替换掉元素原有的class。

    第七章 JS实现动画效果

    结合CSS-DOM和JavaScript的setTimeout函数,可以实现一个简单的动画。

    第八章 HTML5

    1、给<html>元素添加一个no-js类<html class="no-js">可以使浏览器在不支持JS的情况下应用CSS样式。

    2、在IE中添加未知元素,必须使用类似下面的JS代码来创建该元素document.createElement('article');

                  /*Modernizr.js可以帮助我们做这件事  */

    3、音频和视频<video>和<audio>

                  浏览器显示<video>元素时,会添加统一的标准播放控件,想要自定义需要DOM属性来实现。

                使用控件一定要在<video>元素中添加control属性<video src="movie.ogv" control>

  • 相关阅读:
    bootstrap如何设置每一个选项卡对应一个页面
    SpringBoot集成百度UEditor图片上传后直接访问404解决办法
    从0开始完成SpringBoot+Mybatis实现增删改查
    Luarocks 安装艰难过程
    [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: self signed certificate in certificate chain (_ssl.c:1076)')))
    python + selenium 搭建环境步骤
    mongodb的安装
    git-新建git用户流程-1
    git-关联远程git仓库详细步骤-2
    Django启动服务的流程
  • 原文地址:https://www.cnblogs.com/oaoa/p/14354196.html
Copyright © 2011-2022 走看看