您的位置：首页 > Web前端 > JavaScript

BOM和DOM

2015-09-08 22:12 796 查看

BOM和DOM

Window对象

BOM：浏览器对象模型
DOM：文档对象模型


Window表示浏览器窗口，所有JavaScript的全局对象

alert() 提示对话框

confirm() 选择对话框

var flag = confirm("你好");
alert(flag);


提示删除

function isDelete() {
return window.confirm("确认删除吗？");
}


<a href="" onclick="return isDelete();">删除</a>
<a href="" onclick="return window.confirm("确认删除吗？");">删除</a>


prompt(str,value) 输入对话框

prompt("请输入金额",0);


open([url],[name],[config]) 打开新的窗口

url 新窗口的链接

name 窗口的名称

config 窗口的配置参数

close() 关闭窗口

var win = window.open("demo.html","win","width=300px,heigth=300px,top=100px,left=100px;");
win.close();


定时器

setInterval(exp,time) 周期性触发代码exp

exp：执行语句

time：时间周期

clearInterval(tID) 停止启动的定时器

tID：定时器对象

function show(){
alert("你好！");
}
window.setInterval("show()",1000);


倒计时关闭页面

var num = 5;
function showTime(){
var sp = document.getElementById("span");
sp.innerHTML = num;
num--;

if(num == 0) {
window.clearInterval(tID);
window.close();
}
}
tID = window.setInterval('showTime()',1000);


setTimout(exp,time) 一次性触发器

clearTimeout(tID)

自动跳转

window.setTimeout("window.location.href='demo.html'",5000);


document对象

每个载入的HTML文档，都会创建页面的document对象

HTML中所有节点组成了一个文档树，document是文档树的根

节点信息

NodeName:节点名字

NodeType:节点类型

innerText   设置或获取标签中的文本
innerHTML   设置或获取标签中的HTML


节点属性

getAttribute(): 获取节点属性
setAttribute(): 设置节点属性


var img = document.getElementById("img0");
img.src = "img2.jpg";


style属性

var div = document.getElementById("div0");
div.style.color = "green";
div.style.backgroundColor = "yellow";
document.getElementById("div1").className = "newStyle";


表单的验证与提交

function validateUserName(){
var nutxt = document.getElementById("userName");
var unspan = document.getElementById("unspan");
var userName = untxt.value;
if(userName == "") {
unspan.innerHTML = "账号不能为空！";
unspan.className = "un";
return false;
}
else {
unspan.innerHTML = "";
return true;
}
}

function validatePassword(){
var pwdtxt = document.getElementById("password");
var pwdspan = document.getElementById("pwdspan");
var password = pwdtxt.value;
if(password == "") {
pwdspan.innerHTML = "密码不能为空！";
pwdspan.className = "un";
return false;
}
else {
pwdspan.innerHTML = "";
return true;
}
}

function validate(){
return validateUserName() && validatePassword();
}


<form action="" methon="post" onsubmit="return validate();">
账号：<input type="text" id="userName" name="userNaemr" onblur="validateUserName()">
<span id="unspan"></span><br>
密码：<input type="password" id="password" name="password" onblur="validatePassword">
<span id="pwdspan"></span><br>
<input type="submit" value="提交">
<input type="reset" value="取消">
</form>


根据ID查找节点

根据ID查找节点

getElementById(“id”);

根据层次关系查找节点

parentNode 查找父节点

firstChild 查找第一个子节点

lastChild 查找最后一个子节点

根据标签名查找节点

document.getElementByTagName() 返回节点列表数组

根据name属性查找节点

document.getElementsByName()

var div = document.getElementById("div1");
var h3 = div.firstChild;
alert(h3.innerHTML);

var anode = div.lastChild;
anode.href="demo.html";

var pris = document.getElementsByName("pri");
var isSelect = false;
for (var i = 0; i < pris.length; i++) {
if (pris[i].checked) {
isSelect = true;
}
}
if (!isSelect) {
alert("必须选择权限");
}


<html>
<div id="div"><h3>h3标题</h3>
<a href="javascript:alert('***')">链接文本</a>
<a href="javascript:;">链接文本</a></div>
请选择权限：<br>
<input type="checkbox" name="pri" value="add" >添加</input>
<input type="checkbox" name="pri" value="delete">删除</input>
<input type="checkbox" name="pri" value="update">修改</input>
<input type="checkbox" name="pri" value="show">查看</input>
</html>


创建节点

createElement(); 创建节点

appendChild(); 添加子节点

insertBefore(); 在当前节点之前添加节点

var txt1 = document.createElement("input");
txt1.type = "text";
txt1.name = "title";
var div1 = document.getElementById("div1");
div1.appendChild(txt1);

var txt2 = document.createElement("input");
txt2.type = "text";
txt2.name = "title";
var div2 = document.getElementById("div2");
div2.insertBefore(txt2,document.getElementById("h5"));


<div id="div1"></div>
<input type="button" value="输入标题" onclick="test01()">
<div id="div2"><h5 id="h5"></h5></div>


删除节点

removeChild(); 删除子节点

window.onload = function(){
document.getElementById("btn").onclick = function(){
var txt = document.createElement("input");
txt.type = "text";
txt.name = "title";
var div = document.getElementById("div");
div.appendChild(txt);

txt.onkeyup = function(event){
var e = event||window.event;    //浏览器兼容
if (e.keyCode == 13) {
/*  提交数据 */
div.removeChild(txt);
}
};
}
};


<div id="div"></div>
<input type="button" value="输入标题" id="btn">
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript 对象 文档
相关文章推荐
新的分享
章节导航