DOM对象和window对象

 


本文内容:

  • DOM对象
  • Window 对象

 

首发日期:2018-05-11


DOM对象:

  • DOM对象主要指代网页内的标签【包括整个网页】
    • 比如:document代表整个 HTML 文档,用来访问页面中的所有标签。
    • 比如:form代表 <form> 元素

 

这里主要介绍使用document来查找标签和操作标签:

 

查找标签:

  • 根据id查找标签:getElementById()
  • 根据Name属性查找标签(多个):getElementsByName()
  • 根据标签名查找标签(多个):getElementsByTagName()
  • 根据class属性查找标签(多个):getElementsByClassName()

 

操作标签:

结点操作:

  • 创建新的标签节点document.createElement('标签名');image
  • appendChild(x):给标签增加孩子标签,x可以是html格式的,也可以是一个结点变量。image
  • 删除结点:removeChild(x)image
  • 获取第一个孩子结点:firstChildimage【注意:注释、回车等都算结点。】
  • 获取最后一个孩子结点:lastChild
  • 获取所有孩子结点:childNodes
  • 获取前一个兄弟结点:previousSiblings
  • 获取下一个兄弟结点:nextSiblingsimage
  • 获取父结点:parentNode

 

属性和样式操作:

  • 修改样式:style.样式=值image【对于名字长的,名字后面那个单词要大写,比如backgroundColor】
  • 修改属性:setAttribute(属性名,属性值)image
  • 获取属性:getAttribute(属性名)image
  • 删除属性:removeAttribute(属性名)image

 

 

文本操作:

  • 获取或修改标签内的html内容:innerHTMLimage
  • 修改内部的文本内容:image

 

 


Window 对象:

  • Window 对象表示浏览器窗口
  • Window 对象一般与浏览器窗口的操作相关,比如提示框,提示框也是非网页内容。
  • 但凡是涉及浏览器的,都通过window对象来操作。

 

 

location位置对象:

  • 常用属性:
    • 获取当前网页的地址:href
  • 常用方法:
    • 刷新网页:reload
    • 加载新网页:assign(url)

 

定时器设置:

  • 设置一次性定时器setTimeout(执行代码,毫秒数)
  • 设置重复运行的定时器setInterval(执行代码,间隔毫秒数)
  • 清除一次性定时器:clearTimeout(定时器名)
  • 清除重复运行的定时器:clearInterval(定时器名)

 

 

对话框设置:

  • 弹出一个提示框:alert(提示内容)image
  • 弹出一个询问框(有确认和取消按钮):confirm(提示内容)image
  • 弹出一个输入框:prompt(提示内容),会把输入的内容返回image
<input id='i1' type="button" value="点击" onclick="alert('提示内容')">
<input id='i2' type="button" value="点击2" onclick="confirm('提示内容')">
<input id='i3' type="button" value="点击3" onclick="prompt('提示内容')">

 

窗口控制:

  • 页面滚动指定长度:ScrollBy(水平偏移量[,垂直偏移量])

 

 


觉得我写的可以的,希望能留下你的 评论,你的留言能够鼓励我继续为大家分享自己的知识 人无完人,我可能在写博文的过程中迷糊了,如果觉得我有地方写的不当,也请 指正 欢迎转载,但请保留原文地址
posted @ 2018-05-11 16:20  随风行云  阅读(2269)  评论(0编辑  收藏  举报