René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"【JavaScript】【学习心得】学习 JavaScript 第八天","articleBody":"已经坚持了一周的学习，学到了不少 DOM 的基础知识，对一些基本概念也有了深入里概念，今天主要学习如何利用 DOM 技术去获取（读）和设置（写）CSS 信息。\n## 三位一体的网页\n- 结构层（ structural layer） ：由 HTML 或 XHTML 之类的标记语言负责创建。标签（ tag ）,也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述。\n- 行为层（ presentation layer）：由 CSS 负责完成。 CSS 描述页面内容应该如何呈现。\n- 表现层（ behavior layer）：负责内容应该如何响应事件这一问题，这是 JavaScript 语言 和 DOM 主宰的领域。\n\n===》结构、行为、表现 分离。\n## style 属性\n\n文档中的每个元素都是一个对象，每个对象由着各种各样的属性。\n- 有一些属性告诉我们元素在节点树上的位置信息，即各节点之间关系信息：`parentNode`,`nextSibling`,`previousSibling`,`childNodes`,`firstChild`,`lastChild` 等;\n- 包含元素本身的信息：`nodeType`,`nodeName`;\n- style 属性包含着元素的样式。查询这个属性将返回一个对象。样式都存放在这个 style 对象的属性里。\n  \n  ``` js\n  element.style.property\n  ```\n### 获取样式\n\n``` js\n    element.style.color;//获取element 的颜色\n    element.style.font-family;// xx 应该是：\n    element.style.fontFamily;\n```\n\nDOM 在表示样式属性时采用的单位并不总是与它们在 CSS 样式表里的设置相同。\n\n``` html\n\u003cp id=\"example\" style=\"color:#999999\"\u003e\u003c/p\u003e\n\u003cscript\u003e\n    var example = document.getElementById(example);\n    alert(example.style.color);//在某些浏览器里会弹出 rgb(153,153,153)\n\u003c/script\u003e\n```\n\n对于其他单位 em、px，DOM 能正确解析。\n\n``` html\n\u003cp id=\"example\" style=\"font:12px 'Apral',sans-serif\"\u003e我行，我行，我行行行！\u003c/p\u003e\n\u003cscript\u003e\n    var example = document.getElementById(example);\n    alert(example.style.fontSize);//能正确打印出 12px\n\u003c/script\u003e\n```\n\n**DOM style 属性只能检测内嵌样式,不能用来检测在外部 CSS 文件里声明的样式，在head 头里的样式也是不能检测到**\n### 设置样式\n\nstyle 对象的各个属性都是可读写的。\n\n``` js\ndocument.style.property = value;// value 的值必须放在引号内\n```\n## 何时该用 DOM 脚本设置样式\n\n``` html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"zh-cmn-Hans\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eMan bites dog\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ch1\u003eHold the front page\u003c/h1\u003e\n    \u003cp\u003eThis first paragraph leads you in.\u003c/p\u003e\n    \u003cp\u003eNow you get  the nitty-gritty of th story.\u003c/p\u003e\n    \u003cp\u003eThe most improtant information is delivered first.\u003c/p\u003e\n    \u003ch1\u003eExtra! Extra!\u003c/h1\u003e\n    \u003cp\u003eFurther developements are unfolding.\u003c/p\u003e\n    \u003cp\u003eYou can read all about it here.\u003c/p\u003e\n\n    \u003cscript src=\"addLoadEvent.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"1-9.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n``` js\nfunction styleHeaderSiblings() {\n  if (!document.getElementsByTagName) return false;\n  var headers = document.getElementsByTagName(\"h1\");\n  var elem;\n  for (var i = headers.length - 1; i \u003e= 0; i--) {\n    elem = getNextElement(headers[i].nextSibling);\n    elem.style.fontWeight = \"bold\";\n    elem.style.fontSize = \"1.2em\";\n  };\n}\nfunction getNextElement(node) {\n  if (node.nodeType == 1) {\n    return node;\n  } else {\n    return getNextElement(node.nextSibling);\n  }\n  return null;\n}\naddLoadEvent(styleHeaderSiblings);//请见上篇文章\n```\n\n在线 DEMO：http://codepen.io/paddingme/pen/ogXjyB\n### 根据某种条件反复设置某种样式\n\n``` html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"zh-cmn-Hans\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eCities\u003c/title\u003e\n    \u003clink rel=\"stylesheet\" href=\"1-9-2.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ctable\u003e\n        \u003ccaption\u003eItinerary\u003c/caption\u003e\n        \u003cthead\u003e\n            \u003ctr\u003e\n                \u003cth\u003eWhen\u003c/th\u003e\n                \u003cth\u003eWhere\u003c/th\u003e\n            \u003c/tr\u003e\n        \u003c/thead\u003e\n        \u003ctbody\u003e\n            \u003ctr\u003e\n                \u003ctd\u003eJune 9th\u003c/td\u003e\n                \u003ctd\u003eProtlan, \u003cabbr title=\"Oregon\"\u003eOR\u003c/abbr\u003e\n                \u003c/td\u003e\n            \u003c/tr\u003e\n            \u003ctr\u003e\n                \u003ctd\u003eJune 10th\u003c/td\u003e\n                \u003ctd\u003eSeattle, \u003cabbr title=\"Washington\"\u003eWA\u003c/abbr\u003e\u003c/td\u003e\n            \u003c/tr\u003e\n            \u003ctr\u003e\n                \u003ctd\u003eJune 12th\u003c/td\u003e\n                \u003ctd\u003eSacramento, \u003cabbr title=\"California\"\u003eCA\u003c/abbr\u003e\u003c/td\u003e\n            \u003c/tr\u003e\n        \u003c/tbody\u003e\n    \u003c/table\u003e\n    \u003cscript src=\"addLoadEvent.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"1-9-2.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n``` css\nbody {\n    font-family: \"Helvatica\",\"Aprial\",sans-serif;\n    background-color: #fff;\n    color: #000;\n}\n\ntable {\n    margin: auto;\n    border: 1px solid #699;\n}\n\ncaption {\n    margin:auto;\n    padding: .2em;\n    font-size: 1.2em;\n    font-weight: bold;\n}\nth {\n    font-weight: normal;\n    font-style: italic;\n    text-align: left;\n    border: 1px dotted #699;\n    background-color: #9cc;\n    color: #000;\n}\nth,td {\n    width: 10em;\n    padding: .5em;\n}\n\n/*css3 选择器 在低级浏览器无法使用我们用 DOM 来解决它*/\n\n/*tr:nth-child(odd) {\n    background-color: #ffc;\n}\n\ntr:nth-child(even) {\n    background-color: #fff;\n}\n*/\n```\n\n``` js\nfunction stripeTables() {\n  if (!document.getElementsByTagName) return false;\n  var tables = document.getElementsByTagName(\"table\");\n  var odd, rows;\n  for (var i = 0; i \u003c tables.length; i++) {\n    odd = false;\n    rows = tables[i].getElementsByTagName(\"tr\");\n    for (var j = 0; j \u003c rows.length; j++) {\n        if (odd == true) {\n            rows[j].style.backgroundColor = \"#ffc\";\n            odd = false;\n        } else {\n            odd = true;\n        }\n    };\n  };\n}\n\nfunction displayAbbreviations() {\n    if (!document.getElementsByTagName) return false;\n    if (!document.createElement) return false;\n    if (!document.createTextNode) return false;\n    //取得所有缩略词\n    var abbreviations = document.getElementsByTagName(\"abbr\");\n    if (abbreviations.length \u003c 1) return false;\n    var defs = new Array();\n    //遍历这些缩略词\n    for (var i = 0; i \u003c abbreviations.length; i++) {\n        var current_abbr = abbreviations[i];\n        //如果当前元素没有子节点，就立刻开始下一次循环。\n        if (current_abbr.childNodes.length \u003c 1) continue;\n        var definition = current_abbr.getAttribute(\"title\");\n        var key = current_abbr.lastChild.nodeValue;\n        defs[key] = definition;\n    }\n    //创建定义列表\n    var dlist = document.createElement(\"dl\");\n    //遍历定义\n    for (key in defs) {\n        var definition = defs[key];\n        //创建定义标题\n        var dtitle = document.createElement(\"dt\");\n        var dtitle_text = document.createTextNode(key);\n        dtitle.appendChild(dtitle_text);\n        //创建定义描述\n        var ddesc = document.createElement(\"dd\");\n        var ddesc_text = document.createTextNode(definition);\n        ddesc.appendChild(ddesc_text);\n        //把它们添加到定义列表\n        dlist.appendChild(dtitle);\n        dlist.appendChild(ddesc);\n    }\n    //对于 dl 没有任何子节点，则立即退出 displayAbbreviations。\n    if (dlist.childNodes.length \u003c 1) return false;\n    // 创建标题\n    var header = document.createElement(\"h2\");\n    var headerText = document.createTextNode(\"Abbreviations\");\n    header.appendChild(headerText);\n    //把标题页添加到页面主体\n    document.body.appendChild(header);\n    //把定义列表添加到页面主体\n    document.body.appendChild(dlist);\n}\naddLoadEvent(stripeTables);\naddLoadEvent(displayAbbreviations);\n```\n\n在线 demo:http://codepen.io/paddingme/pen/vEOLyr\n### 响应事件\n\n对于\n\n``` css\n    tr:hover {\n        font-weight: bold;\n    }\n```\n\n部分浏览器不支持（尚未做测试）可以使用 DOM 来做。\n\n```\nfunction highlightRows() {\n    if (!document.getElementsByTagName) return false;\n    var rows = document.getElementsByTagName(\"tr\");\n    for (var i = 0; i \u003c rows.length; i++) {\n        rows[i].onmouseover = function() {\n            this.style.fontWeight = \"bold\";\n        }\n        rows[i].onmouseout = function() {\n            this.style.fontWeight = \"normal\";\n        }\n    };\n}\n```\n\n在这一类场合中，需要决定是采用纯粹的 CSS 来解决，还是利用 DOM 来设置样式，需要考虑如下要素：\n- 这个问题最简单的解决方式是什么？\n- 那种解决方案会得到更多浏览器的支持？\n\n这就要求我们对 CSS 和 DOM 技术有足够深入的了解。\n\n如果你想改变某个元素的呈现效果，请用 CSS；如果你想改变某个元素的行为，使用 DOM，如果你想根据某个元素的行为去改变它的呈现效果，请运用你的智慧。\n## className 属性\n\n``` js\nelem.className = value;// 这里是替换 class 而不是追加 class\n```\n\n``` js\n    function addClass(element,value) {\n        if (!element.className) {\n            element.className = value;\n        } else {\n            newClassName = element.className;\n            newClassName += \" \";\n            newClassName += value;\n            element.className = newClassName;\n        }\n    }\n```\n\n这样的话现在是通过 CSS 而不是 DOM 去设置样式。 JavaScript 函数现在更新的是 className 属性，根本没碰 style属性。 这确保了网页的表示层和行为层分离得更加彻底。\n\n**对函数进行抽象**\n\n``` js\nfunction styleHeaderSiblings(tag.theClass) {\n  if (!document.getElementsByTagName) return false;\n  var elems = document.getElementsByTagName(tag);\n  var elem;\n  for (var i = headers.length - 1; i \u003e= 0; i--) {\n    elem = getNextElement(elems[i].nextSibling);\n    addClass(elem,theClass);\n  };\n}\n\n```\n\n这一章我们使用 JavaScript 入侵了 CSS 领地。我们这么做的理由无非：\n1. CSS 无法让我们找到想要处理的目标元素；\n2. CSS寻找目标元素的哦方法还未得到广泛的支持。\n\n虽然未来 CSS 会让我们远离这种“不务正业” 的DOM 脚本编程技术。但有一种应用 CSS 大概永远也无法与 DOM 竞争： JavaScript 脚本能定时重复执行一组操作。\n\n好了 晚安，我还要去写论文TNT。\n","author":{"url":"https://github.com/paddingme","@type":"Person","name":"paddingme"},"datePublished":"2014-11-24T15:31:51.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/12/Learning-JavaScript/issues/12"}