码迷,mamicode.com
首页 > 其他好文 > 详细

BOM和DOM

时间:2016-05-08 23:56:55      阅读:368      评论:0      收藏:0      [点我收藏+]

标签:

BOM 浏览器对象模型

BOM中的对象

  Window对象:是指窗口对象,可通过Window对象的属性和方法控制窗口,例如打开或关闭一个窗口

  History对象:指历史页面,通过History对象的属性和方法实现前进后退的功能

  Location对象:指地址栏,通过属性的方法控制页面的跳转

  Document对象:指网页中的内容,通过属性和方法控制页面元素

1、Window对象的常用方法:

  open();  close();  alert();  prompt();  confim();  setTimeout();  setTimeout();  setInterval();  clearInterval();

2、History对象常用方法:

  window.history.back();页面进行后退;

  window.history.forward();页面前进;

  window.history.go(n); n如果是正数则代表前进n个页面,n如果是负数则代表后退n个页面,一般常用这一种。

3、Location对象常用方法:

  var s = window.location.href;获取当前页面的地址

  window.location.href="http://www.baidu.com";修改页面地址,会跳转页面

  window.location.hostname: 主机名,域名,网站名,可用变量接收

  window.location.pathname: 路径名,可用变量接收

4、Document对象常用方法:(重点)

    document.getElementById("id");根据id找,最多找到一个;

    document.getElementsByName("name");根据name找,返回数组

    document.getElementsByTagName("name");根据标签名找,例如<input>...返回数组

    write();打印内容

  4.1、常用操作:

      var a =document.getElementById("id");

     alert(a.innerText);只取里面的内容

     alert(a.outerHTML);包括标签本身的内容(简单了解)

     设置内容:a.innerHTML = "<font color=red >hello world </font>";

  4.2、操作属性      

     a.setAttribute("属性名","属性值"); 设置一个属性,添加或更改都可以;

     a.getAttribute("属性名");获取属性的值;

     a.removeAttribute("属性名");移除一个属性。

  4.3、操作样式

     document.body.style.backgroundColor="颜色"; 整个窗口的背景色

     a.className="样式表中的classname"

  4.4、相关元素操作

      var a = document.getElementById("id");找到a;

      var b = a.nextSibling,找a的下一个同辈元素,注意包含空格;

      var b = a.previousSibling,找a的上一个同辈元素,注意包含空格;

      var b = a.parentNode,找a的上一级父级元素;

      var b = a.childNodes,找出来的是数组,找a的下一级子元素;

      var b = a.firstChild,第一个子元素,lastChild最后一个,childNodes[n]找第几个;

      alert(nodes[i] instanceof Text); 判断是不是文本,是返回true,不是返回flase,用if判断它的值是不是false,可以去除空格。

  4.5、元素的创建、添加、删除

      var a = document.getElementById("id");找到a;

      var obj = document.createElement("标签名");创建一个元素

      obj.innerHTML = "hello world";添加的时候首先需要创建出一个元素。

      a.appendChild(obj);向a中添加一个子元素。

      a.removeChild(obj);删除一个子元素。

      列表中a.selectedIndex:选中的是第几个;

  4.6、字符串操作

      var s = new String(); 或var s ="aaaa";

      var s = "hello world";

      alert(s.toLowerCase());转小写 toUpperCase() 转大写

      alert(s.substring(3,8));从第三个位置截取到第八个位置

      alert(s.substr(3,8));从第三个位置开始截取,截取八个字符长度,不写后面的数字是截到最后.

      s.split(‘‘);将字符换按照指定的字符拆开,放入数组,自动排序

      s.length是属性

      s.indexOf("world");world在字符串中第一次出现的位置,没有返回-1

      s.lastIndexOf("o");o在字符串中最后一次出现的位置

  4.7、日期时间的操作

      var d = new Date();当前时间

      d.setFullYear(2015,11,6);/*在想要设置的月份上减1设置*/

      d.getFullYear:取年份;

       d.getMonth():取月份,取出来的少1;

      d.getDate():取天;

      d.getDay():取星期几

      d.getHours():取小时;

      d.getMinutes():取分钟;d.getSeconds():取秒

      d.setFullYear():设置年份,设置月份的时候注意-1。

  4.8、数学函数的操作

      Math.ceil();大于当前小数的最小整数

      Math.floor();小鱼当前小数的最大整数

      Math.sqrt();开平方

      Math.round();四舍五入

      Math.random();随机数,0-1之间



 

 

 

DOM 文档对象模型

  DOM是针对XML的基于树的API。描述了处理网页内容的方法和接口,是HTML和XML的API,DOM把整个页面规划成由节点层级构成的文档。

  DOM本身是与语言无关的API,它并不与Java,JavaScript或其他语言绑定。

特定语言的DOM

   针对XHTML和HTML的DOM。这个DOM定义了一个HTMLDocument和HTMLElement做为这种实现的基础。其他的包括SVG的DOM

BOM和DOM

标签:

原文地址:http://www.cnblogs.com/yongjiapei/p/5472038.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!