• 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. Python Tornado框架(ioloop对象分析)

    网上都说nginx和lighthttpd是高性能web服务器,而tornado也是著名的高抗负载应用,它们间有什么相似处呢?上节提到的ioloop对象是如何循环的呢?往下看. 首先关于TCP服务器的开 ...

  2. Python 字符串连接问题归结

    一.概述 Python 字符串连接场景较为普遍.由于编者对 Java 等语言较为熟悉,常常将两者语法混淆. 加之,Python 语法较为灵活.例如,单单实现字符串连接,就有数种方法.在此,一并归结! ...

  3. Android MVP Presenter 中引发的空指针异常

    一.概述 最近对 googlesamples/android-architecture 中的 MVP-dagger 进行了学习.对照项目的 MVP-dagger 分支,对 MVP-dagger 进行了 ...

  4. HDOJ_1087_Super Jumping! Jumping! Jumping! 【DP】

    HDOJ_1087_Super Jumping! Jumping! Jumping! [DP] Time Limit: 2000/1000 MS (Java/Others) Memory Limit: ...

  5. iOS 多线程安全 与可变数组

    完全来自于iOS 多线程安全与可变字典 的学习 基本相同,举一反三 直接上样例代码 是我参照网上,根据当前业务需求改的. 其实好多人在这里喜欢用类别处理.我个人觉得用类别 极其容易和普通方法混淆,所以 ...

  6. springboot-vue项目后台2---pojo对查询结果手动分组

    <resultMap id="PResult" type="packs" > <result column="device_type ...

  7. [USACO08DEC]在农场万圣节Trick or Treat on the Farm

    题目描述 Every year in Wisconsin the cows celebrate the USA autumn holiday of Halloween by dressing up i ...

  8. PAT1054. The Dominant Color (20)

    #include <iostream> #include <map> using namespace std; int n,m; map<int,int> imgM ...

  9. java可变参数列表的实现

    参数就是我们调用一个方法时需要传入得数据,在方法中可能需要参数协助处理数据或者对参数进行解析处理以达到我们希望得到的数据和结果. 平常我们在写一个方法时,我们能确定需要传入什么样的参数以及参数的个数, ...

  10. Pandas基本功能

    到目前为止,我们了解了三种Pandas数据结构以及如何创建它们.接下来将主要关注数据帧(DataFrame)对象,因为它在实时数据处理中非常重要,并且还讨论其他数据结构. 系列基本功能 编号 属性或方 ...