BOM，DOM对象方法及属性

最新推荐文章于 2023-01-24 11:47:41 发布

发臭的靈魂

最新推荐文章于 2023-01-24 11:47:41 发布

阅读量191

点赞数 1

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

本文链接：https://blog.csdn.net/qq_38256266/article/details/118034619

版权

前端专栏收录该内容

63 篇文章 18 订阅

订阅专栏

BOM，DOM对象方法及属性

- 一、BOM对象
- 二、DOM对象

一、BOM对象

1、概念

BOM：浏览器对象模型（地址栏，历史记录，屏幕，滚动条，关闭），与浏览器交互的方法和接口。

2、顶级对象window

BOM的核心对象是window，它表示浏览器的一个实例。

属性

  innerHeight（浏览器的高度,带滚动条）
  innerWidth（浏览器的宽度,带滚动条）

console.log(window.innerWidth);//  浏览器高
console.log(innerWidth);//  浏览器宽
console.log(document.body.clientWidth);//获取元素的可视宽度

方法

 alert() 弹出框 等价于 window.alert()
 confirm()确认框  带返回值，点击确定返回true，点击取消返回false
 prompt()输入框   待返回值  返回你输入的内容
 setInterval(回调函数,毫秒值)设置间歇型定时器
 clearInterval(定时器名称) 清除间歇型定时器

 setTimeout(回调函数,毫秒值) 设置延迟性定时器（超时定时器）
 clearTimeout 清除延迟性定时器（超时定时器）

 onload() : 等页面资源（页面图片，文字，标签）加载完毕后执行
 onscroll():  页面滚动时会触发 
 onresize():  页面窗口变化时触发

3、window对象下的子对象（window可省略）

3.1、window.document 文档对象

属性

 body      获取body
 documentElement      获取html

console.log(document.body); //获取body
console.log(document.documentElement); // 获取html

3.2、history 历史记录对象

方法

 back()   后退一个页面
 forward()   前进一个页面

console.log(history);

history.back();
history.forward();
       
history.go(-1)  往后退
history.go(1)  往前进

3.3、location 地址栏对象

属性

 host: 主机域名   
 href： 地址栏信息
 pathname: 路径名
 port: 端口
 protocol： 协议名 https http

方法
```
 reload() 刷新
```

3.4、screen 屏幕对象

属性
```
 width   屏幕宽
 height   屏幕高
```

console.log(screen.width);//宽
console.log(screen.height);//高

3.5、navigator 浏览器对象

console.log(navigator);//查看浏览器相关信息

二、DOM对象

1、概念

DOM：文档对象模型（处理网页内容的方法和接口。）

2、获取元素的方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="test"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <input type="text" name="abs">
    <input type="text" name="abs">
    <input type="text" name="abs">
</body>

</html>

docuemnt.getElementById()

通过id名查找元素只能获取1个。

//通过id名查找元素
var oId = docuemnt.getElementById()

document.getElementsByClassName()

通过类名查找元素。

// 注意，返回的结果是一组数据，需要用[下标]获取
var oItems = document.getElementsByClassName('item')
console.log(oItems);
console.log(oItems[0]);

document.getElementsByTagName()

通过标签名来获取元素。

// 同样获取的是一组数据，[下标]获取
var oDivs = document.getElementsByTagName('div')
console.log(oDivs[1]);// 获取的是页面的第2个div

document.getElementsByName()

通过表单中的name属性来获取元素，获取的是多个

// 获取的是一组数据，[下标]获取
var oIpts = document.getElementsByName('abs');
console.log(oIpts[0]);

3、创建标签的方法

createElement()

通过createElement() 方法创建标签。

var oDiv = document.createElement('div');//创建一个div标签

className

通过className属性给标签添加类名。

oDiv.className = 'box';// 给标签添加类名为box

4、给元素设置样式

oDivs.style.width = getRandomNum()+'px'; //设置宽度
oDivs.style.height = getRandomNum()+'px';// 设置高度
oDivs.style.backgroundColor = getColor();// 设置背景色（-后面单词首字母大写）
oDivs.style.fontSize = getNum(10,80)+'px';// 字体大小
oDivs.style.color = "#000";//字体颜色

