(十七)js bom/dom
- window 是所有BOM中所有对象的核心。
- window 的属性
- window.self代表自己本身,相当于window。
- eg: console.log(window.self === window);
- window.parent 返回父窗口。
- eg: console.log(window.parent);
- window.top返回最顶层的窗口。
- eg: console.log(window.to);
- winddow.opener指向窗口的开启者
- eg: console.log(window.opener);
- 通过a链接打开的新窗口opener属性指向的是这个新窗口的打开者
- window的方法
- 通过js给页面中的某按钮添加跳转至新页面的功能。
- 语法:window.open(url,name,feature,replace);
- url 指的是想要跳转的目的地的url地址
- name可选的字符串,该字符串是一个逗号分隔的特征列表,其中包括数字,字母和下划线,该字符声明了新窗口的名称。
- eg: window.open('url','name');
- 注:如果不加name属性的,只要点击跳转就可以无限制的打开。加上name属性后可以限制这种无限制的叠加,相当于再次点击跳转时,只会跳换到设置了名字后的该网页。放在函数外部时,当页面加载完毕后会自动执行跳转新窗口这个操作。(谷歌默认会把打开的新窗口阻止,但不阻止通过事件点击后跳转的新窗口)
- window.close();关闭窗口
- window.confirm();弹出框含有确认和取消按钮
- 注:确认返回值为true取消返回值为false
- window.prompt(); 弹出一个含有输入框的框,
- 注:确认返回值为字符串,取消返回null;
- history对象
- console.log(history.length);输出结果为页面跳转的历史记录,打开浏览器后,默认为1条历史记录
- history.back;返回上一次浏览的页面。通过历史记录的倒退但会上次浏览的页面。
- history.formward;前进到最后一次打开的新的页面。通过历史记录返回流过过得比较迟的页面
- history.go(x);后退为负数,前进为正数。0刷新页面。数值越大跳转的步数越多
- location对象
- 属性
- location.href = 'https://www.baidu.com'; 页面刷新后跳转至百度页面。
- location.search ; 输出url地址栏中的查询字符串
- location.hash;输出url地址栏中的锚点链接地址
- 注:完整的URL组成部分:协议 (schema http: // http:// http://)域名(domain)端口号(port 80 443)/路径(path)查询字符串(?query)锚点链接(#hash); /
- 方法
- location.assign('http://www.baidu.com');页面刷新后开始加载文档,文档类型为新的地址。
- 注:和histoty.href = 'http://www.baidu.com'类似都会跳转至所设置的页面。
- location.reload();当参数是true,任何时候都会重新加载,false的时候,只有在文档改变的时候才会加载,否则直接读取内存当中的
- location.replace('url');会加载设置的地址的文档,并代替当前文档。不会产生新的历史记录,会覆盖当前的记录
- console.log(navigator.userAgent);用户代理信息,返回结果为用户所使用的浏览器的信息。
- window方法
- window.onload = function(){};页面加载完毕执行
- window.onscroll = function(){};页面滚动条滚动式产生数据。
- window.onresize = function(){};页面比例缩放就会产生数据。
- console.log(document.documentgetElement.clientWidth);获取视窗宽度
- console.log(document.documentgetElement.Height);获取浏览器可视高度
- window.onscroll = function(){
- DOM属性
- 属性
- 读:console.log(document.title)输出结果为页面的title的标题内容
- 写:document.title ='千锋教育'; 改变页面title的 内容为千锋教育
- console.log(document.all);输出页面中所有使用过得标签的集合。
- console.log(document.forms);输出结果为页面中所有的form表单元素,可通过name名或者下标的形式访问到相应的form表单。
- eg:console.log(docuemtn.forms[0]);访问第一个form表单的元素
- 方法
- console.log(document.getElementById('id')); 通过id访问相应的元素
- console.log(document.getElementTagName('divname'))通过标签名来访问相应的元素返回结果永远为集合。
- console.log(document.getElementByName('name'))通过name名来访问相应的元素。存在兼容性问题
- name 属性分内标准属性和自定义属性。
- 标准属性为出厂时,自带的name属性,如form自带name刷新为标准
- 自定义属性为自己定义的name属性,在ie9及其以下村财兼容性问题不可使用。
- document.write('2018/01/25');文本输出
- console.log(document.getElementsByClassName('classname'));通过类名访问相应的元素获取集合.
- 操作内容
- innerHTML:用来设置或获取对象起始和结束标签内(例如div框架,它只会获取div里面的内容,
- innerText:用来设置或获取对象起始和结束标签内的内容 (只是获取文字内容)(适用于IE,
- textContent用来设置或获取对象起始和结束标签内的内容 (只是获取文字内容)(适用于火狐,
- outerHTML 用来设置或获取包括本对象在内的起始和结束标签内(例如div框架,
- outerText 用来设置或获取包括本对象在内的起始和结束标签内的内容(只是获取文字内容)
- 读取的区别:
- innerHTML会读取出标签和文本内容
- innerText只会读取中其中的文本内容
- outerHTML会读取出其自身的标签和其中的文本内容
- outerText只会读取出其中的文本内容
- 写入的区别:
- innerHTML只会写入文本内容
- innerText会写入其中的标签和文本内容
- innerouterHTML会将原来的标签代替为所写入的标签。
- innerouterText会将缩写的文本内容和标签写入到页面中且将原来的标签代替
- 操作属性
- oBox.id = 'newid'改变原来的id名字,
- 通过方法的形式读写
- 读:
- eg:console.log(oBox.getAttribulte('id'));
- 写:
- eg:console.log(oBox.setAttribute('id','newid'));
- 删:
- eg:oBox.removeAttribute('id');
- 操作样式
- 只能读取行内样式
- console.log(oBox.style.width)
- console.log(oBox.style.height)
- console.log(oBox.style.color)
- console.log(oBox.style.backgroundColor)/
- 只能设置行内样式
- oBox.style.width = '400px';//必须加单位。
- oBox.style.backgroundColor = 'blue';//链接起来的样式要用驼峰命名来写
- 设置外联样式或者内部样式
- 获取元素样式值
- console.log(document.getComputedStyle(oBox,false).width);ie不可使用
- console.log(oBox.currentStyle.width);只支持IE
- DOM增删改
- 创建节点
- document.createElement('标签名');
- 创建属性节点
- 创建文本节点
- 对象.innerHTML = "";
- 追加到页面当中
- 父对象.appendChild(newNode) // 插入到父对象最后。
- 父对象.insertBefore(newNode, existsNode) // 插入到什么对象之前。
- 修改(替换)节点
- 父对象.replaceChild(newNode,existsNode); // 前面的替换后面的
- 删除节点
- 父对象.removeChild(oldNode);
- 表格操作
- 获取元素,修改元素,删除元素,添加元素
- 获取元素:
- var oTable = document.getElementById('table');
- var oTbody = oTable.tBodies[0];//获取table中的tbody,tbody浏览器默认添加
- var oTr = oTbody.rows[0];//获取tbody中的某一行。
- var oTd = oTr.Cells[0];//获取这一行中的某一列。
- console.log(oTd.innerHTML);获取到td的文本内容
- 修改:
- oTd.innerHTML = '新的内容'
- 写入:
- var oNewtr = oTbody.insertRow[1];//在tbody中添加新的一行
- var oNewtd = oNewtd.insertCell[1];//在岗创建的行中添加新的一列。
- oMewtd.innerHTML = '新的文本内容';
- 删除:
- var deleteTr = oTbody.rows[2];//获取到tbody中的要删除的行
- oTbody.removeChild(deleteTr);//删除获取到的行。
(十七)js bom/dom的更多相关文章
- js BOM DOM
BOM对象 BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关的动作. 简而言之就是使 JavaScript ...
- JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}
前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...
- js的DOM对象
1.js的Array对象 ** 创建数组(三种) - var arr1 = [1,2,3]; ...
- JS的DOM操作及动画
JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...
- BOM&DOM
BOM(浏览器对象模型) 1. location相关 . location.href 获取当前url . location.href="http://www.sogo.com" 跳 ...
- BOM DOM jQuery
. BOM . location相关 . location.href . location.href="http://www.sogo.com" . location.reload ...
- 原生js 操作dom
1.一些常用的方法 obj.getElementById() 返回带有指定 ID 的元素. obj.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节 ...
- JavaScript BOM DOM 对象
title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...
- python学习笔记十三 JS,Dom(进阶篇)
JS介绍 JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用:JavaScript 是因特网上最流 ...
随机推荐
- Getting Started with Rails (1)
按照官网http://guides.rubyonrails.org/getting_started.html上学习了一下例子.在过程中有很多刚开始没理解的地方,写下来. 首先,建立了一个resourc ...
- Jsoup学习总结
Jsoup学习总结 摘要 Jsoup是一款比较好的Java版HTML解析器.可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方 ...
- 一步一步教你读懂NET中IL
.NET CLR 和 Java VM 都是堆叠式虚拟机器(Stack-Based VM),也就是说,它们的指令集(Instruction Set)都是采用堆叠运算的方式:执行时的资料都是先放在堆叠中, ...
- Authentication token is no longer valid
Linux: Authentication token is no longer valid Problem: Authentication token is no longer valid; new ...
- Python3.x:定时自动发送邮件
定时自动发送邮件 一.简述 python发邮件需要掌握两个模块的用法,smtplib和email,这俩模块是python自带的,只需import即可使用.smtplib模块主要负责发送邮件,email ...
- JMeter并发性测试
JMeter并发性测试 一.JMeter简介 JMeter是apache公司基于java开发的一款开源压力测试工具,体积小,功能全,使用方便,是一个比较轻量级的测试工具,使用起来非常简单.因为jmet ...
- java实验一报告
北京电子科技学院(BESTI) 实 验 报 告 课程:Java 班级: 1352 姓名:黄晓妍 学号:20135227 成绩: 指导教师:娄嘉 ...
- 简单的aop实现日志打印(切入点表达式)
Spring中可以使用注解或XML文件配置的方式实现AOP. 1.导入jar包 com.springsource.net.sf.cglib -2.2.0.jar com.springsource.or ...
- C#抽象类和接口
抽象类和接口有什么区别?有了抽象类为什么还要接口? 接口和抽象类的相同点是都不能实例化,不同点是接口中的方法都没有方法体,而抽象类则不然,除了抽象方法没有方法体外,其他方法都有方法体. 原因是:在C# ...
- SpringBoot实现多数据源(实战源码)
通过一个数据库的表数据去查询同步另一个数据库,之前的方式是通过写个小工具,然后jdbc方式进行处理,这个方式也挺好用的.学习了springboot后发现可以实现多数据源操作,然后就具体实现以下. 以下 ...