3.28 学前端 JavaScript之DOM对象(DHTML)

最新推荐文章于 2021-05-03 21:46:19 发布

yanga11ang

最新推荐文章于 2021-05-03 21:46:19 发布

阅读量233

点赞数

分类专栏： py_web_front end

本文链接：https://blog.youkuaiyun.com/yanga11ang/article/details/79719147

版权

py_web_front end 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了DOM（文档对象模型）的概念及其在HTML文档中的应用，包括节点类型、节点属性及导航属性，并提供了查找、增删改查操作的具体示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM对象(DHTML)

1 什么是 DOM？

DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
什么是 XML DOM？－－－－>XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
什么是 HTML DOM？－－－－>HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

2 DOM 节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：
- 整个文档是一个文档节点(document对象)
- 每个 HTML 元素是元素节点(element 对象)
- HTML 元素内的文本是文本节点(text对象)
- 每个 HTML 属性是属性节点(attribute对象)
- 注释是注释节点(comment对象)
画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。

节点(自身)属性:

attributes  //节点（元素）的属性节点
nodeType    //节点类型
nodeValue   //节点值
nodeName    //节点名称
innerHTML   //节点（元素）的文本值

导航属性:

parentNode  // 节点（元素）的父节点 (推荐)
firstChild  // 节点下第一个子元素
lastChild   // 节点下最后一个子元素
childNodes  // 节点（元素）的子节点

注意：

<div id="div1">
    <div id="div2"></div>
    <p>hello yanga11ang</p>
</div>
<script>
    var div=document.getElementById("div2");
    console.log(div.nextSibling.nodeName);  //思考:为什么不是P?因为是换行
</script>

推荐导航属性：

parentElement              // 父节点标签元素
children                   // 所有子标签
firstElementChild          // 第一个子标签元素
lastElementChild           // 最后一个子标签元素
nextElementtSibling        // 下一个兄弟标签元素
previousElementSibling     // 上一个兄弟标签元素

节点树中的节点彼此拥有层级关系。

父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点
下面的图片展示了节点树的一部分，以及节点之间的关系：

寻找对象的方法

访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素：
页面查找：

document.getElementById(idName);    //通过id寻找元素的方法，结果唯一
document.getElementsByTagName(tagName); //通过标签名寻找元素的方法 ，结果是数组
document.getElementsByClassName(className);//通过class寻找元素的方法，结果是数组
document.getElementsByName(name);   //通过name属性(和后端交互的属性)寻找元素的方法，数组

局部查找：

<div id="div1">
    <div class="div2">i am div2</div>
    <div name="yanga11ang">i am div2</div>
    <div id="div3">i am div2</div>
    <p>hello p</p>
</div>
<script>
    var div1=document.getElementById("div1");
    //支持tagName
    var ele= div1.getElementsByTagName("p");
    alert(ele.length); //1
    //支持 className
    var ele2=div1.getElementsByClassName("div2");
    alert(ele2.length);//1
    //不支持id
    var ele3=div1.getElementById("div3");
    alert(ele3.length);
    //不支持name
    var ele4=div1.getElementsByName("yuan");
    alert(ele4.length)
</script>

3 HTML DOM Event(事件)

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

onclick        //当用户点击某个对象时调用的事件句柄。
ondblclick     //当用户双击某个对象时调用的事件句柄。

onfocus        //元素获得焦点。
//练习：输入框
onblur         //元素失去焦点。 
//应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       //域的内容被改变。 
//应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      //某个键盘按键被按下。有一个keyCode对应
//应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     //某个键盘按键被按下并松开。
onkeyup        //某个键盘按键被松开。
onload         //一张页面或一幅图像完成加载。
//应用：javaScript放到前面时候，
onmousedown    //鼠标按钮被按下。
onmousemove    //鼠标被移动。
onmouseout     //鼠标从某元素移开。
onmouseover    //鼠标移到某元素之上。
onmouseleave   //鼠标从元素离开

onselect       //文本被选中。
onsubmit       //确认按钮被点击。
//应用 前端验证，绑定在form标签上

两种为元素附加事件属性的方式

<div onclick="alert(123)">点我呀</div>
<p id="abc">试一试!</p>
<script>
    var ele=document.getElementById("abc");
        ele.onclick=function(){
        alert("hi");
    };
</script>

注意：

<div id="abc" onclick="func1(this)">事件绑定方式1</div>
<div id="id123">事件绑定方式2</div>
<script>
    function func1(self){
        console.log(self.id)
    }
    //jquery下是$(self), 这种方式this参数必须填写;