5、给元素设置内容

innerHTML 支持标签

// 给元素添加一个a标签
oDivs.innerHTML = '<a href="http://www.baidu.com">百度</a>'

innerText 不支持标签

// 添加内容
oDivs.innerText = '天气不错'; //不能添加标签

6、元素的删除

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button onclick="dele(this)">点击删除</button>
</body>

</html>

function dele(obj){
     //删除点击删除的tr
     var flag = confirm('确定删除吗？');//确认则返回true
     if(flag){
      //若为true
          obj.parentNode.parentNode.remove();//删除父类的父类
     }
}

经典案例

// 点击添加表格，内容为文本框输入的内容
function tableAdd(){
        //首先判断文本框有没有内容，若没有，提示输入内容
        if($('txt1').value == ''||$('txt2').value== ''||$('txt3').value ==''){
            alert('请输入内容!');
            return;
        }
        //获取tbody
        //tbody 获取值为一组数据 需要在后面加[下标]获取
        var oTbody = document.getElementsByTagName('tbody')[0];

        //先创建一行
        var oTr = document.createElement('tr');
        
        //再创建四列，其中第四列存放是否删除的标签
        var oTd1 = document.createElement('td');
        var oTd2 = document.createElement('td');
        var oTd3 = document.createElement('td');
        var oTd4 = document.createElement('td');

        //把td标签放到tr标签中 (把四列放到一行里)
        oTr.appendChild(oTd1);
        oTr.appendChild(oTd2);
        oTr.appendChild(oTd3);
        oTr.appendChild(oTd4);

        // 把tr 放到tbody中， (把一行放到tbody里)
        oTbody.appendChild(oTr);

        //分别给四列添加内容,添加的内容为文本框用户自己输入的值
        oTd1.innerText = $('txt1').value;
        oTd2.innerText = $('txt2').value;
        oTd3.innerText = $('txt3').value;
        oTd4.innerHTML = '<input type="button" value="删除" οnclick="dele(this)">'

        //添加完一行后，把文本框内容清空
        $('txt1').value = $('txt2').value = $('txt3').value = '';
    }

    function dele(obj){
        //点击删除按钮删除该行
        var flag = confirm('确定删除吗？');
        
        //点击确定，值为true
        if(flag){
            obj.parentNode.parentNode.remove()
        }
        
    }

// 点击生成留言板
function liuYan() {

        //获取留言内容
        var oTextArea = $('ttt');

        //判断文本域内容是否为空
        if(oTextArea.value == ''){
            alert('请输入内容！');
            return;
        }

        //获取ul标签
        var oUl = document.getElementsByTagName('ul')[0];


        //创建li标签 一个Li代表一条留言内容
        var oLi = document.createElement('li');


        //创建li里面的子标签
        var oH = document.createElement('h4');
        var oCont = document.createElement('p');
        var oSpa = document.createElement('span');

     
        //往li里的子标签添加内容
        oH.innerText = '人名：世界很奇妙';
        oCont.innerText = oTextArea.value;
        oSpa.innerHTML = '时间：'+getDate();

        console.log(oH);
        console.log(oCont);
        console.log(oSpa);

        //把li标签添加到ul里
        oUl.appendChild(oLi);

        //把li里面的子标签添加到li里
        oLi.appendChild(oH);
        oLi.appendChild(oCont);
        oLi.appendChild(oSpa);

        //把文本域内容清空
        $('ttt').value = '';
        
    }

发臭的靈魂

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
BOM，DOM对象方法及属性

BOM，DOM对象方法及属性一、BOM对象二、DOM对象一、BOM对象1、概念BOM：浏览器对象模型（地址栏，历史记录，屏幕，滚动条，关闭），与浏览器交互的方法和接口。2、顶级对象windowBOM的核心对象是window，它表示浏览器的一个实例。属性 innerHeight（浏览器的高度,带滚动条） innerWidth（浏览器的宽度,带滚动条）console.log(window.innerWidth);// 浏览器高console.log(innerWidt
复制链接

扫一扫

专栏目录