JavaScriptDOM介绍与元素节点

最新推荐文章于 2024-05-17 01:18:21 发布
最新推荐文章于 2024-05-17 01:18:21 发布
阅读量154 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52102646/article/details/116176255
版权

JavaScriptDOM介绍与元素节点

你好！ 这是我自己编辑的一些知识点。如果你想学习JavaScript的有关知识, 可以仔细阅读这篇文章。

JavaScript的使用

如何使用JavaScript

script元素

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>如何使用JavaScript</title>
    <!--
        <script></script>元素
        *作用 - 引入/嵌入脚本语言
        *属性
          *type="text/javascript" - （新）表示当前使用的是JavaScript语言
          *language="javascript" - （旧）表示当前使用的是JavaScript语言
          *src属性 - 指定JavaScript文件的路径
        *注意 - HTML5允许不指定任何属性（什么语言）
    -->
    <script src="01.js" type="text/javascript" language="javascript">
    // 浏览器窗口加载完毕之后，再执行指定代码
        window.onload =function(){
            // JavaScript代码编写在这里
        }
    </script>
</head>
<body>
    <button id="btn">按钮</button>
    <!-- 将JavaScript代码编写在对应HTML元素的后面 -->
    <script>
    // JavaScript语言编写在HTML页面中 - 没有有效分离
    console.log('这是一段JavaScript代码。');
    </script>
    <!-- 
        浏览器内置集成了引擎/解释器
        *HTML/CSS引擎/解释器
        *JavaScript引擎/解释器
        建议：
        *<script></script>元素尽量少出现
        *<script></script>元素尽量编写在一起
     -->
</body>
</html>

DOM是什么

是什么

DOM是个缩写，全称是Document Object Model，被译为文档对象模型。

  • D：Document 将页面表示为文档
  • O：Object 将元素表示为对象
  • M：Model 表示对象之间的关系

标准

由于DOM的标准规范是由W3C组织起草井定义的，所以W3C对DOM的定义是目前最权威的解释。

  • 下面这段英文描述，就是W3C对DOM的定义原文:

    The Docurment Object Model is a platform- and language -neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.

  • 下面这段是作者的翻译(仅供参考) :

    DOM是一个独立 于任何语言和平台的接口，允许任何语言或脚本动态地访问和更新HTML文档的内容、结构和样式。该HTML页面可以进一步处理， 并且该处理的结果可以被合并到所呈现的HTML页面中。

作用

  • DOM被设计用于解析HTML页面文档，方便JavaScript语言通过DOM访问和操作HTML页面中的内容。

  • DOM是由W3C组织定义标准规范，并且由各大浏览器厂商支持。严格意义上来讲，DOM并非属于、JavaScript语言。

  • 我们之所以可以在、JavaScript语言中使用DOM，是因为各大浏览器将DOM的标准规范内容封装成了JavaScript语言所支持的形式。对DOM中的对象，我们只有调用的权限，没有修改的权限，也说明了这个问题。

  • 浏览器加载并运行HTML页面后，会创建DOM结构。由于DC )M中的内容被封装成了、JavaScript语言中的对象，所以我们可以使用、JavaScript语言通过DC )M结构来访问和操作HTML页面中的内容。

