zoukankan      html  css  js  c++  java
  • JavaScript DOM&BOM

    1.DOM含义

    D: Document 文档 一份文档就是一棵节点树,每个节点都是一个对象
    O:Object 对象
    JavaScript语言里对象可以分为三种类型:
    (1)用户定义的对象(user-defined object) 有程序员自己创建的对象
    (2)内建对象(native object) 内建在JavaScript语言里的对象,如Array、Math、Date等
    (3)宿主对象(host object) 由浏览器提供的对象,如 window对象
    M: 模型,文档的表现形式。
    2.DOM操作节点方法

    (1)getElementById(id)

    这个方法返回一个对象,这个对象对应着document对象里一个独一无二的元素。

    (2)getElementsByTagName(tag);

    getElementsByTagName方法会返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素。参数tag就是文档的标签,比如body、ul、ui等标签。

    (3)getElementsByClassName(class);

    HTML5 DOM中新增的一个方法。这个方法能够通过class属性来访问元素。该方法返回的也是数组。 

    如果你想输入多个className可以用空格隔开。

    (5)childNodes获取节点下的所有类型的子元素,该属性返回一个数组

    文档里的节点不止元素节点、文本节点,属性节点三个类型的节点。文档里几乎每一样东西都是一个节点。甚至连空格和换行都会被解释为节点,而他们也会全部包含在childNodes属性返回的数组当中。
    上面我们通过getElementsByTagName(““)也可以获取某个节点下子元素, 注意getElementsByTagName(““)返回的不仅仅是直接子节点,如果子节点包含了节点,也会计算在内的。
    虽然childNodes返回所有类型的节点,我们可以通过nodeType获取节点的类型,但是该属性只返回整形。

    (6)nodeType 节点的类型
    元素节点的nodeType属性值是1.
    属性节点的nodeType属性值是2.
    文本节点的nodeType属性值是3.
    也就这是三个节点有使用价值。

    (7)nodeValue 属性返回文本节点的值。
    比如要获取<p id="xxx">我是标签p里的值</p>里面的文本的值,其实这里包含了两个节点,一个元素节点p和里面的文本节点,可以通过下面方式获取里面的文本:

    document.getElementById("xxx").childNodes[0].nodeValue; //document.getElementById("xxx").firstNode.nodeValue;
    nodeValue除了可以获取文本节点的值,还可以修改文本节点的值,如:
    p1.firstChild.nodeValue = "通过nodeValue设置新的值"

    (8)firstChild 和 lastChild 获取节点数组中首尾节点
    var e = document.getElementById(“xxx”);
    e.firstChild 相当于 e.childNodes[0]
    e.lastChild 相当于 e.childNodes[e.childNodes.length-1]

    BOM操作的常用属性和方法

     

    open():打开一个新的页面,格式为open(页面的url,打开的方式),如果url为空则打开一个空白页面。如果打开方式为空,默认为新窗口方式打开。这个方法返回新窗口的window对象。

    close():关闭一个页面,但是这个方法有点兼容性问题,firefox默认无法关闭,chrome默认直接关闭,ie:询问用户。

    navigator.userAgent:返回浏览器的名称和版本。

    location:浏览器地址信息,本身不是字符串,是object格式。

    location:就是url地址本身。

    location.search:url中?后面的内容。

    location.hash:url中#后面的内容。

    窗口尺寸与大小
    可视区的尺寸:document.documentElement.clientWidth和document.documentElement.clientHeight。

    滚动条滚动的距离:document.documentElement.scrollTop和document.documentElement.scrollLeft。在chrome浏览器中要使用document.body.scrollTop和document.body.scrollLeft。

    元素内容的宽高:div.scrollHeight和div.scrollWidth。

    文档的宽高:document.documentElement.offsetHeight和document.documentElement.offsetWidth。也可以使用document.body.offsetHeight和document.body.offsetWidth。

    事件
    onscroll:当滚动条滚动的时候触发。

    onresize:当浏览器尺寸改变的时候触发。

    onfocus:当元素获取焦点时触发。

    onblur:当元素失去焦点时触发。

    focus():给元素设置焦点。

    blur():让元素失去焦点。

    select():选择指定元素里面的文本内容。只能选择用户可以输入的内容。

    onmousemove:鼠标在一个元素上移动时触发。

    onkeydown:当键盘按键按下的时候触发。能够响应用户输入的元素才支持键盘事件,和焦点事件一样。如果按下不抬起来会连续触发。

    onkeyup:当键盘按键抬起时触发。

    oncontextmenu:当右键菜单显示出来时触发。

    event事件对象:当一个事件发生时,这个对象发生的这个事件有关的一些详细的信息都会临时保存到event对象中,以便在需要时使用。

  • 相关阅读:
    JavaScript的性能优化:加载和执行
    JS获取图片的原始尺寸
    深入理解js构造函数
    Revit二次开发 获取缩略图
    WPF listbox分页
    WPF ListBox 图片显示及分页
    Revit禁用RibbonPanel
    C# excel 单元格居中
    WPF TreeView
    WPF ListView绑定数据
  • 原文地址:https://www.cnblogs.com/zl1234/p/9852292.html
Copyright © 2011-2022 走看看