DOM，事件，BOM

最新推荐文章于 2023-06-01 22:30:00 发布

平安喜乐Alice

最新推荐文章于 2023-06-01 22:30:00 发布

阅读量136

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/qq_44095347/article/details/108189052

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

DOM3

document.getElementByld()根据id获取唯一的一个元素

document.getElementsbyTagname()返回所有的tag标签引用的集合，返回的是数组

document.getElementsbyname()返回所有的name属性引用的集合，返回的是数组

document.getElementsbyClassname()返回包含带有指定类名的所有元素的集合，返回的是数组；

var box=document.getElementById("box1");
    console.log(box);

    var boxs=document.getElementsByTagName("div");
    console.log(boxs.length);//返回数组,长度

    var boxs=document.getElementsByClassName("box");
    console.log(boxs);//返回数组，长度

    var lis=document.getElementsByTagName("li");
    console.log(lis);//返回数组
    console.log(lis.length);//返回数组长度

    var lis=document.getElementById("list1").getElementsByTagName("li");
    console.log(lis);//返回数组

    var box=document.getElementById("box1");
    console.log(box);
    box.style.color="#f00";//为box属性添加字体颜色
    box.style.fontWeight="bold";//为box属性添加字体加粗
    
    var lis=document.getElementById("list1").getElementsByTagName("li");
    console.log(lis);

输出：

设置元素样式

