BOM和DOM模型以及操作

最新推荐文章于 2024-07-20 23:54:17 发布

东南吴彦祖

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量204

点赞数

分类专栏：前端文章标签： javascript html5 html

本文链接：https://blog.csdn.net/weixin_45019986/article/details/120514789

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

BOM模型window对象

1.概念

BOM浏览器对象模型：规范浏览器对js语言支持

BOM的具体的实现：window对象

###1.window对象不能new,直接调用使用即可

###2.框体方法

alert comfirm proompt

3.定时和间隔执行方法

1.setTimeOut(函数对象,时间（毫秒）):指定的时候后执行指定的函数

返回的是当前定时器的ID

clearTimeOut（定时器的ID）:用来停止指定的定时器

2.setInterval(函数对象,时间（毫秒）):每间隔指定的时间，执行指定的函数。

怎么停：关闭浏览器。

ckearInterval(间隔器的ID):停止指定的间隔器

2.定时器和间隔器

<body>
    <input type="button" value="test定时执行" onclick="testSetTimeOut()">
    <input type="button" value="test间隔执行" onclick="testSetInterval()">
    <input type="button" value="test停止定时执行" onclick="testClearSetTimeOut()">
    <input type="button" value="test停止间隔执行" onclick="testClearSetInterval()">
</body>
<script>
    var ids,idi;
    function testSetTimeOut(){
        ids=setTimeout(function(){
            alert("我是定时器");
        },1000);
    }
    function testSetInterval(){
        idi=setInterval(() => {
            alert("我是间隔器");
        }, 3000);
    }
    function testClearSetTimeOut(){
        clearTimeout(ids);
    }
    function testClearSetInterval(){
        clearInterval(idi);
    }
</script>

DOM模型

1.概念

DOM全称：Document Object Model 文档对象模型

把文档中的标签，属性，文本转化成对象模型

2.Document对象中的方法

1.直接获取元素的对象

方法名	方法作用	返回值是否为数组
document.getElementById(id)	通过id获取dom节点对象	否
document.getElementsByName(name)	通过name属性获取dom节点对象	是
document.getElementsByTagName(标签名)	通过标签名获取dom节点对象	是
document.getElementsByClassName(类名)	通过类名获取dom节点对象	是
document.createElement(标签名)	通过标签名创建dom节点对象

ps:对于document三种查询方法，如果有id属性，优先使用getElementById这个方法，如果没有id属性，getElementsByName方法来进行查询，如果id属性和name属性都没有，使用getElementsByTagName.上面的查询必须是在页面加载完成后才能执行

2.简介获取元素的对象

1.父子关系

1.获取父级元素的对象

直接获取

2.根据父元素的对象获取子元素对象

childNodes

2.子父关系

1.获取子级元素的对象

2.根据子元素的对象获取父元素对象

parentNode

3.兄弟关系

1.根据兄获取弟

nextSibling

2.根据弟获取兄

previousSibling

3.案例

<body>
    <h2>直接方式</h2>
    <input type="button" value="测试获取元素对象---id" onclick="testElementById()">
    <input type="button" value="测试获取元素对象---name" onclick="testElementByName()">
    <input type="button" value="测试获取元素对象---tagName" onclick="testElementByTagName()">
    <input type="button" value="测试获取元素对象---className">




    用户名：<input type="text" name="uname" id="uname">
    <input type="checkbox" name="fav" id="">
    <input type="checkbox" name="fav" id="">
    <input type="checkbox" name="fav" id="">


    <h2>间接方式</h2>
    <input type="button" value="测试父子关系" onclick="testParent()">
    <input type="button" value="测试兄弟关系" onclick="testBroth()">

    <div id="showdiv">
        <span id="span1"></span>
        <span id="span2"></span>
        <span id="span3"></span>
    </div>
</body>
<script>
    //直接方式
    function testElementById(){
        var inp=document.getElementById("uname");
        alert(inp.toString());
    }
    function testElementByName(){
        var favs=document.getElementsByName("fav");
        for(var i in favs){
            console.log(favs[i]);
        }
    }
    function testElementByTagName(){
        var inputs=document.getElementsByTagName("input");
        for(var i in inputs){
            console.log(inputs[i]);
        }
    }
    //间接方式
    function testParent(){
        //父子关系
        //获取父级元素对象
        console.log("根据父获取子元素");
        var showdiv=document.getElementById("showdiv");
        //获取所有的子元素对象
        var childs=showdiv.childNodes;
        for(var i=0;i<childs.length;i++){
            console.log(childs[i]);
        }
        console.log("根据子元素获取父元素");
        var child=document.getElementById("span1");
        var div=child.parentNode;
        console.log(div);
    }
    function testBroth(){
        var span=document.getElementById("span2");
        var prespan=span.previousSibling;//获取兄元素
        var nextspan=span.nextSibling;//获取弟
        console.log("弟获取兄");
        for(var i in prespan){
            console.log(prespan[i]);
        }
        console.log("兄获取弟");
        for(var j in nextspan){
            console.log(nextspan[j]);
        }
    }
