JS学习四(BOM DOM)

    BOM               



Screen对象

console.log(window.width);//屏幕宽度
console.log(window.height);//屏幕高度
console.log(window.availWidth);//屏幕可用宽度
console.log(window.availHeight);//屏幕可用宽度

★  location对象

取到浏览器的URL地址信息:
完整的URL路径:
协议名://主机名(IP地址):端口号/文件所在路径?传递参数(name1=value1&name2=value2)#锚点
例如:
http://127.0.0.1:8080/wenjianjia/index.html?name=jredu#top

console.log(location.href);    //返回当前完整路径
console.log(location.protocol);    //返回协议名
console.log(location.host);    //返回主机名+端口号
console.log(location.hostname);    //返回主机名
console.log(location.port);    //返回端口号
console.log(location.pathname);    //返回文件路径
console.log(location.port);    //返回端口号
console.log(location.search);    //返回开头的参数列表
console.log(location.hash);   //返回#开头的锚点

 使用JS跳转页面:
location = "http://www.baidu.com";

其他使用location提供的方法跳转页面的方式
location.assign("http://www.baidu.com");
location.replace("http://www.baidu.com");
location.reload("http://www.baidu.com");

function assign(){
//加载新的文档,加载以后,可以回退
location.assign("http://www.baidu.com");
}

function replace(){
//使用新文档替换当前文档,替换以后,不能回退
location.replace("http://www.baidu.com");
}

function reload(){
重新加载当前文档,刷新页面
reload():在本地刷新当前页面,相当于F5
reload():强制刷新,从服务器端重新加载页面,相当于ctrl+F5强制刷新页面
location.reload();
}

