JavaScript学习打卡
JavaScript学习笔记—第二天
JavaScript笔记 第二天
一.DOM编程【重点】
1. 概念 ---- document object model 文档对象模型
1) html是标记语言文档,解析技术一般有两种 DOM SAX
-
DOM:浏览器会将整个文档加载进内存,将文档封装成一棵“文档树”,文档里的
所有标签都被封装成“标签对象”,成为这棵树上的一个节点(Element–标
签 , node – 文本) -
DOM里的两个重要对象:
document对象 — 代表整个文档(特指body部分,浏览器里地址栏以下,状态
栏以上的部分)
window对象 — 代表整个浏览器窗口,document是window的一部分(属性),
在使用window的属性和函数时,window可以省略。 -
作用:可以通过dom提供的api获取文档中的标签对象,进而修改其属性或者样式,
达到添加动画效果的目的 。
2. DOM提供的API — 获取标签的api
1)根据标签的id属性值获取标签对象 【重点】
Var tag = document.getElementById(“id属性值”);
2)根据标签名获取标签对象
Var tags = document.getElementsByTagName(“ 标签名 ”);
Var tags = 父标签.getElementsByTagName(“标签吗”); //获取父标签里的。。。。。
3)根据标签的name属性获取标签对象
Var tags = document.getElementsByName(“标签的name属性值”);
---- 通常只有form标签里的元素会有name属性
4)根据标签的显示风格名获取标签对象
Var tags = document.getElementsByClassName(“标签的class属性值”);
5)可以通过修改属性和样式添加动画效果
获取属性值 ----- var value = 标签对象.属性名
设置属性值 ----- 标签对象.属性名 = 值 ;
设置样式 ---- 标签.style.css样式 = 值;
h1.style.color=”red” h1.style.backgroundColor=”blue”
设置一种风格 ---- 标签.className = “class样式值”;
3. Dom里的常见属性
1)innerHTML : 为标签设置标签体里的内容
2)this :代表当前产生事件的标签对象
4. 处理下拉列表的常见属性
1)下拉列表一般使用的是onchange事件
2)options — 值为数组类型,表示获取下拉列表里的所有option选项
3)selectedIndex — 值为数字类型,表示下拉列表里被选中的option的下标
4)清空下拉列表 — select.options.length=0;
5) 向下拉列表里添加一个option选项
创建一个option对象 : var op = new Option(text,value);
添加到select里 : select.options[下标] = op;
5. 从网页中删除标签
1)需要通过父标签对象删除子标签对象
parentTag.removeChild( 子标签对象 );
2)对表格进行js处理时,主要针对的是tbody标签,不是table.
3)标签对象的一组相关关系属性:
tag.parentNode ----> 获取当前标签的父标签对象
tag.childNodes -----> 获取当前标签对象的所有孩子节点(标签和文本)
tag.firstChild -----> 第一个孩子节点
tag.lastChild -------> 最后一个孩子
tag.nextSibling -----> 当前标签对象的同级下一个标签(“弟弟”)
tag.previousSibling ----> 当前标签对象的同级上一个标签(“哥哥”)
注意:js存在浏览器差异,google浏览器会默认将标签间的空格也算作孩子节点
4)删除的辅助功能
var ba = window.confirm(“提示文字”);
— 方法返回boolean值,表示对话框里的选择(确认–true 取消–false)
6. 向网页中添加标签
1)产生一个新的标签
var element = document.createElement(“标签名”);
例如:
hehehe
var h1 = document.createElement(“h1”);
h1.innerHTML = “hehehe”;
- 向网页里添加新建的标签
I. parentTag.appendChild( 新标签 ); // 将新标签添加到父标签的最后面
II. parentTag.insertBefore(新标签,旧标签); //将新标签添加到旧标签前
III. parentTag.replaceChild(新标签,旧标签); //用新标签替换指定的旧标签
二.BOM
1. 概念 — browser object model 浏览器对象模型
一组与浏览器相关的内置对象和函数。Window对象
2. 与window对象相关的函数和属性
1)打开和关闭浏览器窗口 open() close()
var w = window.open( url ) ; 新建一个新的浏览器窗口,并在窗口里显示url指定
的资源,返回值w代表新打开的浏览器窗口对象
Window.close(); 关闭当前窗口
2)window提供的各种对话框
I. Alert() ---- 警告框
II. var ba = window.confirm(提示文字); ----- 确认框
III. 提示输入框: var str = window.prompt(“提示文字”);
3)定时器
I. 单次定时器
var id = window.setTimeout( fun , time ); time的单位是毫秒
在time毫秒后执行一次fun函数
Window.clearTimeout(id); ----> 清除定时器
II. 周期定时器
var id = window.setInterval( fun , time ) ; 每隔time毫秒执行一次fun函数
Window.clearInterval( id );
4)window的location属性
Location的href属性 —> 在js代码中向其他资源跳转(类似于html里的超链接)
5)window的history属性
History.back()
History.forward()
History.go(num) — num为负数表示后退 num为正数表示前进 num为0刷新
三.重构代码
1. 网页中的事件处理
1)标签式事件处理
<标签名 οnclick=”js代码或者函数”>
2)编程式事件处理