【无标题】

js预习二

一、DOM（文档对象类型）

1、dom基础

是W3C推荐处理可扩展标记语言的标准接口，通过接口可以改变网页的内容、结构和样式

2、获取元素

1、利用dom获取元素

1）根据id获取元素
document.getElementById （‘参数’）
例如

<div id="a">123</div>
<script>
    var time = document.getElementById('a');
</script>

注意
script标签在body下面
id参数大小写要区分
返回值是一个元素对象
console.dir打印可查看其属性和方法

2）根据标签名获取元素
document.getELementsByTagName （‘参数’）;
例如

第一种方法
<div>123</div>
    <script>
        var time = document.getElementsByTagName('li');
        console.log(time);
    </script> 
    第二种方法
 <ul>
        <li>234</li>
        <li>473</li>
    </ul>
    <script>
        var st = document.getElementsByTagName('ul')
        var time = st[0].getElementsByTagName('li');
        console.log(time);
    </script>  
也可以给父级元素设定一个ID，将st[0]换为id名 

注意
1、返回对象是获取过来的元素对象集合，以伪数组的方式储存
2、想要一次打印可以遍历数组
3、若页面只有一个元素，也返回伪数组，没有就返回undefined
4、获取某个父级元素内部所制定标签名的子元素，它的父元素必须是指明的那个对象的单个对象

3）document.getELementsByClassName（‘参数’）;
4）document.querySelector（‘参数’）;
5）document.querySelectorAll （‘元素选择器’）;

6）特殊元素
获取body元素 document.body;
获取HTML元素 document。getElement;

3、获取元素的属性值

1、获取方式
1）element.属性名
2）element.getAttribute（‘属性名’）

2、设置自定义属性方式
element.属性名 = ‘值’;
element.setAttribute（‘属性名’,‘值’）

3、移除自定义属性值
element .removeAttribute（‘属性名’）

4、节点操作

利用父子兄弟节点关系来获取元素逻辑性较强

1、用节点获取元素
父级节点
获取父级节点：node.parentNode

    <button>变换</button>
   <ul>
       <li>235</li>
       <li>2367</li>
   </ul>
    <script>
        var btn = document.querySelector('button');
        var li = document.querySelector('li');
        console.log(li.parentNode);
    </script>  

注意
获取的是离元素最近的父级节点，找不到返回空

子级节点
parentNode.childNodes
parentNode.children : 获取所有子元素节点
parentNode.firstChild : 获取第一个子节点
parentNode.lastChild ： 获取最后一个子节点（包括文本和元素节点）
parentNode.firstElementChild : 获取第一个元素节点
parentNode.lastElementChild : 获取最后的元素节点
父级元素.children[0] : 解决兼容性获取第一个子元素

创建节点：document.creatElement (‘tagName’)
创建：
var li = document.createElement (‘li’）；
添加：
在后面追加元素:
（父级节点）node.appendchild (child) （添加节点）
添加在指定父节点的子节点前:
node.insertBefore (child，指定元素)
例如

<ul></ul>
    <script>
        var li = document.createElement('li');
        var ul = document.getElementsByTagName('ul');
        ul.appendchild(li);
        ul.insertBefore(li,ul.children[0]);
    </script> 

删除节点
node.removechild （child）
删除父节点中的子节点

1、ul.removechild(li);
2、ul.removechild(li,ul.children[0]);

复制节点
node.cloneNode（）；
先获取元素，再复制，再放置位置

5、dom事件流

事件流描述的是从页面接收时间的顺序，事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

阶段分为：
1、捕获阶段
2、当前目标阶段
3、冒泡阶段

注意：JS代码执行只能执行捕获或冒泡中的一个onclick和attachEvent智能得到冒泡阶段第3个阶段为true则为捕获阶段，反之，为冒泡阶段

6、事件委托

不是每个子节点单独设置监听器，而是事件监听器设置在父节点上，再利用冒泡印象子节点

常用键盘触发：
onkeyup : 键盘谈起来触发
onkeydwn : 按下键盘触发
onkeypress:按下键盘触发（不能识别功能键）

二、BOM

独立于内容于浏览器串口进行交互，核心对象window

BOM的构成：

window是浏览器顶级对象
他是JS访问浏览器的窗口
全局作用域种的变量，函数变成window对象属性和方法

JS执行队列
js特点是单线程，同一事件只能做一件事

同步任务：同步任务都在主线程上执行，形成执行栈
异步任务：
1：普通事件：如：click，resize；
2：资源加载：load，error；
3：定时器：setInterval，setTimeOut；

执行机制
1、先执行执行栈中的同步任务；
2、异步任务（回调函数）放入任务队列中
3、下一个同步任务
4、一旦同步任务执行完，在任务队列种的异步任务放入执行栈，再执行；

1、location对象
window的location属性适用于设置窗口的ul,并可以解析URL，因为该属性返回一个对象

location.href ： 获取或设置URL
location.search：返回参数

2、navigator 对象

userAgent：该属性可返回由用户机发送服务器的user-agent头部的值

3、history对象

back（）：可退功能
forward（）：前进功能