• 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');页面刷新后开始加载文档,文档类型为新的地址。
      • 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(){
                     console.log(document.documentElement.scrollTop);获取当前滚动条的位置
                     console.log(document.body.scrollTop);获取当前滚动条位置
                }
因浏览器兼容性问题所以改写为一下格式。
window.onscroll = function(){
     //获取垂直方向的滚动条的位置
     var iScrollT = document.documentElement.scrollTop || document.body.scrollTop;
     //获取水平的滚动条的位置
     var iScrollL = document.documentElement.scrollLeft || document.body.scrollLeft;
     console.log(iScroll);
}
  • 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'));通过类名访问相应的元素获取集合.
存在浏览器兼容性问题,解决方法如下:
//通过ClassName过去元素的集合
function byClassName(sClassName){
    if(document.getElementByClassName){
        //如果页面中存在该元素的话则返回如果没有则解决思路如下:
        //通过便利将页面中的所有元素都拿出来后,进行判断,
        return document.getElementsByClassName(sClassName);
    }else{
        //1获取所有的元素注:此时的getElements!
        var allTags = document.getElementsByTagName(*);
        //2便利获取的所有元素
        var result = [];
        for(var i =0; i<allTags.length;i++){
             if(allTags[i].className == sClassName){
             //因为一个页面中可能存在多个类名相同的元素需要先放到一个数组中存放起来
                 result.push(allTags[i]);
             }
        }
        return retsult;
    }
}
console.log(byClassName('div.header'));
  • 操作内容
    • innerHTML:用来设置或获取对象起始和结束标签内(例如div框架,它只会获取div里面的内容,
而不会获取div)的内容(识别html标签) 。
  • innerText:用来设置或获取对象起始和结束标签内的内容 (只是获取文字内容)(适用于IE,
    最新版火狐已支持)。
  • textContent用来设置或获取对象起始和结束标签内的内容 (只是获取文字内容)(适用于火狐,
      IE8及其以下不支持)。
  • outerHTML  用来设置或获取包括本对象在内的起始和结束标签内(例如div框架,
不仅会获取div里面的内容,也会获取div自身的内容)的内容(识别html标签) 。
  • outerText  用来设置或获取包括本对象在内的起始和结束标签内的内容(只是获取文字内容)
(火狐不支持)
注:innerHTML与innerText的区别
  • 读取的区别:
    • 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
兼容写法
function getStyle(style,sttr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];//attr 为变量在这里需要加上中括号
    } else{
        return docuemnt.getComputerStyle(obj,false)[attr];
    }
}
console.log(oBox,'width');
  • DOM增删改
    • 创建节点
      • document.createElement('标签名');
    • 创建属性节点
     
var oAttr = document.createAttribute(“属性名”);(不常用)
    oAttr.value = "attr-name";
    oDiv.setAttributeNode(oAttr);
 
  • 创建文本节点
    • 对象.innerHTML = "";
   
var oText = document.createTextNode(“文本”);  // 文本中的HTML标签实体化
    oDiv.appendChild(oText);
 
  • 追加到页面当中
    • 父对象.appendChild(newNode)  // 插入到父对象最后。
      • 父对象.insertBefore(newNode, existsNode)   // 插入到什么对象之前。
    • 修改(替换)节点
      • 父对象.replaceChild(newNode,existsNode);  // 前面的替换后面的
    • 删除节点
      • 父对象.removeChild(oldNode);
    注:如果确定要删除节点,最好也清空内存  对象=null;
(详情参考最新完整留言板);
  • 表格操作
    • 获取元素,修改元素,删除元素,添加元素
      • 获取元素:
        • 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的更多相关文章

  1. js BOM DOM

    BOM对象 BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关的动作. 简而言之就是使 JavaScript ...

  2. JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}

    前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...

  3. js的DOM对象

    1.js的Array对象           ** 创建数组(三种)                          - var arr1 = [1,2,3];                    ...

  4. JS的DOM操作及动画

    JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...

  5. BOM&DOM

    BOM(浏览器对象模型) 1. location相关 . location.href 获取当前url . location.href="http://www.sogo.com" 跳 ...

  6. BOM DOM jQuery

    . BOM . location相关 . location.href . location.href="http://www.sogo.com" . location.reload ...

  7. 原生js 操作dom

    1.一些常用的方法 obj.getElementById() 返回带有指定 ID 的元素. obj.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节 ...

  8. JavaScript BOM DOM 对象

    title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...

  9. python学习笔记十三 JS,Dom(进阶篇)

    JS介绍 JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用:JavaScript 是因特网上最流 ...

随机推荐

  1. java springboot整合zookeeper入门教程(增删改查)

    java springboot整合zookeeper增删改查入门教程 zookeeper的安装与集群搭建参考:https://www.cnblogs.com/zwcry/p/10272506.html ...

  2. hadoop10---消息队列

    java消息队列 BlockingQueue也是java.util.concurrent下的主要用来控制线程同步的工具.锁也是用来控制线程同步的,释放锁的时候谁拿到了锁是没有预测的,所以谁拿到了锁是不 ...

  3. python3:利用smtplib库和smtp.qq.com邮件服务器发送邮件

    python3:利用smtplib库和smtp.qq.com邮件服务器发送邮件 使用qq的邮件服务器需要注意的两个地方主要是: 1.协议问题 使用465端口 SSL 协议 2.口令问题 出现SMTPA ...

  4. 14.python模块之subprocess

    我们几乎可以在任何操作系统上通过命令行指令与操作系统进行交互,比如Linux平台下的shell.那么我们如何通过Python来完成这些命令行指令的执行呢?另外,我们应该知道的是命令行指令的执行通常有两 ...

  5. javascript-电话薄小功能

    上代码: <style> *{ margin:0 ; padding: 0;} .phrase_wrap, .phrase_list{ width: 200px; height: 200p ...

  6. spring security使用hibernate进行查询数据库验证

    前面查询数据库采用的都是jdbc方式,如果系统使用的是hibernate,该如何进行呢,下面就是实现步骤,关键还是实现自定义的UserDetailsService 项目结构如下: 使用hibernat ...

  7. 5分钟理解Centos7防火墙firewalld

    版权声明:本内容为原创内容,转载请声明出处. 原文地址:http://www.excelib.com/article/287/show firewalld简介 Centos7中默认将原来的防火墙ipt ...

  8. vs2013 浏览器 browserlink 不停访问

  9. Python基础笔记系列六:字典

    本系列教程供个人学习笔记使用,如果您要浏览可能需要其它编程语言基础(如C语言),why?因为我写得烂啊,只有我自己看得懂!! 字典字典的元素是由一对对键值对组成,每一对之间用逗号隔开,将所有的键值对用 ...

  10. 因磁盘爆满而导致NameNode HA无法启动

    场景回顾: 测试集群节点分配:35,36是namenode且开启HA,37,38,39即作为datanode,又作为journalnode. 某时间 38节点磁盘爆满,集群中hdfs及依赖的服务全部宕 ...