BOM和DOM

来源：互联网发布：知乎周刊是什么编辑：程序博客网时间：2024/06/05 10:44

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">

0 0