BOM (Browser Object Model 浏览器对象模型)
浏览器内核分为两类:
1.渲染引擎:用来渲染网页内容,将网页的代码转换为用户最终看见的画面
2.脚本引擎:用来执行JS代码(公认最快的是谷歌的V8引擎)
外联:在外部另建一个js文件,通过<script>标签在html文件引入
<script scr:"./xxx.js"></script>
内部:在html文件内部创建<script>标签,在标签范围内直接书写js代码
<script> console.log("sdfsf") </script>
嵌入:在html标签内部直接书写js代码
bom中六大对象:
1、浏览器对象 navigator:包含浏览器相关信息
2、窗口对象 window:所有BOM对象的顶层对象
3、屏幕对象 screen:包含显示屏幕相关信息
4、历史对象 history:用户访问页面的历史
5、位置对象 location:当前页面地址
6、文档对象 document:包含整个html文档页面
window对象的属性:
属性 | 描述 |
---|---|
innerHeight | 返回窗口的文档显示区的高度。 |
innerWidth | 返回窗口的文档显示区的宽度。 |
outerHeight | 返回窗口的外部高度,包含工具条与滚动条。 |
outerWidth | 返回窗口的外部宽度,包含工具条与滚动条。 |
window对象的方法:
方法 | 描述 |
---|---|
alert() | 显示带有一段消息和一个确认按钮的警告框。 |
confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
prompt() | 显示可提示用户输入的对话框。 |
scrollBy(x,y) | 按照指定的像素值来滚动内容。 |
scrollTo(x,y) | 把内容滚动到指定的坐标。 |
open(url,target,features) | 打开一个新的浏览器窗口或查找一个已命名的窗口 |
setInterval() | 按照指定的周期(以毫秒计)来调用函数或计算表达式。 |
setTimeout() | 在指定的毫秒数后调用函数或计算表达式(延迟性) |
le
let timer=setInterval(function(){
if(i>=0){
console.log(i);
i--;
}else{
clearInterval(timer);
}
},1000)
//计时器
screen对象
属性 | 描述 |
---|---|
width、height | 返回屏幕的总宽高 |
avaiWidth、avaiHeight | 返回屏幕的可用宽高(减去底部任务栏) |
history对象
方法 | 说明 |
---|---|
back() | 加载 history 列表中的前一个 URL |
forward() | 加载 history 列表中的下一个 URL |
go() | 加载 history 列表中的某个具体页面 |
location对象的属性
属性 | 描述 |
---|---|
href | 返回完整的URL |
<!--p加超链接-->
<p id="go">点击</p>
<script>
go.onclick = function () {
location.href = 'http://www.baidu.com';
}
</script>
DOM
DOM(Document Object Model)文档对象模型
dom中每个节点都有三个相关属性
节点类型 | node name | node type | node value |
---|---|---|---|
元素节点 | 标签名(大写) | 1 | null |
属性节点 | 属性名 | 2 | 属性值 |
文本节点 | #text | 3 | 文本内容 |
//DOM0
//通过document.body可以拿到body标签
//DOM2
document.getElementById()
<p id='temp'>点击我去百度</p>
<input type="text">
//通过id查找
let result1 = document.getElementById('temp');
console.log(result1);// <p id='temp'>点击我去百度</p>
document.getElementsByTagName()
<p id='temp'>点击我去百度</p>
<p class='box'>1</p>
<p class='box'>2</p>
<p class='box'>3</p>
<script>
//通过元素名查找
result1 = document.getElementsByTagName('p');
console.log(result1); //[p#temp, p.box, p.box, p.box]
</script>
document.getElementsByClassName()
<p class='box'>1</p>
<p class='box'>2</p>
<p class='box'>3</p>
<script>
//通过类名查找
result1 = document.getElementsByClassName('box');
console.log(result1);//[p.box, p.box, p.box]
</script>
document.getElementsByName()
<input name="x" type="radio" value="aaa">
<script>
//通过name名字查找
result1 = document.getElementsByName('x');
console.log(result1);//[input] (<input name="x" type="radio" value="aaa">)
</script>
注:上面的方法是直接在括号里加引号后写名字
document.querySelector() 括号里写选择器,但只能得到通过该选择器选择的第一个元素
document.querySelectorAll() 括号里写选择器,能够得到所有通过该选择器选择的元素
注:document.querySelector()和document.querySelectorAll(),css中选择器怎么用,小括号中选择器就怎么写
<div id="box"></div> <div></div> <input type="text" name="aaa"> <p class="wrap"></p> <p class="wrap"></p> <p class="wrap"></p> document.getElementById("id属性的值"); document.getElementsByTagName("标签的名字"); document.getElementsByName("name属性的值"); document.getElementsByTagName("标签的名字"); document.getElementsByClassName("类样式的名字"); document.getElementById("box"); document.getElementsByTagName("div"); document.getElementsByName("name属性的值"); document.getElementsByName("aaa"); document.getElementsByClassName("wrap"); // get -> 获取 // Element -> 元素 // By ->通过 // Id -> id的值 //TagName-> 标签名 // name ->对应的值
通过关系查找元素
元素名.parentElement 父元素
<div id="box2"> <span id="sp">111</span> </div> <script> console.log( sp.parentElement);// 整个div标签 </script>
元素名.firstElementChild 第一个子元素
<div id="box1"> <p id="p1">11</p> <p id="p2">22</p> <p id="p3">33</p> </div> <script> console.log( box1.firstElementChild );// <p id="p1">11</p> </script>
元素名.lastElementChild 最后一个子元素
<div id="box1"> <p id="p1">11</p> <p id="p2">22</p> <p id="p3">33</p> </div> <script> console.log( box1.lastElementChild );// <p id="p3">33</p> </script>
元素名.children 所有子元素
<div id="box1"> <p id="p1">11</p> <p id="p2">22</p> <p id="p3">33</p> </div> <script> console.log( box1.children );// [p#p1, p#p2, p#p3],全部3个子元素 </script>
元素名.previousElementSibling 前一个兄弟元素
<div id="box1"> <p id="p1">11</p> <p id="p2">22</p> <p id="p3">33</p> </div> <script> console.log( p2.previousElementSibling);// <p id="p1">11</p> </script>
元素名.nextElementSibling 后一个兄弟元素
<div id="box1"> <p id="p1">11</p> <p id="p2">22</p> <p id="p3">33</p> </div> <script> console.log( p2.nextElementSibling);// <p id="p3">33</p> </script>
添加节点
document.createElement('元素名') 创建新元素
父节点.appendChild(新元素)
将一个新节点作为最后一个子元素添加到指定父节点,类似于数组的push
<body> <div id="box"> <p id="p"></p> </div> <script> let h1 = document.createElement('h1')//创建 let body=document.body;//获取 body.appendChild(h1);//添加 </script> <!--添加后:h1会在body结束标签之前--> <h1></h1> </body>
父节点.InsertBefore(新元素,旧元素)
在父节点的某个已有子节点前再插入一个子节点
<div id="box"> <p id="p"></p> </div> <!--添加后:--> <div id="box"> <h1></h1> <p id="p"></p> </div> <script> let p = document.querySelector('p');//获取已有子节点 let h1 = document.createElement('h1')//创建新节点 let temp = document.querySelector('#box')//获取父节点 box.insertBefore(h1, p);//添加 </script>
删除节点
父元素.removeChild(子元素)
<div id="box2">div1</div> <div id="box1"> <p id="p1">1</p> <p id="p2">2</p> </div> <script> box1.removeChild(p1);//删除 <p id="p1">1</p> </script>
替换节点
父节点.replaceChild(新元素,旧元素)
<div id="box2">div1</div> <div id="box1"> <p id="p1">p1</p> <p id="p2">p2</p> </div> <script> let h=document.createElement('h1'); box1.replaceChild(h,p1);//将<p id="p1">p1</p>替换成<h1></h1> </script>
文本节点的操作
元素名.innerText:获取时只获取标签里的文本,添加时无法识别标签
元素名.innerHTML:添加时能识别标签,获取时会将获取的元素里面的标签认为是文本
<div id="box"> <p id="pEl"> <span>54321</span> </p> </div> <script> //获取标签中的文本 let pEl = document.querySelector('#pEl'); console.log( pEl.innerText);//54321 console.log(pEl.innerHTML);// <span>54321</span> //将js中的文本添加到标签中 //元素名.innerText=要添加的内容 //元素名.innerHTML=要添加的内容 //如果添加的时候只有纯文本两个都可以,如果添加时有元素,用innerHTML </script>
操作css
操作属性节点
以前使用createAttribute()搭配 setAttributeNode()为元素添加属性
<div></div> <script> let ele=document.querySelector('div');//获取节点 let createld=document.createAttribute('id');//创建属性节点id createld.value='box';//为属性赋值 ele.setAttributeNode(createld);//为元素设置属性节点 <div id="box"></div> </script>
属性操作:
访问元素的属性:elementNode.attribute 访问
特殊的原生属性
以class获取元素是byClassName(),所以操作class的属性也是ele.className,例如ele.className='red'
获取label标签的for属性值,以elementNode.htmlFor获取,ele.htmlFor="username"
自定义属性操作:
标签有自己的属性,称为原生属性,但是有时候对于元素操作,或者想将js中某些数据(信息)放在标签上,就会用到自定义属性
在自定义属性中,只能以data-为前缀来命名,它是一种会被浏览器忽略的自定义属性,属于页面私有,不被外部服务器使用
1、以data-开头
2、只能包含小写字母、数字、连字符、点、冒号或者下划线
<div id="box" data-name="1"></div> <script> box.dataset.name='0'//修改元素自定义属性 box.dataset.index="2"//设置自定义属性<div data-name="2"> box.dataset["value"]='3'//方括号访问法 </script>
方法操作属性:
1、eleNode.getAttribute('attr') //获取元素属性后的值
2、eleNode.setAttribute('attr','value') //设置属性值
3、eleNode.removeAttribute('属性名')//删除属性
4、ele.Node.hasAttribute('attr') //查找属性,返回类型为Boolean
操作元素class列表:
元素所有的class都存放
box.classList.add('margin');
console.log(box.classList);//red border margin
ele.classList.add("class1","class2"...) 添加类(方法添加新类,不产生冲突)
ele.classList.remove("class1","class2"..)删除类(如果类不存在,也不报错)
ele.classList.contains("className")是否存在类,返回Boolean
ele.classList.toggle("className")切换类(如果有就取消,没有就增加)
操作内嵌样式:
<div id="box"></div> <script> box.style.height="100px"; console.log(box.style.height);//100px </script> //第二种写法 box.style.cssTest=`height:100px;background-color:red;`; //第三种写法(写法属于对象的键值对) Object.assign(box.style,{ width:"100px", height:"100px" }); //获取最终样式 console.log(window.getCompytedStyle(box).height)//100px