IT评测·应用市场-qidao123.com
标题:
JS之BOM,DOM
[打印本页]
作者:
鼠扑
时间:
2025-1-2 02:48
标题:
JS之BOM,DOM
简介：
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="js的代码"/>-->
<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>
<!--图片标签本身有width和height的属性,是不需要加px-->
<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企服之家，中国第一个企服评测及商务社交产业平台。
欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)
Powered by Discuz! X3.4
ocument Object Model 文档对象模型。页面中有一个顶级对象ocument