【前端】JavaScript学习第二次

一、DOM

1、获取元素

a、通过ID名

 document.getElementById('');

b、通过标签名

document.getElementsByTagName('');

c、通过父元素获取子元素

Element.getElementsByTagName('');

通过标签名获取
var ol = document.getElementsByTagName(‘ol’);
console.log(ol[0].getElementsByTagName(‘li’));

通过给父元素加id获取
var ol = document.getElementsById(‘ol’);
console.log(ol.getElementsByTagName(‘li’));

d、用class获取

document.getElementsByClassName('');

e、返回第一个元素对象

document.querySelector('选择器');

f、返回所有指定选择器

document.querySelectorAll('选择器');

g、获取body和html元素

 var bodyEle = document.body;
 var htmlEle = document.documentElement;

2、事件

a、组成

1. 事件源（被触发响应的对象）
2. 事件类型（如何触发，什么事件）
3. 事件处理程序（对应的操作，一般通过函数赋值）

b、执行事件步骤

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采用函数赋值形式）

c 、鼠标事件

3、操作元素

a、改变元素内容

1. element.innerText

除去html标签，空格，换行

2. element.innerHTML

识别html标签，保留换行等

两者有区别，text不识别html标签，而html识别

b、表单元素修改内容

如改变input的value值

禁用按钮
btn.disabled = true；

c、修改样式属性

one.style.backgroundColor = 'green';//修改样式，改后为行内样式，权重高

this.className = 'change';//改变类名，会覆盖

this.className = 'first change';//不会覆盖

d、排他思想

干掉所有人，留下我自己

e、获取，设置，移除元素属性

//获取
	element.属性；
    element.getAttribute('');

//设置
	element.属性 = ‘值’；
    element.setAttribute('属性'，‘值’);

//删除
   element.removeAttribute('属性');

4、节点操作

a、父级节点

son.parentNode，获取最近的父亲

b、子节点

    	parent.childNodes;//获得父元素的所有子节点（包括文本，元素等）
    	
        parent.children;//只得到子元素的元素节点
        
        parent.firstChild;//第一个子节点
        
        parent.lastChild;//最后一个（文本，元素）
        
        parent.firstElementChild;//只含有元素
        
        parent.lastElementChild;//
        
        parent.children[0];//伪数组返回方式

c、兄弟节点

		.nextSibling;//下一个兄弟元素
		
        .previousSibling;//上一个（包括文本，元素）
        
        .nextElementSibling;//
        
        .previousElementSibling;//（仅含有元素）

d、创建、添加、删除、复制节点

		//动态创建节点
		document.createElement('标签名');

		//添加节点
		node.appendChild(child);//添加到指定父节点的末尾
		
        node.insertBefore(child,指定元素);//添加到指定父节点的前端

	//删除节点
	parent.removeChild(child);

	//复制节点
	parent.cloneNode();
	//（）中值为false，或空，浅拷贝，不复制内容；（）中为true，深复制，复制了内容
	

5、注册，删除事件

		//注册事件
		div.attachEvent('',function() {

        })
        
        div.addEventListener('',function name() {
            
        }，use)

		//删除事件
 		div.removeEventListener('',function name() {
            
        })
        div.detachEvent('',function() {

        })

6、DOM事件流

a、捕获阶段
b、当前目标阶段

1. js只可执行捕获或冒泡其中一个阶段
2. onclick和attachEvent只可得到冒泡阶段
3. addEventListener第三个参数若为true，为捕获阶段调用函数，否则为冒泡阶段调用。
   document-html-body-father-son

7、事件对象

div.onclick = function(event) {
            
        }

event是一个事件对象，当形参

e.target和this区别：前者返回触发事件的对象，后者返回绑定事件对象。

常见鼠标事件

其中，有几个特殊的事件

contextmenu //阻止右键菜单

selectstart //禁止选中文字

8、键盘事件

还有keyCode，返回ascii码

二、BOM

1、window对象

a、页面加载事件

		window.onload = function() {

        };//多个会冲突
        window.addEventListener('load',function() {
            
        })//不会冲突

b、调整窗口大小事件

window.oversize = function () {
            
        }

window.innerWidth 指窗口框大小

2、定时器

a、setTimeout（调用的函数，【延迟的ms数】）

不能重复，只能一次

b、clearTimeout(定时器名字)

清楚计时器

c、setInterval（函数，【ms数】）

用法与上个基本同，但此计时器可以反复调用

d、clearInterval(‘计时器名’)

清除计时器

3、js执行机制

单线程

异步可以同事处理多个

4、location对象

a、常用属性

location.search//返回参数

location.url//返回整个地址

b、常用方法

		location.assign('');//可跳转页面
		
        location.replace('');//替换当前页面，但不记录历史，不可后退
        
        location.reload('');//重新加载页面

5、navigator对象

可通过userAgent属性判断用户使用的客户端

6、history对象

常用属性

		history.back();//可后退
        history.forward();//可前进
        history.go(参数);//可前进，1，可后退，-1.