JS之BOM,DOM-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34568700/article/details/106143266

简介：

BOM:Browser Object Model:浏览器对象模型,BOM中的顶级对象就是window
DOM:Document Object Model 文档对象模型。页面中有一个顶级对象:Document
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>