zoukankan      html  css  js  c++  java
  • JSDom

    什么是Dom?

    1.简介 

            文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,计有VBScript、ActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

            DOM(文档对象模型)是HTML和XML的应用程序接口(API)。DOM将把整个页面规划成由节点层级构成的文档。

            所谓文档对象模型,其实就是对网页HTML中的各种元素的一种内部的表示,例如HTML中的头、段落、列表、风格、ID等,所有的元素都能通过DOM来访问 。

            JavaScript最终是要操作Html页面,让Html变成DHtml,而操作Html页面就要用到DOM。DOM就是把Html页面模拟成一个对象,如果JavaScript只是执行一些计算、循环等操作,而不能操作Html也就失去了它存在的意义。

            DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象,就可以读取文本框中的值、设置文本框中的值。

     

    2.图解 

    clipboard

    关于window

    整个页面或者说窗口就是一个window对象---------------window是顶级对象

    页面中定义的变量和方法都是window的

    window.id

    document.getElementById()

    使用window对象的属性、方法的时候可以省略window。

    比如:

    window.alert(‘hello');

    可以省略成alert(‘hello');

    window.document可以直接写document

    能不写window就不要写,这样可以减少js文件的字节数。


    window.alert(‘大家好!’);//弹出警告对话框

    window.confirm(‘确定要删除吗?’);//确定、取消对话框,返回true或false;

    window.navigate(url);//将网页重新导航到url,支持IE、Opera11.6。并不推荐,有些浏览器不行,

    建议使用window.location.href=‘url’;//支持大多数浏览器

    动态操作DOM元素

    1.获取DOM

    getElementById(), (非常常用),根据元素的Id获得对象,网页中id不能重复。也可以直接通过元素的id来引用元素,但是有有效范围、

    getElementsByName(),根据元素的name获得对象,由于页面中元素的name可以重复,比如多个RadioButton的name一样,因此getElementsByName返回值是对象数组。

    getElementsByTagName(),获得指定标签名称的元素数组,比如getElementsByTagName(“input”)可以获得所有的<input>标签。*表示所有标签

    2.添加、移除、替换 

    document.write只能在页面加载过程中才能动态创建。

    可以调用document的createElement方法来创建具有指定标签的DOM对象,然后通过调用某个元素的appendChild();方法将新创建元素添加到相应的元素下。//父元素对象.removeChild(子元素对象);删除元素。

    createElement(‘element’);创建一个节点

    appendChild(node); 追加一个节点

    removeChild(node);移除一个节点

    replaceChild(new,old);替换一个节点

    insertBefore(new,参照);把节点加到前面(插到某个节点前面)

    方法:

    属性:

    firstChild

    lastChild

    3.用innerHTML还是createElement()、appendChild()与removeChild()?

    操作页面的元素的时候是用innerHTML的方式还是createElement()、appendChild()与removeChild()的方式?

    1.对于大量进行节点操作时,使用innerHTML的方式性能要好于频繁的Dom操作(有专门用C或C++写的html解析器。)。先将页面的HTML代码写好,然后调用一次innerHTML,而不要反复调用innerHTML.

    2.对于使用innerHTML=‘’的方式来删除节点,在某些情况下会存在内存问题。比如:div下面有很多其他元素,每个元素都绑定有事件处理程序。此时,innerHTML只是把当前元素从节点树上移除了,但是那些事件处理程序依然占用内存。


    js操作样式

    修改元素的样式是className属性。

    (class是JavaScript的一个保留字,属性不能用关键字、保留字所以就变成className了)网页开关灯的效果。

    修改元素的样式不能this.style="background-color:Red"。

    单独修改样式的属性使用“style.属性名”。注意在css中属性名在JavaScript中操作的时候属性名可能不一样,主要集中在那些属性名中含有-的属性,因为JavaScript中-是不能做属性、类名的。

    操作float样式的时候

    IE:obj.style.styleFloat=‘right’;

    其他浏览器:obj.style.cssFloat=‘right’;

    Form对象

    常用:click(),focus(),blur();//相当于通过程序来触发元素的单击、获得焦点以及失去焦点的事件。

    form对象是表单的Dom对象。

    方法:submit()提交表单,但是不会触发onsubmit事件。

    实现autopost,也就是焦点离开控件以后页面立即提交,而不是只有提交submit按钮以后才提交,当光标离开的时候触发onblur事件,在onblur中调用form的submit方法。

    在点击submit后form的onsubmit事件被触发,在onsubmit中可以进行数据校验,如果数据有问题,返回false即可取消提交




  • 相关阅读:
    Ubuntu adb devices :???????????? no permissions (verify udev rules) 解决方法
    ubuntu 关闭显示器的命令
    ubuntu android studio kvm
    ubuntu 14.04版本更改文件夹背景色为草绿色
    ubuntu 创建桌面快捷方式
    Ubuntu 如何更改用户密码
    ubuntu 14.04 返回到经典桌面方法
    ubuntu 信使(iptux) 创建桌面快捷方式
    Eclipse failed to get the required ADT version number from the sdk
    Eclipse '<>' operator is not allowed for source level below 1.7
  • 原文地址:https://www.cnblogs.com/mcad/p/4305643.html
Copyright © 2011-2022 走看看