JavaScript——DOM

一、DOM
 
文档对象模型(简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。
 
二、DOM树
 
DOM把以上内容都看做是对象,我们获取过来的DOM元素是一个对象(object),所以称为文档对象模型。
 
文档:一个页面就是一个文档,DOM中使用document表示。
 
元素:页面中的所有标签都是元素,DOM中使用element表示。
 
节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示。
 
三、DOM操作
 
1·1 获取元素
 
获取页面中元素可以使用以下几种方式:
 
根据ID获取,getElementById(’ID名’);
 
根据标签名获取,getElementsByTagName(’标签名’);
 
通过HTML5新增的方法获取,getElementsByClassName(’类名),document.querySelector(’(。/#)选择器’),document.querySelectorAll(’(。/#)选择器’);
 
特殊元素获取,document.body;(获取body元素),document.documentElement;(获取html元素);
 
注意:
 
通过标签名获取:因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历,得到元素对象是动态的。
 
根据ID获取元素是唯一的。
 
H5新增方法:根据类名返回的是元素对象集合。根据指定选择器返回的是第一个元素对象。
 
1·2 事件基础
 
事件概述:JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为。
 
简单理解:触发——响应机制。
 
网页中的每个元素都可以产生某些可以触发JavaScript的事件。
 
事件是有三部分组成 :事件源 事件类型 事件处理程序 我们也称为事件三要素
 
例如:
 
<script>
 
        //点击一个按钮,弹出对话框
 
        //1、事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
 
        //(1)事件源 事件被触发的对象 谁 按钮
 
        var btn = document.getElementById(’btn’);
 
        //(2)事件类型 如何触发 什么事件 比如鼠标点击(onclick)还是鼠标经过 还是键盘按下
 
        //(3)事件处理程序 通过一个函数赋值的方式 完成
 
        btn.onclick = function() {
 
            alert(’点秋香’);
 
        }
 
</script>
 
执行事件的步骤:
 
 例如:
 
<script>
 
        //执行事件步骤
 
        //点击div,控制台输出,我被选中了
 
        //1、获取事件源
 
        var div = document.querySelector(’div’);
 
        //2、绑定事件 注册事件
 
        //div.onclick
 
        //3、添加事件处理程序
 
        div.onclick = function() {
 
            console.log(’我被选中了’);
 
        }
 
</script>
 
1·3 鼠标事件
 
 补充鼠标事件:
 
mouseenter:移入事件。
 
mouseleave:移出事件。
 
contextmenu:右键事件。
 
selectstart:禁止鼠标选中。
 
1·4 键盘事件
 
 例如:
 
<script>
 
        // 常用的键盘事件
 
        //1. keyup 按键弹起的时候触发 
 
        // document.onkeyup = function() {
 
        //         console.log(’我弹起了’);
 
        //     }
 
        document.addEventListener(’keyup’, function() {
 
            console.log(’我弹起了’);
 
        })
 
        //3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊
 
        document.addEventListener(’keypress’, function() {
 
                console.log(’我按下了press’);
 
            })
 
            //2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊
 
        document.addEventListener(’keydown’, function() {
 
                console.log(’我按下了down’);
 
            })
 
            // 4. 三个事件的执行顺序  keydown — keypress — keyup
 
</script>
 
1·5 操作元素
 
JavaScript的DOM操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等。
 
1·5·1 改变元素内容
 
element.innerText;从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉
 
element.innerHTML;起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行
 
例如:
 
<script>
 
        //innerText 和 innerHTML的区别
 
        //1、innerText 不识别html标签 非标准 去除空格和换行
 
        var div = document.querySelector(’div’);
 
        //div.innerText='<strong>今天是:</strong> 2019′;
 
        //2、innerHTML 识别html标签 W3C标准 保留空格和换行
 
        div.innerHTML = ‘<strong>今天是:</strong> 2019’;
 
        //这两个属性是可读写的 可以获取元素里面的内容
 
        var p = document.querySelector(’p’);
 
        console.log(p.innerText);
 
        console.log(p.innerHTML);
 
</script>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64195.shtml

张贴在3