JavaScript 与 HTML,CSS 的交互

JavaScript与HTML,CSS的交互 王明建 2012年10月11日

DOM是什么 • DOM,全称Document Object Model • 前身DHTML(DynamicHTML)，最初由MS实现 • DOM本质是定义了一组JS可以调用的API • DOM的发展历史就是各浏览器的发展历史

几个常用的API • 方法:getElementById, getElementsByTagName, createElement, createTextNode,cloneNode, appendChild, insertBefore, removeChild, replaceChild, getAttribute, setAttribute, removeAttribute, hasChildNodes • 属性:id, tagName, style, childNodes, firstChild, lastChild, nextSibling, parentNode, previousSibling, nodeName, nodeType, nodeValue

超链接元素(a) • 属性href,target,name • 事件onclick • 特殊用法: • <a href=“javascript:xxx” onclick=“return f();”>text</a>

图像元素(img) • 属性:src • 事件:onload,onerror • 在ie上面曾经暴露过脚本执行漏洞 • src=“base64:xxxx”

script元素 • 属性:type,src,charset,defer,language • 事件:onload,onerror • 是加载脚本的主要语法，静态动态均可 • ie:onload->onreadystatechange • ajax的一种实现方式 • 特殊用法:el.text = “alert(1);”;

link和style元素 • 属性:type,rel,href,media • 事件:onclick,onerror • 加载外部css文件的语法 • 内联css用style标签 • style特殊用法:el.innerText= “body{color:red;}”;

iframe元素 • 属性:name,src,frameborder,spacing • 事件:onload • 用来加载另外一个页面 • ajax的一种实现方式

form元素 • 属性:name,method,action • 事件:onsubmit • 表单元素:input(type=hidden, text, password, button, radio, checkbox, file, image, submit, reset等), textarea, select(option), button等 • 附属元素: label,fieldset,legend, isindex • 读取表单元素内容：frm.el_name.value • 表单提交: frm.submit(); • 数据检查时机: <form onsubmit=“return check_form(this);”>…</form> • 文件上传文件: <form enctype="multipart/form-data“></form>

几个特殊元素 • embed • object,param • applet • map, area

XMLHttpRequest • 相关词汇：ajax,XHR,http • 一个http请求的封装组件，示例代码： • var method = "GET"; • var http = new XMLHttpRequest(); • http.open(method, "http://www.xxx.com/xxx.php", true); • if(method == "POST"){ • http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); • } • http.onreadystatechange = function(){ • if(http.readyState != 4) return; • if(http.status == 200){ • console.log(http.responseText); • }else{ • console.error("status=" + http.status); • } • }; • http.send("a=b&c=d");

操作CSS样式 • css属性与js属性映射关系：border-left-width => borderLeftWidth-moz-opacity => MozOpacity • 读: el.style.width,写:el.style.width=“2px”; • 对应html中<div style=“width:2px;”></div> • 获取样式运行时真实值：ie: el.currentStyle.width!ie: document.defaultView.getComputedStyle(el, null).width • 其他：el.style.cssText = “width:2px;-moz-opacity:0”;

谢谢！

JavaScript 与 HTML,CSS 的交互