DOM基础
DOM: DOCUMENT OBJECT MODEL(文档对象模型)的缩写。
DOM查找方法–获取元素的方法
- document.getElementById() – 根据id获取唯一的一个元素;
- document.getElementsByTagName() – 返回所有的tag标签引用的集合 – 返回的是数组;
- document.getElementsByName() – 返回所有的name属性引用的集合 – 返回的是数组;
- document.getElementsByClassName() – 返回包含带有指定类名的所有元素的集合 – 返回的是数组;
设置元素的样式
语法:ele.style.stylName = styleValue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p class="p1" id="p1">元素获取</p>
</body>
<script type="text/javascript">
var ele1 = document.getElementById("p1");
// 设置元素的样式
// ele.style.stylName = styleValue
// styleName表示要设置的样式名称 -- 使用驼峰命名方式 -- 比如fontSize
// styleValue -- 要设置的样式的值
ele1.style.color="red";
console.log(ele1);
</script>
</html>
innerHTML
innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
语法:ele.innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p id="p1"><b>元素</b></p>
</body>
<script type="text/javascript">
var ele = document.getElementById("p1");
// ele.innerHTML
// 返回ele元素开始和结束标签之间的HTML
console.log(ele.innerHTML);//显示的是<b>元素</b>
// ele.innerHTML=" ";
// 设置ele元素开始和结束之前的HTML内容为html
ele.innerHTML="添加";
console.log(ele);//原来p标签内的"元素"变为"添加""
</script>
</html>
className
语法:ele.classname
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p class="p1" id="p1">adad</p>
</body>
<script type="text/javascript">
var ele = document.getElementById("p1");
// ele.className返回ele元素的class属性
console.log(ele.className);//显示的是p1
// 设置ele元素的class属性为..
ele.className="p2";
console.log(ele.className);//显示的是p2
</script>
</html>
设置DOM元素属性或添加属性
获取属性
语法:ele.getAttribute("attribute ")
设置属性
ele.setAttribute(“attribute”,value)
删除属性
ele.removeAttribute(“attribute”)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p class="p1" id="p1" style="color:red;">元素</p>
</body>
<script type="text/javascript">
var ele = document.getElementById("p1");
// ele.getAttribute("attribute")获取ele元素的属性
// ele -- 要操作的DOM对象
// attribute -- 是要获取的html属性(id type class)
// console.log(ele.getAttribute('class'));//显示的是p1
// console.log(ele.getAttribute('style'));//显示的是color:red;
// setAttribute(attribute,value)更改某个属性的属性值
// ele.setAttribute("class","p2");
// console.log(ele.getAttribute('class'));//显示的是p2
// removeAttribute(attribute)删除某个属性
ele.removeAttribute("class");
console.log(ele);//显示的是<p id="p1" style="color:red;">元素</p>
</script>
</html>
DOM事件
HTML事件
HTML 事件是发生在 HTML 元素上的“事情”。
当在 HTML 页面中使用 JavaScript 时,JavaScript 能够“应对”这些事件。
语法:<tag 事件=“执行脚本”>;
功能:在html元素上绑定事件;
说明:执行脚本可以是一个函数的调用;
DOM0级事件
通过DOM获取HTML元素。
语法:ele.事件 = 脚本;
功能:在DOM对象上绑定事件;
说明:执行脚本可以是一个匿名函数,也可以是一个函数的调用;
关于this的指向
JavaScript this 关键词指的是它所属的对象。
它拥有不同的值,具体取决于它的使用位置:
- 在方法中,this 指的是所有者对象。
- 单独的情况下,this 指的是全局对象。
- 在函数中,this 指的是全局对象。
- 在函数中,严格模式下,this 是 undefined。
- 在事件中,this 指的是接收事件的元素。
鼠标事件
- onload – 页面加载时触发
- onclick – 鼠标点击时触发
- onmouseover – 鼠标滑过时触发
- onmouseout – 鼠标离开时触发
- onfoucs – 获得焦点时触发 – input标签type为text password / textarea标签
- onblur – 失去焦点时触发
- onchange – 域的内容发生改变时触发 – 一般作用在select、chaecbox、radio
- onsubmit事件 – 表单中的确认按钮被点击时发生 – 不是加在按钮上而是表单上
- onmousedown – 鼠标按钮在元素上按下时触发
- onmouseup – 在元素上松开鼠标按钮时触发 – 2和3成就了onclick事件
- onmousemove – 在鼠标指针移动时触发
- onresize – 当调整浏览器窗口大小时触发
- onscroll – 拖动滚动条滚动时触发
键盘事件
- onkeydown – 在用户按下一个键盘按键时触发
- onkeypress – 在按下键盘按键时发生(只会响应字母和数字符号)
- onkeyup – 在键盘按键松开时发生
- keycode:返回onkeypress onkeydown 或者onkeyup事件触发的键的值得字符代码,或者键的代码
BOM基础
BOM:(browser object model) – 浏览器对象模型。
window是浏览器的一个实例
- 是通过JavaScript访问浏览器窗口的一个接口;
- 又是ecmascript规定的global对象 – 全局对象;
window对象的方法
- window.alert();
- window.confirm(“message”);
a. 点击确定,返回true
b. 点击取消,返回false - window.prompt()
- window.open()
- window.close()
- location对象 – window对象的属性,也是document对象的属性
• window.location.href 返回当前页面的 href (URL);
• window.location.hostname 返回 web 主机的域名;
• window.location.pathname 返回当前页面的路径或文件名;
• window.location.protocol 返回使用的 web 协议(http: 或 https:);
• window.location.assign 加载新文档; - history.back() – history.go(-1) – 回退
- history.forward() – history.go(1) – 前进