DOM文档对象模型 -

DOM文档对象模型 -

 

  1. DOM 节点操作

HTML文档中的每一个成员都是一个节点对象，节点对象具有自己的属性和方法。

1.1. 特殊节点

1.1.1. html节点

document.documentElement  -> html标签

可返回存在于 XML 以及 HTML 文档中的文档根节点

1.1.2. body节点

document.body  -> body标签

对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问。

如果我们要对页面上添加显示元素，一般来说会使用这种方式。

 

我们要注意的区别：

document.documentElement.clientHeight 它拿到的是整个窗口高度

document.body.clientHeight 拿到内容的高度

1.2. 节点分类

 

nodeName

nodeValue

nodeType

Element(元素)

标签名称

null

1

Attribute(属性)

属性的名称

属性的值

2

Text(文本)

#text

文本的内容

3

 

1.3. Node对象的属性与方法总表

查询节点

　

　

方法

getElementById();

返回对拥有指定 id 的第一个对象的引用。

getElementsByName()

返回带有指定名称的对象集合。

getElementsByTagName()

返回带有指定标签名的对象集合。

getElementsByClassName();

返回带有指定类名的对象集合

属性

parentNode

父节点

firstChild

列表中的第一个节点

lastChild

列表中的最后一个节点

childNodes

所有子节点的列表

previousSibling

上一个兄弟节点

nextSibling

下一个兄弟节点

增加节点

　

　

　

appendChild()

追加节点

insertBefore()

插入节点

修改节点

　

　

　

replaceChild()

替换节点

删除节点

　

　

　

removeChild()

删除节点

创建节点

　

　

　

createElement()

创建一个元素节点 

createTextNode() 

创建一个文本节点

setAttribute()

给某个节点添加一个属性

getAttribute()

获取某个节点属性的值。

节点信息

　

　

　

nodeName

节点名称

nodeValue

节点值

nodeType

节点类型

1.4. 节点实例

1.4.1. 查询节点

<ul id="parent">

<li>第一行</li><li id="two">第二行</li><li>第三行</li><li>第四行</li>

</ul>

//查询two的父节点

                //>>1. 获取two节点

                    var two = document.getElementById("two");

                

                //>>2. 查询two的父节点

                    var parObj = two.parentNode;

                    log(parObj);

            

            

            //查询parent中第一个子节点

                

                //>>1. 找到parent

                    var parent = document.getElementById("parent");

                //>>2. 找第一个子节点

                    log(parent.firstChild);

            

            //查询parent中第最后一个子节点

                

                //>>1. 找到parent

                    var parent = document.getElementById("parent");

                //>>2. 找最后一个子节点

                    log(parent.lastChild);

            

            

            //查询所有子节点列表：

            

                //>>1. 找到parent

                    var parent = document.getElementById("parent");

                

                //>>2. 所有子节点

                    log(parent.childNodes);

                    

            //查找two的上一个兄弟

            

                //>>1. 获取two节点

                    var two = document.getElementById("two");

                

                //>>2. 查找two的上一个兄弟

                    var preObj = two.previousSibling;

                    log(preObj);

1.4.2. 增加节点

    <ul id="parent">

            <li>第一行</li>

            <li id="two">第二行</li>

            <li>第三行</li>

            <li>第四行</li>

        </ul>

            //需求： 在parent中添加一个新节点

                

                //>>1. 创建一个新节点；

                    

                    //>>1.1 创建元素节点

                        var liobj = document.createElement("li");

                                            

                    //>>1.2 创建属性节点

                        liobj.className = "xxx";

                        

                    //>>1.3 创建文本节点

                        liobj.innerHTML = "<p>我是新增的段落</p>";

                        

                //>>2. 把新节点添加到parent中

                    

                    //>>2. 1 获取parent节点

                        var parent = document.getElementById("parent");

                    //>>2. 2 在parent中追加新节点

                        parent.appendChild(liobj);

            

            //需求：在two节点之前插入新节点

            

                //>>1. 创建新节点

                    //>>1.1 创建元素节点

                        var liobj = document.createElement("li");

                                            

                    //>>1.2 创建属性节点

                        liobj.className = "yyy";

                        

                    //>>1.3 创建文本节点

                        liobj.innerHTML = "我是新节点";

                

                //>>2. 找到要在哪个节点之前添加

                    

                    var two = document.getElementById("two");

                

                //>>3. 具体添加

                    //>>3. 1 获取parent节点

                        var parent = document.getElementById("parent");

                    

                    //>>3. 2具体添加

                        parent.insertBefore(liobj,two);

1.4.3. 修改节点       

        <ul id="parent">

            <li>第一行</li>

            <li id="two">第二行</li>

            <li>第三行</li>

            <li>第四行</li>

        </ul>

  

            //需求： 用新节点替换two节点

                

                //>>1. 创建新节点

                    //>>1.1 创建元素节点

                        var liobj = document.createElement("li");

                                            

                    //>>1.2 创建属性节点

                        liobj.className = "xxx";

                        

                    //>>1.3 创建文本节点

                        liobj.innerHTML = "<p>我是新增的段落</p>";

                

                //>>2. 获取要替换的节点

                    

                    var two = document.getElementById("two");

                

                //>>3. 替换

            

                    //>>3.1 获取父元素

                    var parent = document.getElementById("parent");

                    

                    //>>3.2 用新元素替换旧元素

                        parent.replaceChild(liobj,two);

                //>>4. 替换属性节点

                

                    liobj.className = "aaa";

 

