René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"【JavaScript】【学习心得】学习 JavaScript 第二天","articleBody":"【JavaScript】【学习心得】学习 JavaScript 第二天\n\n昨天 JavaScript 第一天，洋洋洒洒三千字，但是 [imooc](http://www.imooc.com/wenda/detail/235627) 上竟然没有小伙伴而围观, 让我的心拔凉拔凉的，我这儿可是有满满的干货，还附赠逗比属性。另外 imooc 的编辑器竟然不支持 markdown，满地打滚要求 imooc 的攻城狮火速支持 markdown。好了废话不多说，治病看疗效，我还是踏踏实实的继续练习 JavaScript 吧。\n\n昨天咱们已经学习了《JavaScript DOM 编程艺术》第一章——JavaScript 简史 和 第二章——语法，咱们紧接着学习《第三章 DOM》，重点来了。\n## 节点\n- 元素节点\n- 文本节点\n- 属性节点\n## 获取元素\n1. `getElementById()` 方法可返回对拥有指定 ID 的第一个对象的引用;\n   \n   ``` javascript\n   document.getElementById(id);\n   ```\n2. `getElementsByTagName` 方法可返回带有指定名称的对象的集合;\n   \n   ``` javascript\n   document.getElementsByTagName(tag);\n   ```\n3. `getElementsByClassName` 方法可返回带有指定标签名的对象的集合。\n   \n   ``` javascript\n   document.getElementsByClassName(class); //(HTML5 DOM 新增)\n   ```\n\nid 属性为 purchase 的元素包括这多少个元素节点：\n\n``` javascript\nvar shopping = document.getElementById(\"purchase\");\nvar items = shopping.getElementByTagName(\"*\");\nalert(items.length);\n```\n\n新老浏览器实现 `getElementByClassName` (不支持多类名):\n\n``` javascript\nfunction getElementsByClassName(node,classname) {\n    if(node.getElementsByClassName){\n        return node.getElementsByClassName(classname);\n    } else {\n        var results = new Array();\n        var elems = node.getElementsByTagName(\"*\");\n        for(var i=0; i\u003celems.length; i++){\n            if(elems[i].className.indexOf(className) != -1) {\n                results[results.length]=elems[i];\n            }\n        }\n        return results;\n    }\n}\n```\n\n`indexOf()` 方法可返回某个指定的字符串值在字符串中首次出现的位置。  \n`stringObject.indexOf(searchvalue,fromindex)`  \n该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定 fromindex 时）。如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。\n## 总结下\n- 一份文档就是一棵节点树；\n- 节点分为不同的类型：元素节点，属性节点，文本节点等；\n- `getElementById` 将返回一个对象，该对象对应着文档里的一个特定的元素节点；\n- `getElementsByTagName` 和 `getElementsByClassName` 将返回一个对象数组，他们分别对应着文档里的一组特定的元素节点；\n- 每个节点都是一个对象。\n## `getAttribute`\n\n`object.getAttribute(attribute)`\n\n`getAttribute` 是一个函数，只有一个参数——你打算查询的属性的名字。\n\n`getAttrubute` 方法不属于 document 对象，所以不能通过 document 对象调用。它只能通过元素节点对象调用。\n## `setAttribute`\n\n`object.setAttribute(attribute,value)`\n\n`setAttribute` 也只能用于节点元素对象，主要用于对属性值做出修改。`setAttribute`做出的修改不会反映在文档本身的源代码里。\n\n这种表里不一的现象源自 DOM 的工作模式： 先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。 这正是 DOM 的真正威力：对页面内容进行刷新却不需要在浏览器里刷新页面。\n\n好了，今天就学习到这里了，好好消化理解，see you tomorrow。\n","author":{"url":"https://github.com/paddingme","@type":"Person","name":"paddingme"},"datePublished":"2014-11-18T14:21:13.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/5/Learning-JavaScript/issues/5"}