前端之Bom和DOM

淘淘桃

已于 2023-06-21 17:19:51 修改

阅读量6.3k

点赞数 1

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

于 2023-04-18 08:30:40 首次发布

本文链接：https://blog.csdn.net/xiaolisolovely/article/details/130200539

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。

DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。

Bom

location对象

window的子对象
location.href  获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面

弹出框

警告框
alert("你看到了吗？");

确认框（了解即可）
condirm('你确定嘛')

提示框（了解即可）
prompt("请在下方输入","你的答案")

计时相关、

通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

setTimeout（）几秒后指定js语句或者函数，1000 毫秒等于一秒延时任务

var t=setTimeout("JS语句",毫秒)    //几秒后指定js语句 ，1000 毫秒等于一秒

clearTimeout() 取消setTimeout定时任务

clearTimeout(t)

setInterval 定时任务

// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);
timer=null

Dom

查找标签

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取
document.getElementsByTagName     根据标签名获取标签合集

创建节点

var divEle = document.createElement("div");

添加节点

var imgEle=document.createElement("img");   //创建一个img标签
imgEle.setAttribute("src",        "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
//增加src属性
var d1Ele = document.getElementById("d1");    //查找到
d1Ele.appendChild(imgEle);     //添加标签

删除节点：

获得要删除的元素，通过父元素调用该方法删除。

somenode.removeChild(要删除的节点)

替换节点：

somenode.replaceChild(newnode, 某个节点);

属性节点

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

class的操作

className  获取所有样式类名(字符串)

classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加

事件

onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。

onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown 某个键盘按键被按下。应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。

onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。

绑定方式

方式一：定义函数

<div id="d1" onclick="changeColor(this);">点我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>

注意：

this是实参，表示触发事件的当前元素。

方式二：

<div id="d2">点我</div>
<script>
  var divEle2 = document.getElementById("d2");  //先获取标签对象
  divEle2.onclick=function () {        //绑定onclick点击事件
    this.innerText="呵呵";
  }
</script>

省市联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<select name="" id="city">

</select>
<select name="" id="xia"></select>
<script>
     data = {"河北省": ["廊坊", "邯郸"],
         "北京": ["朝阳区", "海淀区"],
         "山东": ["威海市", "烟台市","淄博"]};
     var city = document.getElementById('city');    //获取省标签对象
     var xia = document.getElementById('xia');      //获取市标签对象
     for (var i in data){
         //console.log(i)     河北省  北京
         var op = document.createElement('option');  //创建option标签     
         op.value = i;            //给标签value属性赋值
         op.innerText=i;            //给标签增加文本内容
         city.appendChild(op);    //将标签插入到省标签中
     }

     city.onchange =function (){
         xia.innerText='';      //每次选择省之后，清空市中的文本内容
       var s = city.value;
       var shi = data[s]
         //console.log(shi)
       for (var j in shi){
           var op = document.createElement('option');
           op.value = shi[j];
           op.innerText=shi[j];
           xia.appendChild(op)
       }
     }
</script>
</body>
</html>

淘淘桃

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端之Bom和DOM

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。Bom。
复制链接

扫一扫