JavaScript核心之DOM系列（一）

什么是DOM？

文档对象模型（Document Object Model），简称DOM，是w3c组织推荐的处理可扩展性标记语言（HTML/XML）的标准编程。w3c已经定义了一系列的DOM接口，通过这些接口，可以改变网页的内容、结构和样式。

DOM又称为文档树模型：

关于DOM相关的解释：

文档：一个页面就是一个文档，DOM中使用document表示

节点：网页中所有内容都是节点（标签、属性、文本、注释等）,DOM中使用element表示

元素：页面中的所有标签都是元素，DOM中使用element表示

属性：标签的属性（href，src，title等）

DOM把以上内容都看作是对象

如何获取元素？

1.根据ID获取元素

语法：var element=document.getElementById("id")

返回值：匹配到id的DOM/element 对象，若不存在，返回null

注意：id是大小写敏感的字符串，代表了所要查找元素的唯一ID

可以通过console.log(element)或者console.dir(element) 查看返回的元素对象

2.根据标签名获取元素

语法：var elements=document.getElementsByTagName('li');

返回值：获取过来元素对象的集合，以伪数组的形式存储的

可以通过for循环打印元素对象

for (let i = 0; i < elements.length; i++) {
            console.log(elements[i]);            
}

3.通过HTML5新增的方法获取

①根据类名获取某些元素

语法：var boxs=document.getElementsByClassName('box')

返回值：根据类名返回元素对象集合

②querySelector()

语法：var nav=document.querySelector('#nav') 可以是类名、id名、标签名

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

③querySelectorAll()

语法：var allBox=document.querySelectorAll('.box')

返回值：根据指定选择器，返回所以元素对象集合

4.获取特殊元素（body和html）

①获取body元素

语法：var bodyEle=document.body

返回值：body的元素对象

②获取html元素

语法：var htmlEle=document.documentElement;

返回值：html的元素对象

事件基础

JavaScript有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件，比如点击事件。

事件由三部分组成：

①事件源：事件被触发的对象（比如被点击的按钮）

②事件类型：如何触发的（什么事件）。比如点击、鼠标经过、键盘按下

③事件处理程序：事件触发后，做什么操作。采取函数赋值的方式

事件的执行步骤：获取事件源→注册事件→添加事件处理程序

常见的鼠标事件：

onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

键盘事件：

onkeydown	按键被按下时触发	通过keycode属性获取相应键的ASCII码值，keyup和keydown事件不区分大小写，a和A都是65
onkeyup	按键被松开时触发	通过keycode属性获取相应键的ASCII码值，keyup和keydown事件不区分大小写，a和A都是65
onkeypress	按键被按下时触发（不能识别功能键，eg：Ctrl、shift、箭头等）	通过keycode属性获取相应键的ASCII码值，keypress事件区分字母大小写（A65 a97）

执行顺序 keydown->keypress->keyup

如何给元素注册事件？

给元素添加事件，称为注册事件或者绑定事件。

    <button id="btn">唐伯虎</button>
    <script>
        // 点击按钮 弹出对话框
        // 1.获取事件源
        var btn=document.getElementById('btn');
        // 2.事件类型 点击（onclick）
        // 3.事件处理程序 通过一个函数赋值的方式
        btn.onclick=function(){
            console.log(btn.innerText);            
            alert('点秋香')
        }
    </script>

如何操作元素？

JavaScript的DOM操作，可以改变网页内容，结构和样式。可以利用DOM操作元素来改变元素里面的内容、属性等。

操作元素内容：

①innerText

语法：element.innerText

element.innerText="新内容"

②innerHTML

语法：element.innerHTML

element.innerHTML="新内容"

两者的区别：

① innerText 非标准，不识别html标签，以及空格、换行不会被保留

② innerHTML 标准，可以识别html标签，同时保留空格和换行

③ 两个属性都是可读写的

操作常见元素属性

    <button>刘天仙-神雕侠侣</button>
    <button>刘天仙-仙剑</button>
    <hr>
    <img src="https://ae01.alicdn.com/kf/H87b0fd75498d4142aedf079d4bb23c06k.jpg" alt="" title="姑姑">
    <!-- https://ae01.alicdn.com/kf/Hbf6c93e6d94f4bc8aef35d23034b941aN.jpg -->

    <script>
        // 修改元素属性 src
        // 1.获取元素
        var first=document.querySelector('button')
        var second=document.querySelector('button:nth-child(2)')
        var img=document.querySelector('img')
        first.onclick=function(){
            img.src='https://ae01.alicdn.com/kf/H87b0fd75498d4142aedf079d4bb23c06k.jpg';
            img.title='姑姑'
        }
        second.onclick=function(){
            img.src='https://ae01.alicdn.com/kf/Hbf6c93e6d94f4bc8aef35d23034b941aN.jpg';
            img.title='灵儿'
        }
    </script>

操作表单元素属性

 var btn=document.querySelector('button')
        var input=document.querySelector('input')
        btn.onclick=function(){
            input.value='被点击了'
            console.log(input.value);
            // 禁用
            // btn.disabled=true
            // this指向的是事件函数的调用者 这里指向的就是btn
            this.btn.disabled=true
        }

操作元素样式属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div=document.querySelector('div')
        div.onclick=function(){
            div.style.backgroundColor='green'    
            div.style.width='400px'      
        
        }
    </script>
</body>
</html>

posted @ 2020-08-07 19:08 ljy景阅读(233) 评论(0) 收藏举报

刷新页面返回顶部

ljy景

JavaScript核心之DOM系列（一）

公告