前端--javaScript之BOM和DOM
bom和dom概述
bom(browser object model):是指浏览器对象模型,它使js有能力和浏览器进行"对话".
dom(document object model):是指文档对象模型,通过它,可以访问html文档的所有元素.
bom:
window对象是客户端js最高层对象之一,由于window对象是其他大部分对象的共同祖先,在调用window对象的方法和属性时,可以省略window对象的引用.例如window.document.write()可以简写成:document.write().
一.window对象
所有浏览器都支持window对象.它表示浏览器窗口.
*如果文档包含框架（frame 或 iframe 标签），浏览器会为 html 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
*没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。
所有js全局对象.函数以及变量均自动成为window对象的成员.
全局变量是window对象的属性.全局函数是window对象的方法.
一些常用的window方法:
- window.innerheight------浏览器窗口的内部高度
- window.innerwidth------浏览器窗口的内部宽度
- window.open()------打开新窗口
- window.close()------关闭当前窗口
二.navigator对象(了解)
浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含浏览器信息.
navigator.appname //web浏览器全称 navigator.appversion //web浏览器厂商和版本的详细字符串 navigator.useragent //客户端绝大部分信息 navigator.platform //浏览器运行所在的操作系统
三.screen对象(了解)
屏幕对象,不常用.
一些属性:
screen.availwidth------可用的屏幕宽度
screen.availheight------可用的屏幕高度
四.history对象(了解)
window.history 对象包含浏览器的历史.
浏览器历史对象,包含了用户对当前页面的浏览历史,但我们无法查看具体地址,可以简单的用来前进或后退一个页面
history.forward() //前进一页 history.back() //后退一页
五.location对象
window.location对象用于获得当前页面的地址(url),并把浏览器定向到新的页面.
常用属性和方法:
location.href //获取url location.href = "url" //跳转到指定页面 location.reload() //重新加载页面
六.弹出框
可以在js中创建三种消息框:警告框,确认框,提示框
1.警告框
警告框经常用于确保用户可以得到某些信息.
当警告框出现后,用户需要点击确定按钮才能继续进行操作.
语法:
alert("你看到了么?");
2.确认框(了解)
确认框用于使用户可以验证或者接受某些信息.
当确认框出现后,用户需要点击确认或者取消按钮才能继续进行操作.
如果用户点击确认,name返回值为true,如果点击取消,name返回值为false.
语法:
confirm("你确定么?")
3.提示框(了解)
提示框经常用于提示用户在进入页面输入某个值.
当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵
如果用户点击确认,那么返回值为输入的值,如果用户点击取消,那么返回值为null.
语法:
prompt("请在下方输入:","你的答案")
七.计时相关
通过使用js,我们可以在一定时间间隔之后来执行代码,而不是在函数调用后立即执行.我们称之为计时事件.
1.settimeout()
var t = settimeout("js语句","毫秒")
settimeout()方法会返回某个值,在上面的语句中,值被储存在名为t的变量中.
2.cleartimeout():清除计时
语法:
//在指定时间之后执行函数
var t = settimeout(function(){alert(123);},3000)
//取消settimeout
cleartimeout(t)
3.setinterval()
setinterval()方法可按照指定的周期(以毫秒计)来调用或计算表达式.
setinterval()方法会不停的调用函数,直到clearinterval()被调用或者窗口被关闭.
语法:
setinterval("js语句","时间间隔")
4.clearinterval()
clearinterval()方法可取消有setinterval()设置的timeout.
clearinterval()方法的参数必须是由setinterval()返回的id值.
语法:
clearinterval(setinterval返回的id值)
dom
一.什么是html dom
html document object model (文档对象类型)
html dom 定义了访问和操作html文档的标准方法
html dom 把html 文档呈现为带有元素,属性和文本的树结构(节点树)
二.dom树
dom树是为了展示文档中各个对象之间的关系用于对象的导航.
三.dom节点
1.节点类型
html 文档中的每一个成分都是节点.
dom是这样规定的:
- 文档节点(document对象)：代表整个文档
- 元素节点(element 对象)：代表一个元素（标签）
- 文本节点(text对象)：代表元素（标签）中的文本
- 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
- 注释是注释节点(comment对象)
javascript 可以通过dom创建动态的 html：
- javascript 能够改变页面中的所有 html 元素
- javascript 能够改变页面中的所有 html 属性
- javascript 能够改变页面中的所有 css 样式
- javascript 能够对页面中的所有事件做出反应
document和attribute节点是重点
2.节点关系
四.查找标签
1.直接查找
document.getelementbyid 根据id获取一个标签 document.getelementsbyclassname 根据class属性获取 document.getelementsbytagname 根据标签名获取标签集合
2.间接查找
parentelement 父节点标签元素 children 所有子标签 firstelementchild 第一个子标签元素 lastelementchild 最后一个子标签元素 nextelementsibling 下一个兄弟标签元素 previouselementsibling 上一个星弟标签元素
五.节点操作
1.创建节点
语法:
createlement(标签名)
示例:
var divele = document.createelement("div");
2.添加节点
语法 :
追加一个子节点(作为最后的子节点)
父标签.appendchild(新标签)
把增加的节点放在某个节点的前边
父标签.insertbefore(新标签,子标签)
3.删除节点
语法:
获得要删除的元素,通过父元素调用删除.
父标签.removechild(要删除的节点)
4.替换节点
语法:
父标签.replacechild(新标签,旧标签)
5.属性节点
获取文本节点的值:
var divele = document.getelementbyid("d1")
divele.innertext
divele.innerhtml
设置文本节点的值:
var divele = document.getelementbyid("d1")
divele.innertext = "1"
divele.innerhtml = "<p>2</p>"
attribute操作
var divele = document.getelementbyid("d1");
divele.setattribute("age","18")
divele.getattribute("age")
divele.removeattribute("age")
// 自带的属性还可以直接.属性名来获取和设置
imgele.src
imgele.src="..."
6.获取值操作
语法:
elementnode.value
适用于以下标签:
.input
.select
.textarea
var iele = document.getelementbyid("i1");
console.log(iele.value);
var sele = document.getelementbyid("s1");
console.log(sele.value);
var tele = document.getelementbyid("t1");
console.log(tele.value);
7.class的操作
classname 获取所有样式类名(字符串) classlist.remove(cls) 删除指定类 classlist.add(cls) 添加类 classlist.contains(cls) 存在返回true，否则返回false classlist.toggle(cls) 存在就删除，否则添加
8.指定css操作
obj.style.backgroundcolor="red"
js操作css属性的规律:
1.对于没有中横线的css属性一般直接使用style,属性名即可.如:
obj.style.margin obj.style.width obj.style.left obj.style.position
2.对于含有中横线的css属性,将中横线后面的第一个字母换成大写即可.如:
obj.style.margintop obj.style.borderleftwidth obj.style.zindex obj.style.fontfamily
六.事件
1.事件类型:
onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 练习：输入框 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onmouseleave 鼠标从元素离开 onselect 文本被选中。 onsubmit 确认按钮被点击
2.绑定事件的方式:
方式一
<!--绑定事件的方式一-->
<div onclick="foo(this)">div</div>
<div class="c1">div2</div>
<script>
function foo(self) {
console.log(self); //<div onclick="foo(this)" style="color: red;">
self.style.color = 'red';
}
方式二
//方式二
// 事件的绑定方式2：标签对象.on事件 = function (){}
var ele=document.getelementsbyclassname("c1")[0];
ele.onclick=function () {
console.log(this); // this 代指： 当前触发时间的标签对象；
this.style.fontsize="30px"
};