JS之BOM,DOM

鼠扑 · 2025-1-2 02:48:18

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

简介：

BOM:Browser Object Model:浏览器对象模型,BOM中的顶级对象就是window
DOM

ocument Object Model 文档对象模型。页面中有一个顶级对象

ocument
window----皇上
document–总管太监,window对象下的属性,有的时候也是一个对象, 对象可以调用属性或者方法 window.document.getElementsByName();
页面中所有的内容都是window的,变量是属于window的,函数也是属于window,对象都是window的，为了开发方便和维护,window是可以省略

var num=10;
console.log(window.num);
function f1() {
//this就是:谁调用了这个函数.,this就是谁
console.log("调用了"+this);
}
window.f1();

复制代码

BOM:

页面的加载事件,页面中所有的内容加载完毕后(页面中的标签、图片、外部引入…全部加载)才执行

window.onload=function () {
//通过id获取元素
var btnObj=document.getElementById("btn");
console.log(btnObj.value);
};

复制代码

页面关闭之后才执行,谷歌不支持,IE8支持

window.onunload=function () {
alert("我执行了");
};

复制代码

location是window对象下的一个属性,现实上也是一个对象,重要是对浏览器的地址栏做操纵

凡是使用window的地方都可以省略window
console.log(location.href); //获取地址的 location.href="http://www.baidu.com"; //设置地址,地址改变,就会跳转 location.assign("http://www.baidu.com");//和location.href属性是一样的操纵, location.replace("http://www.baidu.com");;//把当前页面的地址,更换成一个新的地址,不会生存到历史记录 location.reload();//重载,刷新 console.log(window.location.hash);//地址栏上#及背面的内容 console.log(window.location.host);//主机名字和端口号 console.log(window.location.hostname);//主机名字 console.log(window.location.pathname);//文件的相对路径 console.log(window.location.port);//端口 console.log(window.location.protocol);//协议 console.log(window.location.search);//搜索的内容:获取的是?及背面的内容
navigator对象是window下的一个属性,重要是获取本地的相关系统的信息

console.log(navigator.userAgent);//获取浏览器的信息
console.log(navigator.platform);//系统的信息

复制代码

history对象是window下的一个属性,重要是对历史记录的操纵,前进或者是后退

想要前进和后退,必须要有历史记录

history.forward();//前进
history.back();//后退
history.go();//如果是正数就是前进,负数就是后退

复制代码

定时器：

// 循环执行的定时器
var timeId=setInterval(function () {
alert("你瞅啥?瞅你咋地?");
},1000);//返回的就是定时器id.对应clearInterval(定时器的id)清理定时器
//清理定时器的方法
clearInterval(timeId);
// 延时执行定时器
var timeId=setTimeout(function () {
alert("哈哈");
},1000);//返回的就是定时器id.对应clearTimeout(定时器的id)清理定时器
//清理定时器
clearTimeout(timeId);

复制代码

DOM:

DOM的作用:操纵页面的元素

element:元素----页面中的标签都是元素,标签
* node:节点----页面中所有的内容都是节点:标签,文本(空缺项),属性
* parent:父亲
* children:孩子

获取DOM：

doucment.getELementById(‘idname’);
document.getElementsByTagName(“img”)----返回的是一个伪数组

DOM事件绑定：

```
<body>
<input type="button" value="按钮" onclick="alert('被点了')"/>
<script>
function f1() {
alert("哈哈");
}
</script>
<input type="button" value="按钮" onclick="f1();"/>
<input type="button" value="按钮" id="btn1" />
<script>
function f2() {
alert("哦被点了");
}
var btnObj=document.getElementById("btn1");//返回这个获取的对象(就是这个标签)
btnObj.onclick=f2; //f2()调用
</script>
<input type="button" value="按钮" id="btn"/>
<script>
//获取按钮
// var btnObj=document.getElementById("btn");
// btnObj.onclick=function () {
// alert("哈哈");
// };
document.getElementById("btn").onclick=function () {
alert("哈哈");
};
document.getElementById("btn").addEventListener(function(){alert('哈哈')},false)
</script>
</body>
```

复制代码

修改DOM中的文本内容：

<body>
<input type="button" value="显示效果" id="btn"/>
<input type="text" value="文本1"/><br/>
<input type="text" value="文本1"/><br/>
<div id="dv"></div>
<a href="http://www.baidu.com" id="ak">百度</a>
<script>
//根据id获取按钮,为按钮注册点击事件,添加事件处理函数(后面的匿名函数)
document.getElementById("btn").onclick = function () {
//修改div
var dvObj=document.getElementById("dv");
dvObj.innerText="我是一个div";
//修改超链接的热点文字及地址
var aObj=document.getElementById("ak");
aObj.href="http://www.itcast.cn";
aObj.innerText="Hello";
// 修改input的内容
var inputs=dvObj2.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
//判断input标签的type属性是不是text
if(inputs[i].type=="text"){
inputs[i].value="都改变吧";
}
}
};
</script>
</body>

复制代码

修改img的宽高,src：

<body>
<img src="images/liu.jpg" alt="美景" width="300" height="400" id="img1"/>
<script>
//点击图片,设置宽和高
var imgObj = document.getElementById("img1");
imgObj.onclick = function () {
this.width = "500";
this.height = "200";
//鼠标在图片上的时候显示的信息
this.title = "好大的图片啊";
this.src='images/boduo.jpg'
};
/*
* 普通的标签的属性:src/href/title/width/height/...
* 表单标签的属性:name/value/type/checked/disabled/selected...
*/
</script>
</body>

复制代码

如果html标签中的这个属性和值,都是自己,而且只有一个,此时在js代码的DOM操纵中值就是布尔类型, checked,selected,disabled…

<body>
<div id="dv1">
<input type="button" value="选择性别" id="btn1" />
<input type="radio" value="2" name="sex" id="ck"/>女
</div>
<div id="dv2">
<input type="button" value="选择兴趣" id="btn2" />
<input type="checkbox" value="1" name="xingque"/>吃饭
<input type="checkbox" value="2" name="xingque"/>睡觉
<input type="checkbox" value="3" name="xingque" id="ddd"/>打豆豆
</div>
<div id="dv3">
<input type="button" value="选择城市" id="btn3"/>
<select id="s1">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">重庆</option>
<option value="4" id="op1">天津</option>
</select>
</div>
<script>
//点击按钮选择性别
//根据id获取按钮,添加点击事件,添加事件处理函数
document.getElementById("btn1").onclick=function () {
//根据id获取性别为女的这个input标签
document.getElementById("ck").checked=true;
};
//选择性别
document.getElementById("btn2").onclick=function () {
document.getElementById("ddd").checked=true;
};
//选择城市
document.getElementById("btn3").onclick=function () {
document.getElementById("op1").selected=true;
};
</script>
</body>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

JS之BOM,DOM

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块