js的dom操作
照例,先来几句没怎么又用的话,
DOM是Document Object Model的缩写,dom是文档对象模型,这种模型是树模型;文档指标签文档;对象是指文档中的每个元素,模型则是抽象话的东西。
说实话,dom不知道该在什么地方开始着手整理,下面这是基于讲义进行整理的
一 window.open
Window.open分为下面几个部分,
1 写页面地址
2 _back打开方式,是在新窗口还是在自身窗口
3 控制打开窗口格式,可以写多个用空格隔开,如下
toolbar=no 新打开窗口没有工具条
menubar=no 没有菜单栏 status=no 没有状态栏
width height 宽度高度
left=100 打开窗口距离左边的距离
resizable-no 窗口大小不可调
scrollbars=yes 出现滚动条
location=yes 有地址栏。
window.open也有返回值,他的返回值是新打开窗口对象,例如
打开窗口:window.open(“Untitled-6.html”)
把打开的窗口保存在变量中 var w=window.open()
如果打开的是多个窗口,则可以保存在数组中
function open w (){
w [i++]=window.open()
}
二window.close()是关闭窗口和window.open()相反
关闭多个子窗口可以先将打开的窗口存在数组中,用循环将他们挨个关闭。
关闭打开当前窗口的原窗口 window.opener.close()
三 延迟和间隔
间隔执行一段代码(函数)window.setInterval("要执行的代码",时间间隔毫秒数)
清除间隔执行 window.clearInterval(间隔的ID)
延迟一段时间执行某一段代码(函数):window.setTimeout("要执行的函数体",延迟的毫秒数)
清除延迟 window.clearTimeout(延迟的id),清除setTime
四 调整页面
window.navigate("url") 跳转至目标页面,在谷歌浏览器下有bug
window.moveTo(x,y)移动页面至某一位置(IE专用)
window.resizeTo(宽,高) ( IE专用)
window.scrollTo(x,y) 滚动页面至哪里,y表示纵向滚动
五 模态对话框和非模态对话框
模态对话框垄断了用户的输入。当一个模态对话框打开时,用户只能与该对话框进行交互,而其他用户界面对象收不到输入信息。模态对话框下,用户需要操作目标对话框就必 须先操作模态对话框。
打开模态对话框 window.showModalDialog("url",“向目标对话框传的值”,“窗口特征参数”) 特征属性分号隔开,像素用px。dialogHeight dialogWidth center等
非模态对话框则相反,当一个非模态对话框打开时,用户依然可以操作其他页面。
打开非模态对话框 window.showModelessDialog("url","向目标对话框传的值","窗口特征属性")
var a=window.dialogArgument,可以用一个参数来获取模态或非模态对话框传递的值
六 window对象
window.history对象
window.history.back; 页面进行后退
window.history.forward; 页面前进
window.history.go(n); n如果是正数代表前进n个页面,n如果是负数,则代表后退几个页面(比较常用这一种)
window.location对象
loction 地址栏
var a=window.location.href;获取当前页面的地址
window.location.href="http://www.bidu.com";修改页面地址,会跳转页面
window.location.hostname:主机名,域名,网站名,可用变量接收。
window.location.pathname:路径名,可用变量接收
window.status对象
status 状态栏,可以给状态栏添加要显示的文字
window.status="要在状态栏显示的内容";设置状态栏文字
七 Window.document
1 找到元素:
document.getElementById("id") 根据id找,最多找一个
document.getElementByName("name") 根据name找,找出来的是数组。
document.getElementByTagName("name") 根据标签名找,找出来的是数组
document.getElementByClassName("name")根据classname找,找出来的是数组
1.1 非表单元素
var a= document.getElementById("id")
a.innerHtml 标签里的html的代码和内容都会获取到
a.innerText 只取里面的文字
a.outHTML 包括标签本身的内容 (简单了解)
2)设置内容
a.innerHTML="<font color=red>你好</font>" div中的内容被替换掉
赋值个空字符串可以把内容清空。
1.2表单元素
1获取内容,有两种方式
var a=document.f1.t1 form表单ID为f1里面的ID为t1的input; 或者var a=document.getElementByID("id"),直接用id获取
a.value 获取input中的value值
2可以设置内容 a.value="内容改变"
3 一个小知识点,<a href="www.baidu.com" onclick="return flase">转向百度</a> 加了return flase则不会跳转,默认是return true会跳转,如果按钮中设置看return flase则网页不会跳转。。
1.3操作属性
首先利用元素的ID找到该元素 存于一个变量中
var a=document.getElementByID("id")
然后可以对该元素的属性进行操作
a.setAttribute("属性名","属性值");设置一个属性,添加或者更改都可以
a.getAttribute("属性名");获取属性值
a.removeAttribute("属性名");移除一个属性
1.4操作样式
首先利用元素的ID找到该元素 存于一个变量中
var a=document.getElementByID("id")
a.style.样式=“” 操作id的样式
1.5相关元素操作
var a= document.getElementById("id") 找到id
var b= a. nextSibling 找到a的下一个同辈元素 注意空格
var c = a. previousSibling 找到a的上一个同辈元素 注意空格
var d = a.parentNode 找到a的上一级父辈元素
var e= a.childNodes 找出来的是数组 找a的下一级子元素
var f= a.firstChild 第一个子元素 lastChild 最后一个 childNodes[n] 找到第几个
alert(nodes[i] instanceof Text)判断是不是文本 是返回TRUE 不是返回flase 用if判断他的值是不是flase 可以去除空格
1.6 元素的创建 添加和删除
var a=document.getElementById("id")找到id
var obj=document.createElement("标签名") 创建一个元素 obj.innerHTML="hello world" 添加的时候首先要创建出一个元素
a.appendChild(obj) 向a中添加一个子元素
a.moveChild(obj) 删除一个子元素
列表中a.selectIndex: 选中第几个 a.options[a.selectIndex] 按下标取出第几个option对象
1.7 字符串的操作
var a = new String() 或者 var a ="sssss"
var a ="hello"
a.toLowerCase 转小写 a.toUpperCase( ) 转大写
a.substring(2,3)从第二个位置截取到第三个位置
a.substr(2,3) 从第二个位置开始截取后边的三个长度。不写后边的数字就截取到最后
a.split('') 将字符按照指定字符拆开
a.lenght 是属性
a.indexOf("world") world在字符串中第一次出现的位置 没有就返回-1
a.lastIndexOf("o") o在字符串中最后一次出现的位置
1.8 时间操作
var a=new Date() 当前时间
var a = new Date(1999,3,2) 定义一个时间 1999,4,2 月份要加1
a.getFullYear: 取年份 a.getMonth 取月份 取出的月份少1 a.getDate()取天 a.getDay 取星期几 a.getHours 取小时 a.getMinutes() 取分钟 a.getSeconds()取秒
a.setFullYear 设置年份 设置月份的时候注意加1
1.9 数学函数操作
Math.cile() 大于当前小数的最小整数
Math.floor 小于当前小数的最大整数
Math.sqrt() 开平方
Math.round() 四舍五入
Math.random() 随机数 0-1 之间
小知识点
外面双引号 里面的双引号改为单引号
在div里面行高和整个外面高度一样才能用竖直居中 居中是行居中
文本框取出来的值是字符串 需要用 parseInt()转化成数字
a.match(reg) s代表字符串 reg代表一个字符串 两者进行匹配 如果两个字串不匹配 返回 null