2017年10月19日
学习笔记与总结
1.定时器
设定的时间点,去触发一个事件
定时器的分类:
1:一次定时器
2:循环定时器*/
一次性定时器:setTimeout()
特点:只执行一次
setTimeout()有两个参数
参数1:你要执行的函数名称或者是代码块
参数2:延迟时间 单位是毫秒
setTimeout(showHello,3000);
此处函数体后不应加括号,否则浏览器在阅读时立刻执行
参数1的第二种类型:
setTimeout(function () {
alert("Hello");
},3000);
循环定时器 setInterval()
特点:根据制定的延迟时间,循环执行
setInterval(showHello,3000)
一次性定时器的返回值
*/
var
timeID1
=
setTimeout
(
showHello
,
3000
);
console
.
log
(
timeID1
);
/*
先执行定时器再赋值
*/
var
timeID2
=
setInterval
(
showHello
,
3000
);
console
.
log
(
timeID2
);
/*
返回值为分配好的顺序数
*/
function
clean1
() {
clearTimeout
(
timeID1
);
}
function
clean2
() {
clearInterval
(
timeID2
);
}
2.DOM入门
当script标签写在头部时
文档就绪函数:当文档加载完毕,才会触发对应事件
window.onload = function () {
alert(document.getElementById("btn").innerHTML);
}
DOM:文档对象模型 Document Object Model
浏览器通过渲染html文件生成一个层次分明的DOM树
js可以通过这种层级关系对你任意一个Dom节点进行操作
操作方法分类:
1:Core Dom:这套方法具有通用性,可以作用于xml、html等具有结构性的文档
2:XML Dom:专门用来操作Xml文档
3:HTML Dom:专门用来操作HTML文档
通过id选择器:返回的结果只会是一个,
如果有同名的ID的元素,只会按顺序返回第一个
如果没有同名ID的元素存在,返回一个空对象Null
3.获取元素
方法返回的结果是数组类型
数组里包括所有name属性匹配的元素
getElementByName()
getElementsByTagName():通过标签名
getElementByName(): 通过name属性
getElementByClassName(): 通过class名
获取元素节点时,一定要注意:获取节点的语句,必须在 DOM 渲染完成之后执行。2种方式实现:
①将 JS 代码写在 body 之后
②将代码写到window.onload 函数之中
返回到的是数组格式,不能直接添加各种属性,而应该取出数组的每一个单独操作
例如: getElementByName("name1")[0].onclick = function
4.获取和修改元素属性
getAttribute()方法:获取元素的某一个属性。
var
src
=
img
.
getAttribute
(
"src"
);
setAttribute()方法:修改元素的属性,第一个参数为修改的属性,
第二个参数为修改后的属性值
img
.
setAttribute
(
"src"
,
"../../../img/cap.jpg"
);
setAttribute的弊端
1:通过setAttribute方法给元素添加的事件和样式属性在低版本的IE浏览器中无效
2:通过setAttribute方法添加事件和属性,书写比较繁琐!
5.用点符号法去修正setAttribute方法的弊端
//btn.setAttribute("onclick","showHello()");
//btn.setAttribute("style","color:red");
btn
.
onclick
=
showHello
;
btn
.
style
.
color
=
"red"
;
多个属性的定义可以通过更简单的方法进行优化。
优化的方法:
方法1:cssText 代码提示缺失 +=";样式"可以实现多个样式的追加
text
.
style
.
cssText
+=
";color:red;font-size:30px;font-style:italic"
方法2:可以给元素直接添加一个样式类 += " 类名称" 可以实现多个样式类同时存在
text
.
className
+=
" textStyle"
总结:
.cssText和.className方法都是以覆盖的形式进行样式的添加
在使用这两个方法的时候,需要注意以 += ";样式" 或者 +=" 样式类" 来进行追加
6.实现样式类或者样式ID的添加
function
change
() {
var
text
=
document
.
getElementById
(
"text"
);
var
cla
=
text
.
getAttribute
(
"class"
);
text
.
setAttribute
(
"class"
,
cla
+
" hhy2"
);
}
7.获取样式
获取行内样式
通过.style方法获取的都是元素的行内样式。非行内样式无法获取
text
.
style
.
color
=
"yellow"
;
有赋值操作,是对样式进行设置
text
.
style
.
color
=
"yellow"
;
没有赋值操作,是对样式进行获取
console
.
log
(
text
.
style
.
color
);
对文本进行修改
text
.
innerHTML
=
"hhy"
;
对文本进行获取
console
.
log
(
text
.
innerHTML
);
获取行内及非行内样式
window.getComputedStyle:w3c标准提供的方法,
凡是符合w3c标准的浏览器都可以通过它来获取样式
element.currentStyle:非W3C类型的浏览器获取样式的方法。
通过相关的属性对浏览器类型进行判断,如果BOM对象存在这个属性说明
是W3C类型的浏览器,
否则默认为低版本IE浏览器
console
.
log
(
text
.
innerHTML
);
获取整个文本结构
console
.
log
(
text
.
innerText
);
只是获取文本
8.查找节点
通过父元素去查找子元素:
空格和换行默认也是一个元素
console
.
log
(
ul
.
firstChild
);
只会找元素节点,忽略空格和换行
console
.
log
(
ul
.
firstElementChild
);
console
.
log
(
ul
.
lastElementChild
);
通过子元素去查找父元素
var
li2
=
document
.
getElementById
(
"li2"
);
console
.
log
(
li2
.
parentNode
);
通过父元素查找所有子元素
返回所有的节点和空格及换行
console
.
log
(
ul
.
childNodes
);
只返回所有节点
console
.
log
(
ul
.
children
);
返回整个文档
console
.
log
(
ul
.
ownerDocument
);
返回前一个同级节点
console
.
log
(
li2
.
previousSibling
);
console
.
log
(
li2
.
previousElementSibling
);
返回后一个同级节点
console
.
log
(
li2
.
nextSibling
);
console
.
log
(
li2
.
nextElementSibling
);
9.创建和克隆节点
creatElement:创建一个全新的标签,不包含任何的内容和属性。
var
text2
=
document
.
createElement
(
"p"
);
以下操作为在标签内添加内容
text2
.
innerHTML
=
""
;
cloneNode():复制一个元素,复制整个元素的全部信息
cloneNode(布尔值):ture:完全复制这个标签,flase:复制标签,不包含内部内容
var
text1
=
document
.
getElementById
(
"text1"
);
var
text3
=
text1
.
cloneNode
(
true
);
10.追加和插入节点。移除和替换节点。删除和替换节点
appendChild:在元素最末尾和追加方式插入节点
var
div
=
document
.
getElementById
(
"div"
);
div
.
appendChild
(
text3
);
insertBefore:在一个元素之前插入一个新的元素。
两个参数:
参数1:你要新增的元素
参数2:在哪个元素之前插入
div
.
insertBefore
(
text2
,
text1
);
removeChild:移除一个子元素
var
text
=
document
.
getElementById
(
"text"
);
document
.
body
.
removeChild
(
text
);
replaceChild:替换一个子元素
var
crt
=
document
.
createElement
(
"p"
);
crt
.
innerHTML
=
"JR"
;
document
.
body
.
replaceChild
(
crt
,
text
);
removeChild():删除一个节点
document
.
body
.
removeChild
(
img1
);
replaceChild( , ):替换一个节点 被替换的节点在前,替换的节点在后
var
img2
=
document
.
createElement
(
"img"
);
img2
.
src
=
"../../../img/ship.jpg"
;
document
.
body
.
replaceChild
(
img2
,
img1
);