//------------------------------------------//
    var ele=document.getElementById("id123");
    ele.onclick=function(){
        console.log(this.id);
        //jquery下是$(this), 这种方式不需要this参数;
    }
</script>

onload：

onload 属性开发中只给 body元素加.
这个属性的触发标志着页面内容被加载完成.
应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        window.onload=function(){
            var ele=document.getElementById("ppp");
            ele.onclick=function(){
                alert(123)
            };
        };

        function fun1(){
            var ele=document.getElementById("ppp");
                ele.onclick=function(){
                alert(123)
            };
        }
    </script>
</head>
<body onload="fun1()">
    <p id="ppp">hello p</p>
</body>
</html>

onsubmit:

是当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.


<form id="form">
    <input type="text"/>
    <input type="submit" value="点我!" />
</form>

<script type="text/javascript">
    //阻止表单提交方式1
    //onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行.
    var ele=document.getElementById("form");
    ele.onsubmit=function(event) {
        alert("验证失败 表单不会提交!");
        return false;
    // 阻止表单提交方式2 
    //event.preventDefault(); 通知浏览器不要执行与事件关联的默认动作。
        alert("验证失败 表单不会提交!");
        event.preventDefault();
    }
</script>

Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.
比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode；
思考：onclick＝function(event){};这个方法是谁调用的？

事件传播：

<div id="abc_1" style="border:1px solid red;width:300px;height:300px;">
    <divid="abc_2" style="border:1px solid red;width:200px;height:200px;">
    </div>
</div>
<script type="text/javascript">
    document.getElementById("abc_1").onclick=function(){
        alert('111');
    }
    document.getElementById("abc_2").onclick=function(event){
        alert('222');
        event.stopPropagation(); //阻止事件向外层div传播.
    }
</script>

4 增删改查演示
4.1 node的CURD：

增:
- createElement(name)创建元素
- appendChild();将元素添加
删:
- 获得要删除的元素
- 获得它的父元素
- 使用removeChild()方法删除
改:
- 第一种方式:
  - 使用上面增和删结合完成修改
- 第二种方式:
  - 使用setAttribute();方法修改属性
  - 使用innerHTML属性修改元素的内容
查:
- 使用之前介绍的方法.

<script type="text/javascript">
    //在第一个div中动态增加一个a标签. 该a标签点击之后跳转到百度首页.
    function addNode(){
        //1.获得 第一个div
        var div = document.getElementById("div_1");
        //2.创建a标签  createElement==>创建一个a标签   <a></a>
        var eleA =  document.createElement("a");
        //3.为a标签添加属性 <a href="http://www.baidu.com"></a>
        eleA.setAttribute("href", "http://www.baidu.com");
        //4.为a标签添加内容 <a href="http://www.baidu.com">百度</a>
        eleA.innerHTML = "百度";    
        //5.将a标签添加到div中
        div.appendChild(eleA);
    }
    //点击后 删除div区域2
    function deleteNode(){
        //1 获得要删除的div区域
        var div = document.getElementById("div_2");
        //2.获得父亲
        var parent = div.parentNode;
        //3 由父亲操刀 
        parent.removeChild(div);
    }
    //点击后 替换div区域3 为一个美女
    function updateNode(){
        //1 获得要替换的div区域3
        var div = document.getElementById("div_3");
        //2创建img标签对象 <img />
        var img = document.createElement("img");
        //3添加属性 <img src="001.jpg" />
        img.setAttribute("src", "001.JPG");
        //4.获得父节点
        var parent = div.parentNode;
        //5.替换
        parent.replaceChild(img, div);
    }
    //点击后 将div区域4 克隆一份 添加到页面底部
    function copyNode(){
        //1.获取要克隆的div
        var div = document.getElementById("div_4");
        //2.克隆 参数为true 那么克隆时克隆所有子元素. false 只克隆自己
        var div_copy = div.cloneNode(true);
        //3.获得父亲
        var parent = div.parentNode;
        //4.添加
        parent.appendChild(div_copy);
    }
</script>

4.2 修改 HTML DOM

改变 HTML 内容
- 改变元素内容的最简答的方法是使用 innerHTML ，innerText。
改变 CSS 样式
- document.getElementById(“p2”).style.color=”blue”;
改变 HTML 属性
- elementNode.setAttribute(name,value);
- elementNode.getAttribute(name); //elementNode.value(DHTML)
创建新的 HTML 元素
- createElement(name)
删除已有的 HTML 元素
- elementNode.removeChild(node)
关于class的操作
- elementNode.className //字符串多个数组
- elementNode.classList.add
- elementNode.classList.remove