cyyAlq.png](https://imgtu.com/i/cyyAlq)

DOM树结构

DOM可以访问和更新HTML页面中的内容、结构和样式，是因为DOM将HTML页面解析为一个树结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例页面</title>
</head>
<body>
    <h2>这是一个示例页面</h2>
    <p id="p" title="this is p">这是一个段落内容</p>
</body>
</html>

cRip5R.png
cRkoUH.png](https://imgtu.com/i/cRkoUH)

节点是什么

  • 节点（Node）原本是网络术语，表示网络中的连接点。一个网络是由一些节点构成的集合。

  • 在DOM树结构中，节点也是很重要的一个概念。简单来说，节点作为DOM树结构中的连接点，最终构成了完整的DOM树结构。

常量值描述
Node.DOCUMENT_NODE9文档节点，表示整个HTML页面（相对于document对象）
Node.ELEMENT_NODE1元素节点，表示HTML页面中的标签（即HTML页面的结构）
Node.ATTRIBUTE_NODE2属性节点，表示HTML页面中的开始标签包含的属性。在DOM4规范里Node接口将不再实现这个元素属性
Node.TEXT_NODE3文本节点，表示HTML页面中的标签所包含的文本内容

DOM节点树

  • 通过节点概念，可以将原本的DOM树结构改成DOM节点树结构进行表示。

cREHjP.png
cRVLx1.png

Document对象

Document对象是什么

  • Document对象是DOM的标准规范中比较重要的对象之一。该对象提供了访问和更新HTML页面内容的属性和方法。

  • Document对象作为DOM访问和更新HTML页面内容的入口。简单来说，可以把Document对象理解为在DOM的标准规范中代表HTML页面。

  • Document对象提供的属性和方法，可以实现定位HTML页面中的元素，或者创建新的元素等功能。

测试Document对象

通过console.log()方法将Document对象打印，测试Document对象中提供了哪些属性和方法。

console.log(document);
  • 运行HTML页面后，打开开发者工具，我们可以看到以下内容：

cj8pSP.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document对象</title>
</head>
<body>
    <script>
        // document对象
        // *DOM预定义 - 已经创建完毕了 - 允许直接使用
        // *得到的是HTML页面的源代码 - 该对象代表当前HTML页面
        console.log(document);
        // document的确是一个JavaScript对象
        console.log(document instanceof Object);//true
        // document对象的属性和方法被定义在原型上
        console.log(Document.prototype);
        // 不再需要我们创建了
        var document =new Document();
        console.log(document);
    </script>
</body>
</html>

继承链关系

  • Document对象是继承于Node对象的。Node对象也是DOM的标准规范中非常重要的对象之一，而Node对象又是继承于EventTarget对象。
console.log(cument.prototype instanceof Node);
console.log(Node.prototype instanceof EventTarget);

console.log(Document.prototype instanceof EventTarget);
  • Document对象的属性和方法是继承于Node对象和EventTarget对象的。当然，也有一部分属性和方法是实现了HTML Document接口的。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document对象继承链</title>
</head>
<body>
    <script>
        // document对象是继承于Node的
        console.log(Document.prototype instanceof Node);
        // node对象是继承于EventTarget的
        console.log(Node.prototype instanceof EventTarget);

        console.log(Document.prototype instanceof EventTarget);
        // DOM中的对象之间的继承关系远比语法中的继承关系复杂
        console.log(Document.prototype instanceof HTMLDocument);
    </script>
</body>
</html>

定位页面元素

定位页面元素方法

Document对象提供了属性和方法实现定位页面元素功能，这也是DOM的标准规范中Document对象的主要应用之一。

  • Document对象提供实现定位页面元素的方法具有如下几种：

    • getElementById()方法：通过页面元素的id属性值定位元素。
    • getElementsByName()方法：通过页面元素的name属性值定位元素。
    • getElementsByTagName()方法：通过页面元素的元素名定位元素。
    • gatElementsByClassName()方法：通过页面元素的class属性值定位元素。
    • querySelector()方法：通过CSS选择器定位第一个匹配的元素。
    • querySelectorAll()方法：通过CSS选择器定位所有匹配的元素。

ID属性值定位元素

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getElementById()方法</title>
</head>
<body>
    <button id="an">按钮</button>
    <div id="d1"></div>
    <script>
        // 1.通过Document对象的getElementById()方法定义元素
        var buttonElement =document.getElementById('an');
        // *打印测试的结果 - 是对应元素的HTML代码
        // *DOM无论是使用的还是得到的都应该是对象
        console.log(buttonElement instanceof Object);//true
        // DOM提供了一系列的对象 - 对应HTML页面的每一个元素
        // *<button>元素对应具有HTMLButtonElement对象
        // *<div>元素对应具有HTMLDivElement对象
        console.log(buttonElement instanceof HTMLButtonElement);//true
        var d1=document.getElementById('d1');
        console.log(d1 instanceof HTMLDivElement);//true
    </script>
</body>
</html>

name属性值定位元素

其语法格式如下：

var elements=document.getElementsByName(name);
  • name是参数，表示所要定位元素的name属性值，是一个大小写敏感的字符串。
  • elements是返回值，表示定位元素的集合，是一个NodeList集合。
var elems=document.getElementsByName('an');
//循环遍历所有元素
for (var i=0;i<elems.length;i++){
    var elem=elems[i];
    var className=elem.className;
    className+='animate';
    elem.className=className;
}

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getElementsByName()方法</title>
</head>
<body>
    <button name="btns">按钮</button>
    <button name="btns">按钮</button>
    <button name="btns">按钮</button>
    <button name="btns">按钮</button>
    <button name="btns">按钮</button>
    <script>
        // name属性不唯一 -> 得到的结果可能是多个，也可能是一个
        var buttonElement=document.getElementsByName('btns');
        // NodeList集合 - 类数组对象
        // *得到每一个对应元素的话 - 通过索引值
        console.log(buttonElement[0]);
        console.log(buttonElement instanceof NodeList);//true
    </script>
</body>
</html>

元素名定位元素

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getElementsByTagName()方法</title>
</head>
<body>
    <button name="btns">按钮</button>
    <button name="btns">按钮</button>
    <button name="btns">按钮</button>
    <button name="btns">按钮</button>
    <button name="btns">按钮</button>
    <script>
        var buttonElements=document.getElementsByTagName('button');
        // HTMLColection集合 - 类数组对象
        console.log(buttonElements[0]);
    </script>
</body>
</html>

class属性值定位元素

其语法格式如下：

var elems=document.getElementsByClassNme(names);

  • names是参数，表示所要定位元素的class属性值列表，class名称通过空格分隔。

  • 注意：names参数可以是一个样式属性名称，也可以是多个样式属性名称。

var elems=document.getElementsByClassName('btns');
//循环遍历所有元素
for (var i=0;i<elems.length;i++){
    var elem=elems[i];
    var className=elem.className;
    className+='animate';
    elem.className=className;
   }

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getElementsByClassName()方法</title>
</head>
<body>
    <button class="btns">按钮</button>
    <button class="btns">按钮</button>
    <button class="btns">按钮</button>
    <button class="btns">按钮</button>
    <button class="btns">按钮</button>
    <script>
        var buttonElements=document.getElementsByClassName('btns');
        // HTMLColection集合 - 类数组对象
        console.log(buttonElements);
    </script>
</body>
</html>

补充：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getElementsByClassName()方法补充</title>
    <script src="myToools.js"></script>
</head>
<body>
    <button class="btn cls">按钮</button>
    <button class="btn">按钮</button>
    <script>
        // Document对象的getElementsByClassName()方法具有浏览器兼容问题
        // *会有一些浏览器不支持此方法 - 特指IE 6/7/8
        var buttonElement=document.getElementsByClassName('btn cls');
        console.log(buttonElement);

        // 自定义getElementsByClassName()方法
        // function getElementsByClassName(){

        // }

        

        // 1.判断用户当前使用的浏览器是否支持
        if (document.getElementsByClassName){
            // 说明该方法存在
            document.getElementsByClassName();
        }else{
            // 说明该方法不存在
            // getElementsByClassName();
            // 为document对象添加getElementsByClassName()方法
            Object.defineProperty(Document.prototype,'getElementsByClassName',{
                value:function(){

                }
            });
            document.getElementsByClassName();
        }
    </script>
</body>
</html>

CSS选择器定位元素

CSS中的选择器可以很便利的定位HTML页面元素，DOM的标准规范中也提供类似的方法。

  • querySelector()方法:通过CSS选择器定位第一个匹配的元素。
var elements=document.querySelector(selectors);
  • selectors是参数，表示选择器，可以包含一个或多个CSS选择器，多个则以逗号分隔。
  • element是返回值，表示定位元素的集合，匹配的第一个元素。
var btn=document.querySelector('#btn');
//获取定位元素的class属性值
var className=btn.className;
//添加animate动画样式
className+='animate';
//将新的class属性值设置
btn.className=className;

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>querySelector()方法</title>
</head>
<body>
    <button id="btn">按钮</button>
    <button class="btns">按钮</button>
    <button class="btns">按钮</button>
    <button class="btns">按钮</button>
    <button class="btns">按钮</button>
    <button class="btns">按钮</button>
    <script>
        //该方法返回的是第一个匹配的元素
        var buttonElement1=document.querySelector('#btn');
        console.log(buttonElement1);

        var buttonElements2=document.querySelector('.btns');
        console.log(buttonElements2);
        //querySelectorAll()方法返回的是NodeList集合
        var buttonElements = document.querySelectorAll('.btns');
        console.log(buttonElements);
    </script>
</body>
</html>

节点集合NodeList

NodeList是一组元素节点的集合，每个节点具有相应的索引值（从0开始的数字，类似于数组）。

  • 动态NodeList

    ​ 所谓动态的NodeList集合，就是如果文档中的节点树发生变化，则已经存在的NodeList对象也可能会变化。

    • getElementsByName()方法：通过页面元素的name属性值定位元素。
    • getElementsByTagName()方法：通过页面元素的元素名定位元素。
    • getElementsByClassName()方法：通过页面元素的class属性值定位元素。

  • 静态NodeList

    ​ 所谓静态NodeList集合，就是对文档对象模型的任何改动都不会影响集合的内容。

DOM缓存

gFJGFI.png

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM缓存</title>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        var buttonElement=document.getElementById('btn');

        console.log(buttonElement);
        console.log(document.getElementById('btn'));
    </script>
</body>
</html>

页面元素属性

Document对象也提供了一些属性，来定位HTML页面中一些比较特殊的元素。

  • documentElement：获取HTML页面中的html元素。
  • head：获取HTML页面中的head元素。
  • title：获取HTML页面中title元素。
  • body：获取HTML页面中的body元素。
  • links：获取HTML页面中的所有a元素。
  • images：获取HTML页面中的所有img元素。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位页面元素的属性</title>
</head>
<body>
    <button class="btns" id="btn">按钮</button>
    <button class="btns">按钮</button>
    <button class="btns">按钮</button>
    <button class="btns">按钮</button>
    <button class="btns">按钮</button>
    <script>
        console.log(document.documentElement);//<html>
        console.log(document.head);//<head>
        console.log(document.body);//<body>

        console.log(document.images);//<image>
        
        var images=document.images;
        for (var i=0;i<images.length;i++){
            var img=images[i];
            console.log(img.src);
        }
    </script>
</body>
</html>
速查图片代码
var images=document.images;
        for (var i=0;i<images.length;i++){
            var img=images[i];
            console.log(img.src);
        }

创建页面元素

创建元素节点

Document对象提供了createElement()节点创建元素节点，其语法格式如下：

var element==document.createElement(tagName);
  • tagName是参数，表示创建元素的元素名称。
  • element是返回值，表示创建的元素。
var div=document.getElementById('group');
//创建新的元素节点
var elem=document.createElement('button');
div.appenChild(elem);

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建元素节点</title>
</head>
<body>
    <script>
        //1.创建<button></button>元素
        var btn=document.createElement('button');
        //2.获取<body>元素
        var body=document.body;
        //3.向<body>元素添加子节点
        body.appendChild(btn);
    </script>
</body>
</html>

创建文本节点

Document对象提供了createTextNode()方法创建文本节点，其语法格式如下：

var textNode=document.createTextNode(data);
  • data是参数，包含了放在文本节点中的内容，是一个字符串。
  • textNode是返回值，表示创建的文本节点。
var div=document.getElementById('group');
//创建新的元素节点
var elem=document.createElement('button');
//创建文本节点
var text=document.createTextNode('New Button');
//将文本节点添加到新的元素节点
elem.appendChild(text);
//将新的元素节点添加到父级元素节点
div.appendChild(elem);

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建文本节点</title>
</head>
<body>
    <script>
        //1.创建<button>文本</button>元素
        var btn=document.createElement('button');

        //2.创建文本节点
        var textNode=document.createTextNode('哈哈哈');

        // 3.向<button></button>元素添加子节点
        btn.appendChild(textNode);

        //4.获取<body>元素
        var body=document.body;
        //5.向<body>元素添加子节点
        body.appendChild(btn);
    </script>
</body>
</html>

创建属性节点

Document对象提供了createAtrribute()方法创建属性节点，其语法格式如下：

var attributeNode=document.createAttribute(name);
  • name是参数，属性节点的属性名称。
  • attributeNode是返回值，表示创建的属性节点。

注意：

  • 创建属性节点方法只具有属性名称，没有属性值。想要设置属性值需要通过nodeValue属性完成。

  • 由于属性节点不是元素节点的子节点，不能使用添加子节点方式操作属性节点。想要添加属性节点需要通过setAttributeNode()方法完成。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建属性节点</title>
</head>
<body>
    <script>
        //1.创建<button>文本</button>元素
        var btn=document.createElement('button');

        //2.创建文本节点
        var textNode=document.createTextNode('哈哈哈');

        // 3.向<button></button>元素添加子节点
        btn.appendChild(textNode);

        // 4.创建属性节点
        var attrNode=document.createAttribute('id');
        // 5.为属性节点设置值
        attrNode.nodeValue='btn';
        // 6.为<button>元素设置属性节点
        btn.setAttributeNode(attrNode);

        //7.获取<body>元素
        var body=document.body;
        //8.向<body>元素添加子节点
        body.appendChild(btn);
    </script>
</body>
</html>
薯片
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript HTML DOM元素 节点操作汇总
10-16
JavaScript HTML DOM元素节点操作是网页动态交互的核心技术之一，它允许我们通过JavaScript代码来操作页面上的HTML元素。本文将深入探讨DOM中的节点操作，包括添加、删除、替换和查找节点等基本操作。 首先，理解...
jacascript DOM节点——元素节点、属性节点、文本节点
08-30
通过访问元素节点的`childNodes`，可以获取到与元素相关的文本节点。 在实际开发中，DOM节点的操作非常常见，如动态添加、删除或修改元素和属性，或者通过遍历DOM树来查找特定的节点。理解元素节点、属性节点和文本...
JavaScriptDOM
weixin_33894992的博客
05-14 121
JavaScriptDOM DOM:Document Object Model(文本对象模型) ——D:文档-html文档或xml文档 ——O:对象-document对象的属性和方法 ——M:模型 ——DOM是针对xml(html)的基于树的api ——DOM树：节点(node)的层次 ——DOM把一个文档表示为一棵家谱树（父、子、兄弟） ——DOM定义了Node的接口以及许多种节...
javascriptDom
qq_37149421的博客
11-13 783
1. DOM定义 全称：document object model（文档对象模型），是W3C组织推荐的处理可扩展标志语言的标准编程接口 •document：指的是可扩展的标记语言：HTML、XML； •object：DOM实际上是以基于对象方式对当前文档进行操作的； •model：在网页上，组织页面（或文档）的对象被组织在一个树形结构中，这个就是文档模型。 2.Document对象集
Web前端最全从零开始学WEB前端——JavaScript-DOM操作，2024年最新字节跳动前端开发面试
最新发布
2401_84438488的博客
05-17 252
技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。风急天高猿啸哀，渚清沙白鸟飞回。无边落木萧萧下，不尽长江滚滚来。万里悲秋常作客，百年多病独登台。艰难苦恨繁霜鬓，潦倒新停浊酒杯。——杜甫《登高》⌨本文知识点DOM介绍获取节点通过ID获取用类名获取用CSS选择器获取用name属性获取用标签获取获取属性获取元素内容获取表单数据创建节点插入节点删除节点事件。
javascriptDOM
xiaoprj的专栏
03-15 694
javascriptDom DOM:文档对象模型，是针对html和xml文档的一个API。描绘一个层次化的节点树，允许开发人员添加、移除、修改页面的某一个部分。 IE中所有的DOM对象都是以ＣＯＭ对象的形式实现的，这意味着ＩＥ的ＤＯＭ对象与原生的javascript对象行为或活动不一致。 DOM层次：                             SamplePage
JavascriptDOM
Abenazhan的博客
08-14 624
DOM: DOM(Document Object Model) 1.document 文档（HTML XML）标记语言 2.Object 对象（HTML元素转成对象（js对象）） 使用js操作html文档，需要将HTML文档结构转成js对象 1.操作属性 2.操作内容： innerText（IE）textContent（非IE）； innerHTML（都可以） outerText
Javascript删除指定元素节点的方法
10-22
主要介绍了使用Javascript删除指定元素节点的方法,通俗易懂,需要的朋友可以参考下。
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
10-20
总的来说，JavaScript DOM节点操作是Web开发中不可或缺的一部分，无论是新建元素来增加页面内容，还是删除元素来实现动态更新，都体现了JavaScript在网页动态化方面的强大能力。在实际项目中，开发者还需要注意性能...
JavaScript DOM
尝胆的世界
03-07 1549
• DOM，全称Document Object Model文档对象模型。 • JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随 心所欲的操作WEB页面。 • 文档 – 文档表示的就是整个的HTML网页文档 • 对象 – 对象表示将网页中的每一个部分都转换为了一个对象。 • 模型 – 使用模型来表示对象之间的关系，这样方便我们获取对象 • 节点：N...
JavaScript操作DOM常用的API
weixin_33725807的博客
05-10 128
1 什么是DOM 文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。 文档对象模型 (DOM) 是对HTML文件的另一种展示，通俗地说，一个HTML 文件，我们可以用编辑器以代码的形式展示它，也可以用浏览器以页面的形式展示它，同一份文件通过不同的展示方式，就有了不一样的表现形式。...
Javascript之dom
weixin_51767056的博客
09-03 1044
文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式。element . 属性例如：div . idelement . getAttribute('属性') //自己定义的
JavaScript之DOM
qq_43751200的博客
06-05 1750
DOM
JavaScript中DOM
weixin_43466575的博客
04-05 198
1、DOM对象介绍 （1）什么是DOM DOM：Document Object Model，文档对象模型。 作用：是一套规范文档内容的通用型标准。 （2）DOM HTML节点树 DOM HTML指的是DOM中为操作HTML文档提供的属性和方法。 文档（Document）表示HTML文件。 文档中的标签称为元素（Element）。 文档中的所有内容称为节点（Node）。 因此，一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分 。 <!DOCTYPE html> &lt
JavaScript中的DOM
小罗的博客
07-31 871
文档对象模型（DocumentObjectModel，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。可以将页面所有内容表示为可以修改的对象浏览器会对我们编写的HTML、CSS进行渲染，同时它又要考虑我们可能会通过JavaScript来对其进行操作；于是浏览器讲文明编写在HTML中的每个元素(Element)都抽象成了一个个对象所有这些对都可以通过JavaScript来对其进行访问，那么我们就可以通过JavaScript来操作页面。...
JavaScript的DOM
rbx508780的博客
10-13 729
JavaScript的DOM ---DOM是Document Object Model的缩写，意思是『文档对象模型』——将HTML文档抽象成模型，再封装成对象方便用程序操作。
JavaScriptDOM（一）
hjx990101的博客
08-18 309
HTML DOM 简介 文档对象模型（Document Object Model，简称DOM），；是 HTML 和 XML 文档的编程接口。 DOM 以树结构表达 HTML 文档。 W3C DOM 标准被分为 3 个不同的部分： 核心 DOM - 针对任何结构化文档的标准模型； XML DOM - 针对 XML 文档的标准模型； HTML DOM - 针对 HTML 文档的标准模型； 重点解释HT...
DOM基本概念
学无止境
10-30 929
DOM的基本概念
js获取dom元素的子节点
04-25
你可以使用JavaScript中的childNodes属性来获取一个DOM元素的所有子节点。这个属性返回的是一个包含所有子节点的数组，并且其中包含了所有的类型的节点，包括元素节点、文本节点和注释节点。如果你只想获取元素节点...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

薯片

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值