Web Apls的DOM

目录

Web Apls的DOM

（即接口，可以改变页面内容，结构，样式）

获取元素

HTML5新增（好用！）

事件基础

事件由三部分组成：

例子：

事件源：

事件类型：

事件 处理程序：

操作元素

操作元素-自定义

节点操作（一直要获取元素到位，不然容易出现问题。）

三要素：

DOM事件流（冒泡，委托鼠标事件，键盘事件）

---

Web Apls的DOM

（即接口，可以改变页面内容，结构，样式）

获取元素

getElementByID(id)

getElementsByTagName（）

getElementByID(id)

id是大小写敏感的字符串，代表了唯一的ID。

找到则返回对象，找不到则返回NULL。

<div id="time"></div>
    <script>
        var timer=document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        console.dir(timer);
    </script>

document.getElementsByClassName(’类名’)；

返回带有特定标签的集合。

• 如果页面中只有一个li那么返回的还是伪数组的形式。
• 如果页面中没有这个元素，它返回就是空伪数组。
• 我们可以指定父元素element.getElementsByTagName(’标签名’)；
• 注意：
• 父元素必须是单个对象（必须指明是哪个元素对象）。获取的时候不包括父元素自己。

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        // 返回过来的是，获取过来元素的集合
        // 以伪数组形式存储
        var lis=document.getElementsByTagName('li');
        console.dir(lis);
        console.log(lis);
        console.log(lis[4]);
        for (var i=0;i<lis.length;i++)
        console.log(lis[i]);
    </script>

HTML5新增（好用！）

document.querySelector(’选择器’)；

根据指定选择器返回第一个元素对象

注意：加符号，就是选择器的写法。

document.querySelectorAll(’选择器’)；

根据指定选择器所有对象集合返回。

Document.body

Document.documentElement;

找到则返回对象，找不到则返回NULL.

事件基础

事件由三部分组成：

事件源，事件类型，事件处理程序。（事件三要素）

例子：

点击一个按钮，弹出一个对话框。

事件源：

事件触发的对象：按钮；

事件类型：

事件类型（如何触发？什么事件？比如鼠标点击，还是鼠标经过还是键盘按下）：鼠标点击；

事件 处理程序：

通过一个函数赋值的方式完成。

操作元素

常用属性：

innertext | innerHTML | src | href | id | alt | title鼠标放置显示|

Type | value表单文字 | checked | selected | disabled按钮无法点击

Element.style行内 | element.className类名

排他算法，干掉所有人，剩下我直接。善用this。

案例：百度换肤，表格隔行变色，表单全选

操作元素-自定义

Element.属性||element.getAttribute(‘属性’)

Element.setSttribute(‘属性’)

Element.removeSttribute(‘属性’)

案例：tab栏切换。

H5自定义属性当中，默认用data-开头进行区别并且赋值

展示：

节点操作（一直要获取元素到位，不然容易出现问题。）

三要素：

nodeType（节点类型），nodeName（节点名称），nodeValue（节点值）。

例子：

node.parentNode|parentNode.childNodes(标准)

会全部获取，连代码之间的换行也会获取，当成孩子。

parentNode.children（非标准）

parentNode.firstChild第一个子节点（不论文本还是元素节点）

parent.firstElementChild第一个元素节点

伪数组写法：ol.children[0]

案例：下拉菜单。

node.nextSibling（）

node.nextElementSibling（）

创建节点document.createElement('tagName')

添加节点node.appendChild(child)

添加尾部：node.insertBefore(child,指定元素)

案例：留言板。

删除节点：node.removeChild(child)

Tips：只需要在链接href后面写JavaScript：;

复制节点：node.cloneNode（）

案例：动态生成表格。

高效办法：数组push，最后拼接+‘’+；

DOM事件流（冒泡，委托鼠标事件，键盘事件）

案例：模拟京东回车锁定。快递单号查询。

注册兼容性问题解决方案：

传统e.οnclick=function(){}

监听eventTarget.addEventListener(type,listener{,useCapture})

解绑：e.onclik=null;

监听解绑：eventTarget.removeEventListener(type,listener{,useCapture})

• 移除的时候要考虑函数名，所以，我们就要把函数外写，不然就是临时的匿名函数，移除不便。
• 直接写函数名就可，不需要加括号，是直接绑函数，不是调用函数，则不需要加小括号。
• 注意：
• 放里面就会执行一次alert，放外面就直接取消了，一次也不执行。