元学习实践（二） —— 从小项目倒推《JavaScript DOM》知识重点

image (1).jpg

闪回

昨天文章回顾, 请 点击元学习课心得和实践 —— 八小时搞定《JavaScript DOM》

代码已上传：
git clone https://github.com/elizachen/JaySkript.git
Sample网站运行效果：http://elizachen.cc/JaySkript/

重点

• 概念
  JavaScript 是什么？
  JavaScript 是一种脚本语言，通常只能通过Web浏览器去完成一些操作，而不能独立运行。它和Java没有关系，当初这样取名，是一种营销策略。JavaScript 是解释型语言，代码错误只有到运行时才能发现。
  DOM 是什么？
  D: Document, O: Object, M: Model. 文档-对象-模型。DOM是一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口，动态的访问和修改文档内容、结构和样式。
• 怎么用？
• 项目框架：
  结构层：
  html - 搭建文档结构表示层：
  CSS - 设置文档呈现效果行为层：
  Javascript DOM - 实现文档行为
• 三者如何相互作用

  1. 在html中包含使用的css 和javascript：
     < link rel=”stylesheet” media=”screen” href=”styles/basic.css” /> < script src=”scripts/global.js”>

  2. 连接的钩子：

     • 使用Class
       html ：结构内容

       < p class=“special”>This paragraph has he specil class
       **css **：如何呈现
       .special { font-style: italic; }

       ** javascript** ：具体行为操作

       var special = document.getElementByClassName(“special”);……

     • 使用 id : 某个元素的独一无二的标识符。
       **html **：结构内容

       < ul id="imagegallery"> .....

     
     **css **：如何呈现

     imagegallery li { display: inline; }

     ** javascript** ：具体行为操作

     function prepareGallery()
     { ......
     var gallery = document.getElementById(“imagegallery”);
     var links = gallery.getElementsByTagName(“a”);
     for ( var i=0; i < links.length; i++)
     {
     links[i].onclick = function() { return showPic(this); }
     }
     }

  3. 使用tag ：
     **html **：结构内容

     < section id=”jay”> …..

     css ：如何呈现

     section, header, article, nav { display: block; }

     ** javascript** ：具体行为操作

     function showSection(id) {
     var sections = document.getElementsByTagName("section");
     for (var i=0; i if (sections[i].getAttribute("id") != id) {
     sections[i].style.display = "none";
     } else {
     sections[i].style.display = "block";
     }
     }
     }

• 主要的函数 & 用途：
  获取元素，以检索出html里面定义的任何一个对象信息，还可以改变元素的属性

• getElementById
  getElementsByTagName
  getElementsByClassName
  获取和设置属性

• getAttribute
  setAttribute
  动态创建标记

• createElement
  createTextNode
  appendChild
  insertBefore

• CSS-DOM 具体技术（本书实现的函数）：
  读写Style对象的各种属性
  styleHeaderSiblings
  stripeTables
  highliRows

• 主要的属性

  • childNodes ： 获取任何一个元素的所有子元素
    nodeType: 元素节点，属性节点，or 文本节点
    nodeValue：一个节点的值
    firstChild 和 lastChild

• 兼容
  使用 Moderniser 库

• 编者按

1. 使用有意义的标记来构建页面结构
2. 把表现性信息都分离到CSS样式表中
3. 负责任的使用JavaScript （关于平稳退化，初学者可以暂时不要管那些没有Javascript的情况。）

了解了JavaScript 的概念和用法，接下来遇到具体问题，多翻翻参考手册：http://www.w3school.com.cn/jsref/index.asp
http://www.w3school.com.cn/jsref/index.asp

**胜任者 **的大门在前方，加油！共勉！谢谢阅读。

相关链接：
元学习课心得和实践（一） —— 八小时搞定《JavaScript DOM》
元学习实践（三）五大法宝，助你抓住Bug，顺利通关
元学习实践（四）丰富多彩的Web开发世界

题图摄影：geralt
图片授权基于：CC0协议
个人转载内容至朋友圈和群聊天，无需特别申请版权许可。
** 转载时请务必注明出处。**