/*
history 浏览历史
1、
console.log(history);
console.log(history.length);   //表示浏览历史个数

function back(){
history.back();  后退按钮
}
function forward(){
history.forward();  前进按钮
}
function go(){
跳转到浏览历史的任意一个页面:
0表示当前页面,-1表示后一页(back),1表示前一页(forward)
}

navigator 了解即可
包含浏览器的各种系统信息。

console.log(navigator);

检测浏览器安装的各种插件。

console.log(navigator.plugins);

Window对象的常用方法
在window对象中的所有方法和属性,均可以省略window关键字。
window.alert(); 》弹窗
1.alert():弹出一个警告提示框;
2.prompt():弹出接受用户的输入;
3.confirm():弹出带有“确定”“取消”按钮的对话框,点击按钮返回
4.close():关闭当前浏览器窗口。在个别浏览器中,只能关闭再当前脚本新打开的页面
(使用超链接、window.open()等方式打开)
5.open():打开一个新窗口。
参数一:新窗口的地址;
参数二:新窗口的名字,并没什么用;
参数三:新窗口的各种属性设置,"属性=值1,属性2=值2,属性3=值3"
6.setTimeout: 设置延时执行,只会执行一次;
setInterval: 设置定时器,每隔n毫秒执行一次。
接受两个参数:需要执行的function、毫秒数。
7.clearTimeout:清除延时器
clearInterval:清楚定时器
使用方法:设置延时器或者定时器时。可以使用变量接受定时器ID;
var id =setInterval;
调用clearInterval时,将id传入,即可清除对应的定时器;
clearInterval(id);

    DOM               



【DOM树节点】
DOM树节点分为三大类:元素节点、属性节点、文本节点:
文本节点、属性节点属于元素节点的子节点,操作时,均需要先取到元素节点,在操作子节点。
可以使用getElement系列方法,取到元素节点。

【查看元素节点】

getElementById:通过Id取到唯一节点。如果Id重名,只能取第一个。
getElementsByName() :通过name属性
getElementsByTagName() :通过标签名
getElementsByClassName() :通过class名

获取元素节点时,一定要注意:获取节点的语句,必须在DOM渲染完成之后执行,可以有两种方式实现:
① 将js代码写在body之后;② 将js代码写在window.onload函数中。
后面三个getElements,取到的是数组格式,不能直接添加各种属性,而应该取出数组的每一个单独操作。
例如:getElementsByName("name1")[0].onclick=function

【查看/设置属性节点】
1.查看属性节点:getAttribute("属性名");
2.设置属性节点:setAttribute("属性名","新属性值");
查看和设置属性节点,必须先取到元素节点,才能使用。

eg:

var btn1=document.getElementById("btn1");
btn1.onclick=function(){
  alert(btn1);
}

var input1=document.getElementByname("input");

时间: 2024-10-04 14:20:03

JS学习四(BOM DOM)的相关文章

JS学习笔记-BOM之window

BOM:BrowserObjectModel,浏览器对象模型,提供JS中对浏览器的各种操作的对象,是JS应用中唯一没有相关标准的部分,这事BOM经常出现问题的所在,主要用于处理浏览器窗口与框架,浏览器特有的JS扩展也被默认为BOM的一部分,而各浏览器之间的公有对象就成了默认的标准.本篇文章将主要介绍window对象. 属性 世界上本没有模型,用的多了也就成了模型.模型便是一个可供参考的东西,BOM中的一系列通用的对象便构成了这个模型,其结构可展示为: window的六大属性,同时它们也是对象:

【JS学习笔记】DOM基础-字节点,父节点

一.DOM基础 (1)什么是DOM?DOM,即document,是用来操作页面上的元素,比如操作div获取,修改样式等.是JS的组成部分,还是一套规范. (2)浏览器的支持情况 现在主流的浏览器有3种,分别是IE,Chrome,Firefox. IE:在IE6-8版本中,对DOM的支持差不多是百分之十几差不多了,但是到了IE9就有了质的飞跃. Chrome:介于两者之间,在60%左右,对DOM支持的不是那么的好也不是那么的差. Firefox:对于DOM的支持几乎可以用99%来形容. 二.DOM

JS学习9(DOM)

DOM,文档对象模型,是一个针对HTML和XML文档的一个API,它描绘了一个层次化的节点树.值得注意的是IE中的所有DOM对象都是使用COM对象实现的,这就造成了IE中的DOM对象与原生JS对象表现并不一致. 节点层次 文档节点是每个文档的根节点.在html文档中,文档节点只有一个子节点即html元素.这个元素我们称之为文档元素,每个文档只有一个文档元素,其他所有元素都包含在文档元素中. 节点分为几种不同的类型,每种类型分别表示文档中不同的信息及标记. 比如:元素节点,特性节点,文档节点,注释

JS学习10(DOM扩展)

选择符API 这个API存在的主要目的就是让JS原生支持CSS查询. querySelector() 这个方法接收一个CSS选择符,返回与该模式匹配的第一个元素或null. var body = document.querySelector("body"); querySelectorAll() 这个方法同样接收一个CSS选择符,以静态NodeList的形式返回所有匹配的元素. var strongs = document.querySelectorAll("p strong

vue.js 学习四(指令和自定义指令)

官方的指令说明已经很简单了,这里再写一遍,也是自己加深一下印象 v-text 就是写入单纯的文本,可以忽略这个指令直接双花括号代替 <span v-text="msg"></span> <!-- 和下面的一样 --> <span>{{msg}}</span> v-html 更新元素的 innerHTML,如果取回的值里面包含了html的样式,可以使用这个指令. 以下抄写了官方注意事项,对于用户输入的HTML,显示的时候需要谨慎

【JS学习笔记】DOM操作应用-创建、插入和删除元素;文档碎片

一.创建.插入和删除元素 (1)创建DOM元素 createElement(标签名) 创建一个节点 appendChild(节点) 追加一个节点 例子:为ul插入li <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="htt

【JS学习笔记】DOM基础-首尾子节点,兄弟节点

一.DOM节点 (1)首尾子节点 有兼容性问题 firstChild.firstElementChild firstChild在高版本的浏览器上具有兼容问题,firstChild在高版本浏览器中指的是文本元素. firstElementChild高级浏览器下可以使用,在IE6-8下反而不兼容. 解决兼容性的办法是使用if进行判断 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

【Node.js学习四】 Node.js回调函数

Node.js 回调函数 Node.js 异步编程的直接体现就是回调. 异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了. 回调函数在完成任务后就会被调用,Node 使用了大量的回调函数,Node 所有 API 都支持回调函数. 例如,我们可以一边读取文件,一边执行其他命令,在文件读取完成后,我们将文件内容作为回调函数的参数返回.这样在执行代码时就没有阻塞或等待文件 I/O 操作.这就大大提高了 Node.js 的性能,可以处理大量的并发请求. 下面对阻塞代码和非阻塞代码分别举出一例

js学习总结:DOM节点二(dom基本操作)

一.DOM继承树 DOM--Document Object Model DOM定义了表示修改文档所需要的方法.DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml的一类厂商定义,也有人称DOM是对HTML以及xml的标准编程接口. 继承树模型图: 1.document继承于HTMLDocument,而HTMLDocument继承于Document; 2.文本节点对象Text与注释节点对象Comment继承于CharacterData 3.在Element节点下其实存在两个子节点,除