1.4.4. 删除节点

        

        <ul id="parent">

            <li>第一行</li>

            <li id="two">第二行</li>

            <li>第三行</li>

            <li>第四行</li>

        </ul>

    

   //需求： 删除two节点

            

                //>>1. 获取父元素

                    var parent = document.getElementById("parent");

                //>>2. 删除指定节点

            

                    //>>2.1 获取要删除的节点

                        var two = document.getElementById("two");

                        

                    //>>2.2 删除

                        parent.removeChild(two);

 

//需求： 删除parent中所有节点

            

                //>>1. 获取父元素

                    var parent = document.getElementById("parent");

                    

                //>>2. 获取父元素中所有的子元素

                    var child = parent.childNodes;

                    

                //>>3. 删除子元素

                    

                    //>>3.1 遍历子元素

                        for(var i=child.length-1; i>=0; i--){

                            

                            //>>3.2删除所有子元素

                                parent.removeChild(child[i]);

                        }

            

 

  1. 事件

2.1. 什么是事件？

事件是用户与计算机交互的行为。比如：单击按钮、鼠标放上、鼠标移开等等。

 

事件例子：

HTML 事件的例子：

当用户点击鼠标时

当网页已加载时 onload（文档加载完毕）

当网页被卸载时 onbeforeunload（文档即将从浏览器中卸载）

当图片已加载时

当鼠标移动到元素上时

当输入字段被改变时

当 HTML 表单被提交时

当用户触发按键时

2.2. 事件的四要素

事件源：事件发生的源头，就是事件发生的那个标签

事件类型：发生的是什么事件，比如：点击click

事件处理函数：当事件发生时，去调用的函数

事件对象：事件发生时的相关信息都保存到事件对象中

2.3. 注册事件三种方式

2.3.1. 在标签上添加事件

 

2.3.2. 在DOM对象上注册事件

 

2.3.3. W3C标准方法注册事件

W3C标准添加事件方式:

target.addEventListener(type, listener, useCapture);

参数介绍:
target： 文档节点、document、window 或 XMLHttpRequest。
type： 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture：是否使用捕捉，true为捕捉，false为冒泡，一般用 false 。

例如：

target.addEventListener("keydown",function (event){

alert(event.keyCode);

}, false);

 

W3C标准删除事件：

target.removeEventListener(event,function);

 

 

2.4. 常用事件

鼠标事件

click

点击事件

点击鼠标左键触发

dblclick

双击事件

双击鼠标左键触发

mouseover

移入事件

鼠标指针移到一个元素上触发

mouseout

移出事件

鼠标指针移出一个元素上触发

mousemove

移动事件

鼠标在一个元素上移动持续触发

mousedown

鼠标按下

单击鼠标任何一个按键触发

mouseup

鼠标抬起

松开鼠标任何一个按键触发

键盘事件

keydown

键按下

用户按下一个键盘按键时触发

keyup

键弹起

用户在键盘按键被松开时触发

keypress

按键一次

按下且抬起一个键

表单事件

submit

表单提交

　

input

输入事件

HTML5新增事件，输入内容时触发

blur

元素失去焦点

　

focus

元素获取焦点

　

change

用户改变域的内容

　

窗口事件

load

窗口加载

　是网页加载完毕时发生

2.5. 事件的捕捉和冒泡

 

向下是捕获1-2-3-4,向上是冒泡5,6,7,8

事件的捕获和冒泡只能够通过W3C标准注册事件的方式来完成

2.6. 事件处理函数返回值

某些事件发生时，浏览器会自动执行默认的动作。而事件句柄的返回值会影响浏览器默认动作的执行。如果事件句柄不返回值，或者返回true，默认动作被执行；如果事件句柄返回false，则默认动作不发生。

例如：当单击删除链接时

<a href="http://www.sina.com.cn" onclick="return confirm('是否确认删除操作？')">删除商品</a>

  /*

需求:点击删除按钮，弹出一个提示框，

如果点击是确定按钮，执行浏览器默认行为： 否则： 阻止浏览器默认行为

*/

      <a href="http://www.baidu.com" onclick="return a()">删除1</a>

                //1. 定义函数

                    function a(){

                        //弹出提示框

                        var result = confirm("是否删除数据");

                        //判断result，阻止浏览器默认行为

                        if(!result){

                            return false;

                        }

                    }

        

 

posted @   蒋小余  阅读(31)  评论(0)  编辑  收藏  举报
相关博文：
·  js的BOM和DOM
·  深入理解JS事件流
·  前端_DOM
·  DOM操作之节点操作
·  DOM文本对象模型
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
点击右上角即可分享
微信分享提示