学习笔记14

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 );