• JavaScript讲义(三)


    DOM:拥有用JS脚本动态修改HTML

    DOM模型
    ---------------------------------------------------------
    HTML文档只有一个根节点,其他都是子节点,最终形成一个结构化文档。DOM提供了访问结构化文档的一种方式,但DOM不是一种技术,它只是访问结构化文档的一种思想。基于这种思想,各种语言都有自己的DOM解析器。

    DOM模型和HTML文档
    ---------------------------------------------------------
    虽然JS不是一门纯粹的面向对象语言,但是DOM为常用HTML元素找到了一套完整的继承体系。
    HTML元素之间常见的包含关系。有些HTML元素之间可以互相嵌套,有些不可。

    访问HTML元素
    ---------------------------------------------------------
    两种方式:根据ID访问HTML元素(document.getElementById()),利用节点关系访问HTML元素(利用父子,兄弟关系来访问)

    访问表单控件
    访问列表框、下拉菜单的选项

    修改HTML元素
    ---------------------------------------------------------
    修改节点(内容,属性,CSS样式)。修改HTML元素通常通过修改如下几个常用属性:
    innerHTML: 如xx.innerHTML=document.getElementById("celVal").value;
    value:
    className:
    style:
    options[index]:

    增加HTML元素
    ---------------------------------------------------------
    两步:1)创建/复制节点;2)添加节点
    var a=document.createElement("divxxx");
    var ajax=ul.firstChild.nextSibling.cloneNode(false)
    ul.insertBefore(ajax,ul.firstChild);

    动态添加表格内容

    删除HTML元素
    ---------------------------------------------------------
    删除节点:removeChild

    传统DHTML模型
    ---------------------------------------------------------
    通过DOM不仅能访问和更新页面内容及结构,还能操纵文档的风格样式。在DOM出现前,JS采用传统DHTML模型访问和更新HTML页面。相比DHTML,DOM功能更强大,提供了对整个HTML文档的访问模型,其将文档转换为Tree结构,树上每个节点对应HTML元素。

    使用window对象
    ---------------------------------------------------------
    window对象是整个JS脚本运行的顶层对象。
    访问历史:history属性。
    访问页面URL:
    客户机屏幕信息:screen属性
    弹出新窗口:window.open()
    用定时器:
    navigator和地理位置:比如
    for(var propname in window.navigator)
    {
    window.navigator[propname];
    }
    HTML5新增的geolocation属性:getCurrentPosition,watchCurrentPosition

    使用document对象
    ---------------------------------------------------------
    document对象既是HTMLDocument类的一个实例,也是DHTML模型中的一个对象。

  • 相关阅读:
    linux 删除乱码文件
    snprintf用法
    面试时经常问到的非技术性问题
    vector查找元素
    new 和delete
    python安装
    UIPickerView详解
    设置文本框左边显示的View
    字符串的分割??
    VC++异常捕获??
  • 原文地址:https://www.cnblogs.com/jinji/p/6018020.html
Copyright © 2020-2023  润新知