• JavaScript的DOM操作


    JavaScript的DOM操作

    DOM的基本概念
    DOM是文档对象模型,这种模型为树型模型;文档是指标签文档;对象是指文档中每个元素;模型是指抽象化的东西。
    Windows 对象操作
    属性和方法
    属性(值或者子对象)
    Opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null。
    dialogArgument:对话框返回值;
    子对象:history,location,document, status, menubar, toolbar等。
    方法(函数):事件(事先设置好的程序,被触发)。
    Window.open(“第一部分”,”第二部分”,”第三部分”,”第四部分”)
    Window.open的特征参数:
    第一部分:写页面地址;
    第二部分:_blank //打开的方式,_blank在新窗口打开,_self在自身窗口打开。
    第三部分:控制打开的窗口格式,可以写多个,用空格隔开,如下
    Toolbar = no; 新打开的窗口无工具条。
    menubar = no; 无菜单栏
    status = no; 无状态栏
    100; heigth:100; 宽度、高度
    left = 100; 打开的窗口离左边多少距离
    resizable = no; 窗口大小不可调
    scrollbars = yes; 出现滚动条
    location = yes; 有地址栏

    Window.open也有返回值,它的返回值是新打开的窗口对象,例如
    最简单的打开窗口:window.open(“Untitled-6html”);
    打开一个窗口并保存在变量中:var w = window.open();
    可以将打开的多个窗口保存在数组w里:
    Function openw()
    {
    w[i++]=window.open();
    }
    4、window.close(); 关闭当前窗口

    w.close(); 关闭保存在变量w中的那个窗口

    关闭多个子窗口,先将打开的窗口存入数组内,利用循环将其挨个关闭。

    Window.opener.close(); 关闭打开当前窗口的源窗口

    5、间隔与延迟
    Window.setInterval(“要执行的代码”,间隔的毫秒数)
    Window.clearInterval(间隔的ID); 清除间隔执行,循环一次之后用来清除间隔执行的代码;
    Window.SetTimeout(“要执行的代码”,延迟的毫秒数); 延迟一段时间执行某一段代码(函数);
    Window.clearTimeout(延迟的ID);清除延迟;
    Window.setTimeout(延迟的ID);清除

    6、调整页面
    Window.navigate(“url”) 跳转至目标页面,在谷歌浏览器下有bug;
    Window.moveTo(x,y) 移动页面至某一位置,位置由x,y决定;
    Window.resizeTo(宽,高) 调整页面的宽度和高度
    Window.scrollTo(x,y) 滚动页面至哪里,y代表纵向滚动。

    7、模态对话框和非模态对话框
    模态对话框(Modal Dialogue Box),是指在用户想要对对话框以外的应用程序进行操作时,必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭,它和非模态对话框都是永远置顶的,它们的区别在于当对话框打开时,是否允许用户进行其他对象的操作。

    打开模态对话:Window.showModalDialog(“url”,”向目标对话框传的值”,”窗口特征参数”);
    特征参数:用分号隔开,像素大小用px。dialogHeight, dialogWidth, center.
    打开非模态对话框:window.showModallessDialog(“url”,”向目标对话框传的值”,”窗口特征参数”)

    Var a = window.dialogArgument; 可以用一个参数获取模态或非模态对话框传递的值。

    windows.history对象
    window.history.back(); 页面进行后退
    window.history.forward(); 页面前进
    window.history.go(n;) n如果是正数则代表前进n表页面;n如果是负数则代表后退n表页面,一般常用这一种。

    window.location 对象
    location 地址栏
    var s= window.location.href; 获取当前页面的地址
    window.location.href=http://www.baidu.com; 修改页面地址,会跳转页面
    window.location.hostname:主机名,域名,网址名;可用变量接受。
    Window.location.pathname:路径名;可用变量接收

    window.status对象
    status 状态栏,可以给状态栏添加要显示的文字
    window.status=”要在状态栏显示的内容”;设置状态栏文字,例如:
    function s()
    {
    Window.status = “向前走,就这么走”;
    }

    window.document 对象
    找到元素
    document.getElementById(“id”); 根据id找,最多找到一个
    var a = document.getElementById(“id”); 将找到的元素放在变量中
    document.getElementByName(“name”; ) 根据name找,找出来的是数组
    document.getElementByTagName(“name”; ) 根据标签名找,找出来的是数组
    document.getElementByClassName(“name”; ) 根据classname找,找出来的是数组

    操作内容
    非表单元素:
    获取内容
    Alert(a.innerHTML); 标签里的html代码和文字豆获取了,如:
    body中有这么一个div:
    <div id=”me”><b>试试吧</b></div>
    在script中用innerHTML获取div中的内容:
    Var a=document.getElementById(“me”;
    Alert(a.innerHTM);
    Alert(a.innerText); 只取里面的文字
    Alert(a.outHTML); 包括标签本身的内容(简单了解就行)
    设置内容
    innerHTML = “<font color= red>hello world</font>
    如果用设置内容代码结果如下,div中的内容被替换了;”

    innerText 会将赋的东西原样呈现
    清空内容,赋值个空字符串。
    表单元素
    获取内容,有两种获取方式:
    Var t = document.fl.tl; form表单ID为fl里面的ID为tl的input.
    Var t = document.getElementById(“id”); 直接用id获取。

    Alert(t.value); 获取input中的value值;
    Alert(t.innerHTML); 获取<textarea>这里的值</textarea>;

    2)设置内容:t.value=”内容改变”。

    小知识点
    <a href=www.baidu.comonclick =”return flase”>转向百度</a>;j加了return flase则不会跳转,默认是return true会跳转。按钮也一样,如果按钮中设置return flase则不会提交,利用这个可以对提交跳转进行控制。
    操作属性
    首先利用元素的ID 找到该元素,存于一个变量中:
    Var a = document.getElementById(“id”);
    然后可以对该元素的属性进行操作:
    a.setAtrribute(“属性名”,”属性值”); 设置一个属性,添加或更改都可以;
    a.getAtrribute(“属性名”); 获取属性的值;
    a.removeAttribute(“属性名”);移除一个属性。
    ④操作样式
    首先利用元素的ID钟爱到该元素,存于一个变量中:
    Var a = document.get.ElementById(“id”);
    然后可以对该元素的属性进行操作:
    a.style.样式=””; 操作此ID样式的属性;
    样式为CSS中的样式,所有的样式都可以用代码进行操作。

  • 相关阅读:
    行转列(FOR XML PATH)
    非聚集索引的注意事项
    避免JS全局变量冲突
    如何做个好员工?
    SQL Server 执行计划中的扫描方式举例说明
    SqlServer with递归查询的使用
    Excel插件类库的设计思路
    使用log4javascript记录日志
    布局
    Image控件的简单使用示例1
  • 原文地址:https://www.cnblogs.com/wells33373/p/5905898.html
Copyright © 2020-2023  润新知