1.DOM
1.1DOM概述
1.2元素操作
document.getElementById()
通过标签元素的ID获取到标签对象[id具有唯一性]
document.getElementsByName()
通过标签元素的name属性获取到标签对象,返回的是数组
document.getElementsByTagName()
通过标签名称获取到标签对象,返回的是数组
[node].parentNode:父节点,返回Node
获取指定元素的父节点
doocument.documentElement:获取根节点 <html>
document.body: 获取body节点 <body>
创建和添加:
document.createElement()
创建新的元素
insertBefore(newnode, refnode)
在childNodes中的refnode之前插入newnode,返回Node
appendChild()
父节点追加子节点
删除:
removeChild()
父节点删除子节点
1.3属性和样式操作
setAttribute(“type”,”button”) -- node.type=’button’
设置属性
getAttribute(“type”) -- node.type
获取属性值
removeAttribute()
删除某属性;
node.style.样式
设置样式
node.className
设置样式名
1.4文本操作
innerHTML
设置或者获取带有标签的元素
innerText
设置或者获取元素中的纯文本
1.5事件注册方式
API
onabort用户终止页面加载。
onblur 用户离开对象。失去焦点
onchange 用户改变对象的值。
onclick 用户点击对象。
ondblclick 用户双击对象。
onfocus(和onblur相反) 用户激活对象。
onkeydown 按下键盘。
onkeypress 按压键盘。
onkeyup 松开键盘。
onload 页面完成加载。注释:在 Netscape 中,当页面加载时会发生该事件。
onmousedown 用户按鼠标按钮。
onmousemove 鼠标指针在对象上移动。
onmouseover 鼠标指针移动到对象上。
onmouseout 鼠标指针移出对象。
onmouseup 用户释放鼠标按钮。
onreset 用户重置表单。
onselect 用户选取页面上的内容。
onsubmit 用户提交表单。
onunload 用户关闭页面。
1.注册事件通常有二种方式:
1)元素上直接注册
function
b
t
n
1
(
)
c
o
n
s
o
l
e
.
d
e
b
u
g
(
′
我
点
了
′
)
;
<
i
n
p
u
t
t
y
p
e
=
"
b
u
t
t
o
n
"
i
d
=
"
b
t
n
1
"
v
a
l
u
e
=
"
我
点
"
o
n
c
l
i
c
k
=
"
btn1() { console.debug('我点了'); } <input type="button" id="btn1" value="我点" οnclick="
btn1()console.debug(′我点了′);<inputtype="button"id="btn1"value="我点"onclick="btn1();" />
2)元素.事件名称
var $btn2 = document.getElementById(“btn2”);
$btn2.onclick = function() {
console.debug(‘我又点了’);
}
2.ajax
2.1ajax概述
①传统请求
②异步请求
2.2获取ajax对象
创建方式1:判断方式
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){//针对其他浏览器
xhr = new XMLHttpRequest();
}else{//针对低版本的ie浏览器
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
return xhr;
}
创建方式2:try…catch…方式
var ajax;
try {
//如果是其它浏览器,这句代码可以成功,ajax对象就拿到了
ajax = new XMLHttpRequest();
} catch (e) {
//如果是IE,上面肯定会报错,被抓取,就执行下面这句代码(IE支持)
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
2.3ajax的API
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/open
2.4Ajax发送get请求
/* 创建ajax的核心对象 */
function createXhr(){
try{
return new XMLHttpRequest();//主流浏览器是支持的
}catch(e){
return new ActiveXObject("Microsoft.XMLHTTP"); //针对低版本的IE浏览器支持创建的 核心对象
}
}
function getTimer(){
//创建ajax的核心对象
var xhr = createXhr();
/*
发送请求的准备工作
1.第一个参数:使用GET提交还是POST提交
2.第二个参数:请求的url地址
3.第三个参数:请求是同步还是异步
true:异步
false:同步
*/
xhr.open("GET","/getTimer",true);
//准备监听函数,监听ajax发送请求状态的改变和响应状态码
xhr.onreadystatechange = function(){
//当readyState=4的时候,就代表后台数据已经响应完成
if(xhr.readyState==4 && xhr.status==200){
var text = xhr.responseText;
alert(text);
}
}
//发送请求
xhr.send();
}
2.5Ajax发送Post请求
function login(){
//获取用户名的值
var username = document.getElementById("username").value;
//获取密码的值
var password = document.getElementById("password").value;
//创建ajax的核心对象
var xhr = new XMLHttpRequest();
//发送请求的准备工作
xhr.open("POST","/login",true);
//准备监听函数,监听请求状态的改变和状态码的值
xhr.onreadystatechange = function(){
//4代表后台响应完毕,200代表响应码成功
if(xhr.readyState==4&&xhr.status==200){
//返回后台相应的数据
var text = xhr.responseText;
if("true"==text){
//跳转到新界面
location.href="/success.html";
}else{
alert("登陆失败!!用户名或者密码错误!!");
}
}
}
//使用ajax的post提交,你要让后台传递参数,你还得设置请求头信息
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");//传递的参数是以普通文本传输的
//准备参数
var param = "username="+username+"&password="+password;
//发送请求
xhr.send(param);
//send的语法格式: xhr.send([param]); 注意:只有post提交传递参数才放到send方法内部
}
2.6ajax解决编码问题
2.6.1解决GET请求时的乱码问题
前台:
1.使用encodeURI对请求地址进行编码。encodeURI会使用utf-8对请求地址中的中文参数进行编码:xhr.open(“get”, encodeURI(uri) , true);
后台:指定字符集进行解码(tomcat8及其以上不需要,默认就是UTF-8)
1.Tomcat可以修改conf/server.xml文件中 ,使得tomcat按UTF-8方式解码;
2.6.2POST请求时的乱码问题
1.因为所有浏览器在进行POST方式提交时都是使用UTF-8方式进行编码的,到了服务器端则默认使用ISO-8859-1方式来解码;
2.所以只需要修改服务器端的解码格式,保证是UTF-8的方式来解码就可以避免乱码:request.setCharacterEncoding(“UTF-8”);
2.7ajax解决IE缓存问题
(1)发送post请求
(2)欺骗浏览器,请它以为我们正在发送不同的请求:
xhr.open(‘get’,‘random?r=’ + Math.random()); //通过随机数
xhr.open(‘get’,‘random?’ + (new Date()).getTime()); //通过时间戳