ele.style.styleName = styleValue(ele是要设置样式的DOM对象，styleName是要设置的样式名，stylevalue是要设置的属性值）styleName使用驼峰命名法，如backgroundColor...

for(i=0;i<lis.length;i++){
        lis[i].style.color="#00f";//循环给ul列表项数据添加字体颜色
        if(i==0){//给第一行设置背景颜色
            lis[i].style.backgroundColor="red";
        }else if(i==1){//第二行设置背景颜色
            lis[i].style.backgroundColor="pink";
        }else if(i==2){//第三行设置背景颜色
            lis[i].style.backgroundColor="green";
        }else{
            lis[i].style.backgroundColor="orange";
        }
        }

输出：

innerHTML

ele.innerHTML返回ele元素开始和结束标签之间的HTML

ele.innerHTML="html"在ele开始和结束之间添加内容

innerText

ele.innerHTML返回ele元素开始和结束标签之间的文本内容

ele.innerHTML="html"在ele开始和结束之间添加文本内容

    var lis=document.getElementById("list1").getElementsByTagName("li");
    for(i=0;i<lis.length;i++){
        console.log(lis[i].innerHTML);//输出标签中的内容
        console.log(lis[i].innerText);//输入文本值
        // lis[i].innerText=lis[i].innerText+'<h1>程序</h1>';//在每一个后面加内容
        lis[i].innerHTML=lis[i].innerHTML+'<h1>程序</h1>';
        //text输出每一个后面都是“<h1>程序</h1>”，而html输出后面则是“程序”
        lis[1].className='a';//给lis[1]设置样式
    }
    console.log(document.getElementById("box1").className);//获取div中的box，控制台输出box

输出：

className

ele.classname返回ele元素的class属性

ele.classname = "cls"设置ele元素的class属性为cls

获取，设置，删除属性

ele.getAttribute("attribute ")获取元素的属性（attribute要获取的属性）

ele.setAttribute("attribute",value)在ele元素上设置属性（attribute，要设置的属性名称；value，属性值）

ele.removeAttribute("attribute")删除属性

    var p=document.getElementById("text");
    console.log(p.align);//获取align的属性值,有些不可以
    console.log(p.className);//获取class的属性值，针对某些属性
    console.log(p.getAttribute("data-type"));//通用，获取属性值

    var p=document.getElementById("text");
    console.log(p.getAttribute("data-type"));
    p.setAttribute("color","red");//设置属性
    p.removeAttribute("align");//删除属性

输出：

事件

HTML事件：直接在HTML内添加的事件 <tag 事件="执行脚本"></tag>，执行脚本可以是函数的调用

DOM0级事件：通过DOM获取HTML元素，ele.事件=脚本，在DOM对象上绑定事件，执行脚本可以是一个匿名函数也可以是一个函数的调用。

鼠标事件

onload：页面加载时触发

onclick：鼠标点击时触发

onmouseover：鼠标滑过时触发

onmouseout：鼠标离开时触发

onfoucs：获得焦点时触发（input标签type为text password / textarea标签）

onblur：失去焦点时触发

onchange：域的内容发生改变时触发（一般作用在select、checkbox、radio）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .btn{
            width:140px;
            height: 30px;
            text-align:center;
            line-height: 30px;
            background: blue;
            color:red;
            font-size:14px;
            border-radius: 5px;
            cursor: pointer;
            margin-top:30px;
        }
    </style>
</head>
<body>
    <input type="button" value="弹出" onclick="alert('我是按钮')">
    <!-- 鼠标点击跳出弹窗 -->
    <div id="btn" class="btn" onmouseover="mouseoverFn(this)" onmouseout="mouseoutFn(this)">开始</div>
    <!-- <div id="btn" class="btn" onmouseover="mouseoverFn(this,'green')" onmouseout="mouseoutFn(this,'orange')">开始</div> -->
</body>
<script type="text/javascript">
    function mouseoverFn(btn){//设置鼠标移动时触发，背景颜色绿色
    //  console.log(btn);
    btn.style.backgroundColor="green";
    }
    function mouseoutFn(){//设置鼠标离开时触发，背景颜色橙色
        btn.style.backgroundColor="orange";
    }
</script>
</html>

输出：

onsubmit事件：表单中的确认按钮被点击时发生

onmousedown：鼠标按下触发

onmouseup：在元素上松开鼠标触发

onmousemove：鼠标移动时触发

onresize：调整浏览器窗口大小时触发

onscroll：拖动滚动条滚动时触发

var box=document.getElementById("box");
        box.onmousedowm=function(){  //鼠标在元素上按下触发
            console.log("我被按下了");
        }
        box.onmousemove=function(){  //鼠标移动时触发
            console.log("我被移动了");
        }
        box.onmouseup=function(){  //元素上松开鼠标触发
            console.log("我被松开了");
        }
        box.onclick=function(){  //点击触发
            console.log("我点击了");
        }
        window.onresize=function(){  //调整浏览器窗口大小触发
            console.log("我被改变了");
        }
        window.onscroll=function(){  //拖动滚动条触发
            console.log("我被拖动了");
        }

输出：

键盘事件

onkeydown：按下一个键盘按键时触发

onkeypress：在按下键盘按键时发生（只会响应字母和数字符号）

onkeyup：在键盘按键松开时发生

keycode：返回onkeypress onkeydown 或者onkeyup事件触发的键的值的字符代码，或者键的代码

//按下键盘按键时触发
    document.onkeydown=function(event){
        console.log(event.keyCode);
    }
    //按下键盘按键时触发
    document.onkeypress=function(event1){
        console.log(event1.keyCode);
    }

输出：

BOM概念

BOM的核心是window对象，bom（browser object model）：浏览器对象模型。

window是浏览器的一个实例，是通过JS访问浏览器窗口的一个接口，也是ecmascript规定的global对象。

window对象的方法

window.alert();

window.confirm("message"); 返回布尔类型，确定返回true，取消返回false

window.prompt(); 弹出输入框

window.open(); 打开

window.close(); 关闭

location对象 window对象的属性也是document对象的属性

history.back();或者history.go(-1); 回退

history.forward();或者history.go(1); 前进

<body>
    <div id="box">
        <span>iphone12</span>
        <input type="button" value="删除" id="btn">
        <input type="button" value="跳转" id="btn1">
        <input type="button" value="退出" id="btn2">
    </div>
</body>
<script type="text/javascript">
    var btn=document.getElementById("btn");
    btn.onclick=function(){  
        //点确定返回true，取消返回false。布尔类型
        var out=window.confirm("您确定要删除吗？\n删除后将无法删除！");//\n换行
        if(out){//判断，确认删除了就将整个内容删除
            document.getElementById("box").style.display="none";//删除
        }
    }

    var btn1=document.getElementById("btn1");
    btn1.onclick=function(){
        window.open("success.html","index","width=500,height=400,left=0,top=0,toolbar=no,menubar=no");//跳转到success.html，打开新的窗口，设置窗口的宽高，位置，没有工具栏和菜单栏
        window.open("success.html","_blank");//在新标签页中跳转到success.html
        window.open("http://www.baidu.com","_self");
        当前页面跳转到百度
    }

    var btn2=document.getElementById("btn2");
    btn2.onclick=function(){
        window.close();//退出窗口
    }

    var message=prompt("请输入您的年龄","22");//弹出输入框,默认值22
    console.log("message");

    var age="22";
    function sayAge(){
        alert("我今年："+age);//跳出弹窗显示年龄
    }
    window.username="lisi";
    window.sayName=function(){
        alert("我叫:"+username);
    }//跳出弹窗显示姓名
    sayAge();
    window.sayName();
</script>

<body>
    <h1>history</h1>
    <input type="button" value="回退" id="btn">
</body>
<script type="text/javascript">
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        history.go(-1);
        // history.back();
        //回退到上个页面
    }
</script>

输出：

平安喜乐Alice

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM，事件，BOM

DOM3document.getElementByld()根据id获取唯一的一个元素document.getElementsbyTagname()返回所有的tag标签引用的集合，返回的是数组document.getElementsbyname()返回所有的name属性引用的集合，返回的是数组document.getElementsbyClassname()返回包含带有指定类名的所有元素的集合，返回的是数组；var box=document.getElementById("box1");
复制链接

扫一扫