BOM和DOM

最新推荐文章于 2024-08-15 08:55:57 发布

宋某人Jsong

最新推荐文章于 2024-08-15 08:55:57 发布

阅读量375

点赞数

分类专栏：学习笔记文章标签： javascript 对象文档

本文链接：https://blog.csdn.net/jsong1025/article/details/48299059

版权

学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

宋某人Jsong

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BOM和DOM

BOM和DOM
复制链接

扫一扫

专栏目录