动态创建标记
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