</script>

操作元素的属性

1.获取属性值

元素的对象.属性名----返回当前属性的值----固有
元素的对象.getAttrubute("属性名")//返回的是自定义属性的值----自定义属性

2.修改属性值

元素的对象.属性名=值
元素的对象.setAttraibute("属性名","属性值")----自定义属性

1.尽量不要修改元素的id属性和name属性

2.使用自定义方式获取固有属性时，value的值获取的默认值，不能获取用户实时输入的值

4.操作元素内容

1.获取元素的内容

元素的对象.innerHTML：返回的是对象所有的内容包括HTML标签

元素的对象.innerText:返回的是对象所有的内容包括不HTML标签

2.修改元素内容

元素对象名.innerHTML=“新的值” 会将所有的内容覆盖，并解析HTML标签

元素对象名.innerHTML=元素对象名.innerHTML+”新的值“

元素对象名.innerText=“新的值” 会将所有的内容覆盖，并不解析HTML标签

元素对象名.innerText=元素对象名.innerText+"新的值"

5.案例

<body>
    <div id="div">
        <p>北京</p>
        <p>上海</p>
        <p>深圳</p>
    </div>
    <input type="button" value="测试获取元素内容" onclick="get()">
    <input type="button" value="修改获取元素内容" onclick="set()">
</body>
<script>
    function get(){
        var div=document.getElementById("div");
        console.log("innerHTML"+div.innerHTML);
        console.log("innerText"+div.innerText);
    }
    function set(){
        var div=document.getElementById("div");
        div.innerHTML+="<p>挪威</p>"
        div.innerText+="<p>庄园</p>"
    }
</script>

6.操作元素的样式

1.通过style属性

元素的对象.style.样式名=”值“ //添加或者修改样式

元素的对象.style.样式名=”“；//删除样式

ps:上面的操作是HTML的属性声明中的样式

2.通过className

对象名.className=“新的值”;//添加类选择器样式或者修改类选择器样式

对象名.className="";//删除类样式

7.案例

<style>
    #div01{
        border: 1px solid green;
    }
    .commom{
        width: 200px;
        height: 200px;
        background-color: cadetblue;
    }
</style>
<body>
    <input type="button" value="修改样式" onclick="modify()">
    <input type="button" value="修改类" onclick="change()">
    <div id="div01"></div>
    <div id="div02"></div>
</body>
<script>
      //修改style
    function modify(){
        var div=document.getElementById("div01");
        div.style.width="200px";
        div.style.height="200px";
    }
		//修改class
    function change(){
        var div=document.getElementById("div02");
        div.className="commom";
    }

</script>

8.操作文档结构

1.innerHTML操作文档内容

innerHTML操作文档内容

2.父节点操作

1.父节点.appendChild(子节点对象) //往父节点追加子节点

2.父节点.removeChild(子节点对象) //删除指定的子节点

<body>
    <input type="button" value="继续上传" onclick="testAdd()">
    <div id="showdiv">
        <input type="file" name="" id="">
        <input type="button" value="删除" onclick="del(this)">
    </div>
</body>
<script>
    //添加子元素
    function testAdd(){
        var showdiv=document.getElementById("showdiv");
        showdiv.innerHTML=showdiv.innerHTML+'<div><input type="file" name="" id=""><input type="button" value="删除" οnclick="del(this)"></div>';
    }
    //删除子元素
    function del(btn){
        var showdiv=document.getElementById("showdiv");
        var cdiv=btn.parentElement;
        showdiv.removeChild(cdiv);
    }
</script>

东南吴彦祖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOM和DOM模型以及操作

BOM和DOM模型以及操作BOM模型window对象1.概念3.定时和间隔执行方法2.定时器和间隔器DOM模型1.概念2.Document对象中的方法1.直接获取元素的对象2.简介获取元素的对象1.父子关系2.子父关系3.兄弟关系3.案例操作元素的属性1.获取属性值2.修改属性值4.操作元素内容1.获取元素的内容2.修改元素内容5.案例6.操作元素的样式1.通过style属性2.通过className7.案例8.操作文档结构1.innerHTML操作文档内容2.父节点操作BOM模型window对象1.概
复制链接

扫一扫