JS笔记四（BOM\DOM操作）

最新推荐文章于 2022-05-06 10:28:12 发布

FreeSoar1

最新推荐文章于 2022-05-06 10:28:12 发布

阅读量151

点赞数

分类专栏： js 文章标签： JS DOM BOM

本文链接：https://blog.csdn.net/u011846249/article/details/85053218

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、BOM模型：
浏览器提供的用户与浏览器窗口之间交互的对象及操作的接口。这些对象并不是独立存在的。对象与对象之间存在着层次结构，对象模型的作用就是描述这些层次结构。
window对象：
表示整个浏览器窗口
所有的浏览器中JS顶级方法（即可以直接使用的方法）都属于window对象。
window对象方法：

alert()            prompt()          confirm()
setTimeout()    clearTimeout()    setInterval()   clearInterval()
open()   close()

<script type="text/javascript">
  var username=prompt("请输入用户名","李四");

  alert(username);

  var deldata=confirm("确定删除");

   alert(deldata);
</script>

<script type="text/javascript">
setTimeout(function(){
		alert("延迟5秒弹出窗口");
	},5000);   //执行一次

    setInterval(function () {
      document.write("asdas");	
    },2000);   //循环执行多次

    setTimeout(function(){
        window.open("http://www.baidu.com");
    },2000);
</script>

history 对象：
history用来访问浏览器窗口的历史对象。
location对象：
location对象用来访问当前窗口的url地址信息。
navigator对象：
navigator对象包含浏览器信息。

二、DOM模型
DOM模型：
文档对象模型
浏览器提供的操作HTML文档内容的应用程序接口
用于对文档进行动态操作，如增加文档内容，删除文档内容，修改文档内容等等。
通过JS来动态控制网页当中的网页元素，网页当中的网页元素都可以得到对应JS对象（DOM对象），通过控制DOM对象即可控制页面中的网页元素。

**DOM对象获取：
 document.getElementById（）；
 document.getElementsByTagName()；
 document.getElementsByClassName();

<script type="text/javascript">
	/*document.getElementById()
	通过网页元素对应的html标记的id的属性值来得到DOM对象*/
	var imag1 = document.getElementById("img1");
	imag1.style.width="100px";
	imag1.style.height="100px;"

     /*
      document.getElementsByTagName()
      通过网页元素的标记名称得到dom对象数组
     */
	var imga2 = document.getElementsByTagName("img");
	imga2[0].style.border = "1px solid red";


	var imgacla = document.getElementsByClassName("banner");
	imgacla[0].style.marginTop="200px";
</script>

DOM对象获取方式-层级关系获取：

通过兄弟节点关系获取
node.previous(next)Sibling
通过父节点获取子节点
node.childNodes    node.firstChild   node.lastChild
通过子节点获取父节点
node.parentNode

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>DOM层级关系</title>
	<style type="text/css">
		img{
			width: 200px;
			height: 200px;
		}
	</style>
</head>
<body>
   <img src="./image/1.jpg" id="img1"/>
   <img src="./image/1.jpg">
</body>
<script type="text/javascript">
	var img1 = document.getElementById("img1");
	console.log(img1.nextSibling);   //#text
	console.log(img1.nextSibling.nextSibling);   //<img src="./image/1.jpg">

	img1.nextSibling.nextSibling.style.border= "3px solid red";
</script>
</html>

DOM对象控制网页元素样式：
通过DOM对象上的style 属性来进行控制
DOM对象上样式写法;

CSS样式属性名：color    font  font-family  font-weight  background-color
JS样式属性名：style.color  style.font  style.fontFamily  style.fontWeight  style.backgroundColor

DOM对象控制网页元素标记的内容：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Document</title>
</head>
<body>
   <div id="container">
   	
   </div>
</body>
<script type="text/javascript">
	document.onclick = function(){
	var contain = document.querySelector("#container");
	contain.innerHTML = "<img src='./image/1.jpg'> "
}
</script>
</html>

FreeSoar1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS笔记四（BOM\DOM操作）

一、BOM模型：浏览器提供的用户与浏览器窗口之间交互的对象及操作的接口。这些对象并不是独立存在的。对象与对象之间存在着层次结构，对象模型的作用就是描述这些层次结构。window对象：表示整个浏览器窗口所有的浏览器中JS顶级方法（即可以直接使用的方法）都属于window对象。window对象方法：alert() prompt() confirm()...
复制链接

扫一扫