zoukankan      html  css  js  c++  java
  • Javascript Step by Step

    DOM 操作

    DOM是面向HTML和XML文档的API,为文档提供了结构化表示。在DOM中一切都是节点Node,文档就是由许多的Node组成的。文档里的每个节点都有属性 nodeName、nodeValue 和nodeType。Node接口定义了所有节点类型都包含的特性和方法。

    特性/方法 类型/返回类型 说明
    nodeName String 节点的名字;根据节点的类型而定义
    nodeValue String 节点的值;根据节点的类型而定义
    nodeType Number 节点的类型常量值之一
    ownerDocument Document 指向这个节点所属的文档
    firstChild Node 指向在childNodes列表中的第一个节点
    lastChild Node 指向在childNodes列表中的最后一个节点
    childNodes NodeList 所有子节点的列表
    previousSibling Node 指向前一个兄弟节点;如果这个节点就是第一个兄弟节点,那么改值为null
    nextSibling Node 指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点,那么改值为null
    hasChildNodes() Boolean 当childNodes包含一个或多个节点时,返回真
    attributes NamedNodeMap 包含了代表一个元素的特性的Attr对象;仅用于Element节点
    appendChild(node) Node 将node添加到childNodes的末尾
    removeChild(node) Node 从childNodes中删除node
    replaceChild(newnode,oldnode) Node 将childNodes中的oldnode替换成newnode
    insertBefore(newnode,refnode) Node 在childNodes中的refnode之前插入newnode

    访问指定节点:

    getElementsByTagName 返回一个包含tagname(如input)等于某个指定值的所有元素的NodeList
    getElementsByName 返回包含name等于某个特定值的所有元素组成的NodeList
    getElementById 返回id等于某个值的特定元素

    创建新的节点:

    createElement 创建元素节点
    createTextNode 创建文本节点
    appendChild 追加节点

    dom树的格式如下:

    Document对象

    document对象是Window对象的一部分,可通过window.document属性对其进行访问。

    document对象集合:

    all[] 提供对文档中所有 HTML 元素访问的数组
    anchors[] 对文档中所有 Anchor 对象引用的数组
    forms[] 对文档中所有 Form 对象引用的数组
    images[] 对文档中所有 Image 对象引用的数组
    links[] 对文档中所有 Area 和 Link 对象引用的数组

    document对象属性:

    cookie 设置或得到与当前文档有关的所有 cookie
    domain 得到当前文档的域名
    lastModified 得到文档被最后修改的日期和时间
    referrer 得到载入当前文档的 URL(前一个URL 地址)
    title 得到当前文档的标题
    URL 得到当前文档的 URL

    document对象方法:

    getElementById() 根据元素 id 得到元素(第一个)对象
    getElementsByName() 根据元素 name 得到元素对象的集合
    getElementsByTagName() 根据指定标签名得到元素对象的集合
    open() 打开一个数据流,以收集来自任何 document.write() 或 document.writeln() 方法的输出
    write() 向文档写 HTML 表达式 或 JavaScript 代码
    writeln() 等同于 write() 方法,不同的是在每个表达式之后写一个换行符
    close() 关闭用 document.open() 方法打开的输出流,并显示选定的数据

    document的body子对象

    document.body //指定文档主体的开始和结束,等价于<body>…/<body>
    document.body.bgColor //设置或获取对象后面的背景颜色
    document.body.link //未点击过的链接颜色
    document.body.alink //激活链接(焦点在此链接上)的颜色
    document.body.vlink //已点击过的链接颜色
    document.body.text //文本色
    document.body.innerText //设置<body>…/<body>之间的文本
    document.body.innerHTML //设置<body>…/<body>之间的HTML代码
    document.body.topMargin //页面上边距
    document.body.leftMargin //页面左边距
    document.body.rightMargin //页面右边距
    document.body.bottomMargin //页面下边距
    document.body.background //背景图片

    document的location子对象

    document.location.hash // #号后的部分
    document.location.host // 域名+端口号
    document.location.hostname // 域名
    document.location.href // 完整URL
    document.location.pathname // 目录部分
    document.location.port // 端口号
    document.location.protocol // 网络协议(http:)
    document.location.search // ?号后的部分

    BOM和DOM的区别

    DOM 描述了处理网页内容的方法和接口;

    BOM 描述了与浏览器进行交互的方法和接口。

    browser_objects

    观察BOM的体系结构,所有的对象都源自window对象,它表示整个浏览器窗口。window对象的函数有:

    窗体控制函数  moveBy(),moveTo(),resizeBy(),resizeTo()

    窗体滚动轴控制函数  scrollBy(),scrollTo()

    焦点控制函数  focus(),blur()

    新建窗体函数  open(),close(),opener

    对话框函数    alert(),confirm(),prompt()

    状态栏属性    status,defaultStatus

    时间间隔函数  setTimeout(),clearTimeout(),setInterval(),clearInterval()

  • 相关阅读:
    Falsk的模板分配和蓝图、定制错误信息、 和补充
    Flask配置文件和 路由系统
    初始Flask
    REST Framework组件的解析源码
    MdelForm 和formset
    待修改脚本
    时间打点脚本
    Move Over and Click Link
    Wait and Click Element
    Strings=newString(“xyz”);创建了几个 StringObject?
  • 原文地址:https://www.cnblogs.com/cubika/p/3182962.html
Copyright © 2011-2022 走看看