前端知识之BOM和DOM
前端基础之BOM和DOM
-
windw对象
- 指浏览器窗口，所有的浏览器都支持window对象
- 常用的window方法
- window.innerHeight 浏览器窗口的内部高度
- window.innerWidth 浏览器窗口的内部宽度
- window.open() 打开新窗口
- window.close() 关闭当前窗口
-
window的子对象 了解
-
navigator对象。screen对象，history对象
-
location对象
- window.location 对象用于获取当亲页面的地址（URL），并把浏览器重定向到新的页面
- 常用属性和方法
- location.href 获取URL（页面地址）
- location.href="URL" 跳转到指定页面
- location.reload() 重新加载页面
-
计时器相关
-
通过使用JavaScript，可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行，我们称之为计时事件
-
语法
-
var t=setTimeout("JS语句",毫秒) -
// 在指定时间之后执行一次相应函数 var timer = setTimeout(function(){alert(123);}, 3000) // 取消setTimeout设置 clearTimeout(timer); -
每隔多少时间做某件事
- setInterval(函数,毫秒数)
- clearIntercal(对应序号)
-
-
-
-
DOM
-
定义：是一套对文档的内容进行抽象和概念化的方法
-
查找标签
-
直接查找
-
document.getElementById 根据ID获取一个标签 document.getElementsByClassName 根据class属性获取 document.getElementsByTagName 根据标签名获取标签合集
-
-
间接查找
-
parentElement 父节点标签元素 children 所有子标签 firstElementChild 第一个子标签元素 lastElementChild 最后一个子标签元素 nextElementSibling 下一个兄弟标签元素 previousElementSibling 上一个兄弟标签元素
-
-
-
节点操作
-
创建节点
-
语法：createElement（标签名）
-
var divEle = document.createElement("div");
-
-
添加节点
-
语法
-
追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)；
把增加的节点放到某个节点的前边。
somenode.insertBefore(newnode,某个节点);
-
-
var imgEle=document.createElement("img"); imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg"); var d1Ele = document.getElementById("d1"); d1Ele.appendChild(imgEle);
-
-
删除节点
- 获得要删除的元素，通过父元素调用该方法删除
- somenode.removeChild(要删除的节点)
-
替换节点
- 语法
- somenode.replaceChild(newnode,某个节点);
-
属性节点
-
获取文本节点的值
-
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="..."
-
-
-
-
获取值操作
-
语法
- 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);
-
-
class的操作
-
className 获取所有样式类名(字符串) classList.remove(cls) 删除指定类 classList.add(cls) 添加类 classList.contains(cls) 存在返回true，否则返回false classList.toggle(cls) 存在就删除，否则添加
-
-
指定css操作
-
对于没有中横线的css属性一般直接使用style.属性名即可。
-
obj.style.margin obj.style.width obj.style.left obj.style.position -
对含有中横线的css属性，将中横线后面的第一个字母换成大写即可
-
obj.style.marginTop obj.style.borderLeftWidth obj.style.zIndex obj.style.fontFamily
-
-
-
-
事件
-
事件的绑定方式
-
在标签中写属性的方式绑定
-
<div id="d1" onclick="changeColor(this);">点我</div> <script> function changeColor(ths) { ths.style.backgroundColor="green"; } </script>
-
-
通过js代码绑定
-
<div id="d2">点我</div> <script> var divEle2 = document.getElementById("d2"); divEle2.onclick=function () { this.innerText="呵呵"; } </script>
-
-
-
何时绑定事件：文档加载完成之后在绑定
- window.onload = function(){}
- 把绑定事件的代码写到body标签最下面的script中
-
常用事件
-
onclick
-
onfocus
-
onblur
-
onchange
-
onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 // 练习：输入框 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onselect 在文本框中的文本被选中时发生。 onsubmit 确认按钮被点击，使用的对象是form。 -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>搜索框示例</title> </head> <body> <input id="d1" type="text" value="请输入关键字" onblur="blur()" onfocus="focus()"> <script> function focus(){ var inputEle=document.getElementById("d1"); if (inputEle.value==="请输入关键字"){ inputEle.value=""; } } function blur(){ var inputEle=document.getElementById("d1"); var val=inputEle.value; if(!val.trim()){ inputEle.value="请输入关键字"; } } </script> </body> </html>
-
-
-
