Javascript_DOM编程艺术(下)

动态创建标记

HTML的传统方法
document.write()：把字符串插入到文档
innerHTML属性：用来读，写给定元素里的HTML内容

<div id="testdiv">
    <p>This is <em>my</em> content.</p>
</div>

用DOM的眼睛看testdiv内的标记
这里写图片描述
从innerHTML属性的角度来看

这里写图片描述

在DOM看来，一个文档就是一棵节点树
如果想在节点树上添加内容，就必须插入新的节点
如果想添加一些标记到文档，就必须插入元素节点
createElement(nodeName) 创建元素节点
appendChild(child)

createTextNode(text) 创建文本节点

如果一些元素的存在只是为了让 DOM方法处理它们，那么用DOM方法来创建它们才是最合适的选择

insertBefore()：把一个新元素插入到一个现有元素的前面
调用语法：parentElement.insertBefore(newElement , targetElement)
手动编写insertAfter()

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

AJAX

Ajax技术的核心是XMLHttpRequest对象。充当着浏览器中的脚本（客户端）与服务器之间的中间人的角色

<blockquote cite="http://www.w3.org">
    <p>A plat-form and language-neutral interface</p>
</blockquote>

乍看起来，blockquote元素的最后一个子节点应该是p元素，可事实不一定如此
p节点的确是blockquote元素的最后一个元素节点，但在/p 和/blockquote标签之间还存在一个换行符。有些浏览器会把这个换行符解释为一个文本节点，这样一来，blockquote元素节点的lastChild属性就是一个文本节点，而不是p元素节点

如果没有百分之百的把握，一定要去检查nodeType属性值，有很多DOM方法只能用于元素节点，如果用在了文本节点身上，就会出错

CSS-DOM

style 对象属性,只能返回内嵌样式。
element.style.property
style对象的属性的值必须放在引号里，para.style.color = “black”;
当需要引用一个中间带减号的CSS属性时，DOM要求你用驼峰命名法。例如：font-family变成DOM属性fontFamily

编写函数实现为表格添加斑马线效果! 很巧妙哦

function stripeTables() {
  if (!document.getElementsByTagName) return false;
  var tables = document.getElementsByTagName("table");
  for (var i=0; i<tables.length; i++) {
    var odd = false;
    var rows = tables[i].getElementsByTagName("tr");
    for (var j=0; j<rows.length; j++) {
      if (odd == true) {
        addClass(rows[j],"odd");
        odd = false;
      } else {
        odd = true;
      }
    }
  }
}

CSS提供的:hover等伪class属性允许我们根据HTML元素的状态来改变样式。
DOM可以通过onmouseover事件对HTML元素的状态变化做出相应
选择最容易实现的方法来判断何时应该使用:hover属性，何时应该使用onmouseovera属性
哪种解决方案会得到更多的浏览器支持

className属性
通过js代码去更新元素的class属性，进而改变元素样式
通过className属性设置某个元素的class属性时将替换（而不是追加）该元素原有的class设置；或者拼接字符串：elem.className += ” intro” ;（class之间有空格）

用js实现动画效果

动画是样式随时间变化的完美例子之一。简单地说，动画就是让元素的位置随着时间而不断发发生变化

位置
element.style.position = “absolute” ;
element.style.left = “200px” ;

JavaScript函数setTimeout能够让某个函数在经过一段预定的时间之后才开始执行
variable = setTimeout( “function” , interval );
cleraTimeout( variable );

HTML5

html,css,js+dom 多种技术逐步统一
文档类型声明 <!DOCTYPE html>
HTML（包括HTML5）与XHTML相比，对语法的要求要宽松得多。HTML5的目标是和已有的HTML及XHTML文档全部兼容

Modernizr: 一个开源的JavaScript库，利用它的富特性检测功能，可以对HTML5文档进行更好的控制
下载，在文档的head中引入script

ellieokokok

发布了52 篇原创文章 · 获赞 3 · 访问量 2万+

私信关注