zoukankan      html  css  js  c++  java
  • 【JavaScript】Bom对象和Dom对象

    BOM:Browser Object Model(浏览器对象模型)

    就是在JS代码中可以直接使用的对象,但是对象都是和浏览器有关的

    Example:

    <script>
    window.close();
    </script>
     

    (1)Window:对象表示浏览器中打开的窗口 最顶层对象(******)


    window的方法都可以省略window

    常用:

    alert();   :弹出一个提示框.

    confirm(); :弹出一个确认框

    prompt();  :输入框

    setTimeout();定时 执行一次就ok了

    setInterval();定时 循环执行

    clearTimeout();清除定时

    clearInterval();清除定时

    open():打开一个新窗口

    close():窗口关闭了.

    (2)Navigator :浏览器对象(获取浏览器=客户机的信息)
    常用:

    navigator.appName  浏览器的名

    (3)Screen: 屏幕对象
    常用:

    width

    height

    (4)History:浏览器历史对象
    常用:

    - 到访问的上一个页面
    history.back();
    history.go(-1);

    - 到访问的下一个页面
    history.forward();
    history.go(1);

    (5)Location:地址对象
    常用:

    location.href  url地址(可以获取 或 设置)

     
    Dom:document object model: 文档对象模型
    对象都是和文档相关的(html / xml)

    Dom首先对HTML的解析过程:

    解析完就得到一个

    代表整个HTML文档的①document对象

    而这些可以单独存在的标签(html / body / head / title / span)就叫做②标签对象(element对象)

    而属性对象(id)和文本对象(文本)因为不能单独存在,还是要依赖标签对象,所以就没有给它们专门的对象

    而不管element对象还是属性对象还是文本对象都是节点

    所以③Node节点对象是这些对象的父对象

    这个对象的用途:当标签对象、属性对象、文本对象找不到要的方法的时候,就去它们的父类Node节点对象去找(同java)

    ** Document常用方法
    (1)write()方法:
    向页面输出变量(值)

    向页面输出html代码

    var str = "abc";
    document.write(str);
    document.write("<hr/>");
         

    (2)getElementById();
    通过id得到元素(标签)
    使用getElementById得到input标签
            

    (3)getElementsByName();
    通过标签的name的属性值得到标签
    返回的是一个集合(数组)          

    (4)getElementsByTagName("标签名称");
    通过标签名称得到元素
              

     
     
    ** Element常用方法
    (1)getAttribute(“属性的名”);  
    获得属性的值

    element.id 和 element.getAttribute("id")作用相同-->一般这么用方便,但是对于某些关键字(class)就用不了了

    (2)setAttribute(“属性名”,”属性值”);
    添加和修改

    (3)removeAttribute(“属性名”);
    移除属性

    不能删除value属性

    (4)在标签下查找标签
    在标签下查找标签 只有getElementsByTagName(); 是唯一有效的方法

    childNodes:获得所有的子节点.不是所有的浏览器都兼容(有些会把空格和换行也当做节点)

     
     
    ** Node常用方法
    Node包括以下三种节点

    元素节点(element)

    nodeName:标签名  

    nodeType: 1 

    nodeValue:没有 null

    属性节点(element.getAttributeNode("属性名"))

    nodeName: 属性名  

    nodeType: 2  

    nodeValue:属性的值

    文本节点(element.firstChild)

    nodeName: #text  

    nodeType: 3   

    nodeValue:文本内容

    PS:这里的父节点、子节点只针对元素(标签)操作,属性是另外来取的

    比如在此html中<span id="spanid">haha</span>

    var span = document.getElementById("spanid");

    alert(span.firstChild.nodeValue);

    就会得到haha

    所以firstChild指的是代表text

  • 相关阅读:
    Qt编程之qrc文件的链接
    Visual Studio中的lib的链接顺序
    c++语言中的遍历
    转载:使用 OpenCV 识别 QRCode
    GreenOpenPaint的实现(四)放大缩小处理滚动事件
    GreenOpenPaint的实现(六)图片的保存和打开
    GreenOpenPaint的实现(五)矩形框
    GreenOpenPaint的实现(三)添加标尺
    GreenOpenPaint的实现(二)打开显示图片
    GreenOpenPaint的实现(一)基本框架
  • 原文地址:https://www.cnblogs.com/onesea/p/13157793.html
Copyright © 2011-2022 走看看