码迷,mamicode.com
首页 > Windows程序 > 详细

DOM对象和window对象

时间:2018-05-11 17:19:12      阅读:1102      评论:0      收藏:0      [点我收藏+]

标签:返回   代码   blog   top   加载   attr   htm   cccccc   form   

 


本文内容:

  • DOM对象
  • Window 对象

 

首发日期:2018-05-11


DOM对象:

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

 

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

 

查找标签:

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

 

操作标签:

结点操作:

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

 

属性和样式操作:

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

 

 

文本操作:

  • 获取或修改标签内的html内容:innerHTML技术分享图片
  • 修改内部的文本内容:技术分享图片

 

 


Window 对象:

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

 

 

location位置对象:

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

 

定时器设置:

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

 

 

对话框设置:

  • 弹出一个提示框:alert(提示内容)技术分享图片
  • 弹出一个询问框(有确认和取消按钮):confirm(提示内容)技术分享图片
  • 弹出一个输入框:prompt(提示内容),会把输入的内容返回技术分享图片
<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(水平偏移量[,垂直偏移量])

 

 


DOM对象和window对象

标签:返回   代码   blog   top   加载   attr   htm   cccccc   form   

原文地址:https://www.cnblogs.com/progor/p/9025307.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!