JavaScript - DOM - Document对象

最新推荐文章于 2024-05-03 11:47:20 发布
最新推荐文章于 2024-05-03 11:47:20 发布
阅读量77 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000016171477
版权

如何在HTML使用JavaScript

<script>元素用于在HTML中引用或嵌套JavaScript脚本代码，该元素默认被定义在<head>元素中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script> </script>元素
         作用 - 引入脚本语言
         属性
           src - 指定js文件路径
           type=''text/javascript -（新）表示当前使用的是js语言
           language=''javascript - (旧) 表示当前使用的是js语言
      -->
    <script src="js.js" type="text/javascript" language="JavaScript">
        //浏览器加载完毕在执行指定代码
        window.onload = function () {
            //js编码写在这里
        }
    </script>
</head>
<body>
<button id="btn">按钮</button>
<!--考虑到代码执行的顺序，js代码写到HTML后面
     也可以使用windon.onload  解决顺序问题
     js语言写在HTML页面，没有实现有效分离-->
<script>console.log('这是一段js代码')</script>
</body>
</html>

DOM

DOM是什么

  • DOM是Document Object Model的缩写，译为文档对象模型
  • DOM是一个独立于任何语言和平台的接口，允许任何语言或者脚本动态的访问和更新HTML文档的内容、- 结构和样式。该HTML页面会进一步处理，并且该处理的结果可以被合并到呈现的HTML页面中。
  • DOM被设计用于解析HTML页面文档，方便JavaScript语言通过DOM访问和操作HTML页面中的内容。

Document对象

Document对象是什么

Document对象时DOM中标准规范中比较重要的对象之一，该对象提供了访问和更新HTML页面内容的属性和方法。Document对象提供的属性和方法，可以实现定位HTML页面中的元素，或者创建新的元素等功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*   documeng对象
    *  DOM预定义 - 可以直接使用
    *  得到的是HTML页面的源代码，该对象代表HTML页面*/
    console.log(document);
    /*确认document是一个对象*/
    console.log(document instanceof Object);//true
    /*document对象的属性和方法被定义在原型上*/
    console.log(Document.prototype);
    //不需要再创建
    var document = new Document();
    console.log(document);
</script>
</body>
</html>

document对象的继承链

Document对象是继承于Node对象的，Node对象也是DOM标准规范中非常重要而的对象之一，Node对象又是继承于EventTarge对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //document对象时继承与Node的
    console.log(document.prototype instanceof Node);//true
    //Node对象是继承于EventTarget
    console.log(Node.prototype instanceof EventTarget);//true
    //document继承于EventTarget
    console.log(document.prototype instanceof EventTarget);//true
</script>
</body>
</html>

定位页面元素

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

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

getElementById()方法

由于id属性是唯一的，所以通过这种方法定位的HTML元素也是唯一的

<body>
<button id="btn">按钮</button>
<script>
    //使用getElementById()方法定位元素
    var button = document.getElementById('btn');
    //DOM无论是使用的还是得到的都应该是对象
    console.log(button instanceof Object);//true
    /* DOM提供了一系列对象 - 对应HTML的每一个元素
    *  <button>具有 HTMLButtonElementd 对象
    *  元素的对象名格式  HTML元素名Element
    *  <div>具有 HTMLDivElement对象*/
</script>
</body>

getElementsByName()方法

<body>
<button name="btn">按钮</button>
<button name="btn">按钮</button>
<button name="btn">按钮</button>
<script>
    //通过getElementByName()方法定位元素
    //name属性不唯一，得到的结果可能是多个，也可能是一个
    var buttonElements = document.getElementsByName('btn');
    /*  NodeList集合 - 类数组对象
    *   通过索引值得到每一个元素*/
    console.log(buttonElements[0]);
    console.log(buttonElements instanceof NodeList);//true
</script>
</body>

getElementsByGayName()方法

<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
    //通过getElementsByTagNamr()方法定位元素
    var buttonElements = document.getElementsByTagName('button');
    //HTMLCollection集合 - 类数组对象
    console.log(buttonElements[0])
    console.log(buttonElements instanceof HTMLCollection);//true
</script>
</body>

getElementsByClassName()方法

<body>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
    var buttonElements = document.getElementsByClassName('btns');
    //HTMLCollection集合 - 类数组对象
    console.log(buttonElements[1]);
</script>
</body>

CSS选择器定位元素

<body>
<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('.btns');
    console.log(buttonElement1);
    //该方法返回的是所有匹配元素的集合 - NodeList集合
    //多个选择器之间用逗号分隔
    var buttonElement2 = document.querySelectorAll('.btns');
    console.log(buttonElement2);
</script>
</body>

节点集合NodeList

NodeList是一组元素节点的集合，每个节点具有索引值（从0开始，类似于数组），分为动态和静态两种

  • 动态NodeList：如果文档中的节点树发生变化，则已存在的NodeList对象也发生变变化

getElementsByByName
getElementsByTagName
getElementsByClassName

  • 静态NodeList：文档对象模型的任何改变都不会影响集合的内容
<body>
<button class="btns" id="btn"></button>
<button class="btns"></button>
<button class="btns"></button>
<button class="btns"></button>
<script>
   /* //动态集合
    var buttonElents = document.getElementsByClassName('btns');
    //集合的长度
    console.log(buttonElents.length);//4
    //删除集合中一个元素
    var btn = document.getElementById('btn');//定位一个元素
    document.body.removeChild(btn);//删除定位的元素
    console.log(buttonElents.length);//3*/

    //静态集合
    var btnElement = document.querySelectorAll('.btns');
    //结合的长度
    console.log(btnElement.length);//4
    //删除集合中的一个元素
   var btn = document.getElementById('btn');//定位一个元素
   document.body.removeChild(btn);//删除定位的元素
   console.log(btnElement.length);//4*/
</script>
</body>

定位页面的元素属性

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

<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>

创建也变元素

创建元素节点

Document对象提供了createElement()方法创建元素节点

<body>
<script>
    // 1.创建<button></button>元素
    var btn = document.createElement('button');
    // 2.获取<body>元素
    var body = document.body;
    // 3.向<body>元素添加子节点
    body.appendChild(btn);

</script>
</body>

创建文本节点

Document对象提供了createTextNode()方法创建文本节点

<body>
<script>
    // 1.创建<button></button>元素节点
    var btn = document.createElement('button');

    // 2.创建文本节点
    var textNode = document.createTextNode('按钮');
    // 3.向<button>元素添加子节点
    btn.appendChild(textNode);

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

</script>
</body>

创建属性节点

Document对象提供了createAtrribute()方法创建属性节点

<body>
<script>
    // 1.创建<button></button>元素节点
    var btn = document.createElement('button');

    // 2.创建文本节点
    var textNode = document.createTextNode('按钮');
    // 3.向<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>
weixin_33868027
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript(JS)的DOM对象(JS的Document对象)----什么是DOM对象?
No8g攻城狮的博客
04-02 6086
1、概念： Document Object Model 文档对象模型：将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD（增删改查）的动态操作。 通过 HTML DOM（如图所示），可访问 JavaScript HTML 文档的所有元素。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被...
解析XML出错，无法创建DOMDocument对象
weixin_34415923的博客
08-11 1498
【问题】 加载XML配置文件时，创建DOMDocument对象总是失败，创建代码如下： MSXML2::IXMLDOMDocumentPtr pXMLDoc; MSXML2::IXMLDOMElementPtr xmlRoot; //创建DOMDocument对象 HRESULT hr = pXMLDoc.CreateInstance(__uuidof(MSXML...
DOM-----document对象
Me丿以卿之名
06-06 341
Dom模型演示1---window对象中的document对象 ※※获取元素的3种方式： 1、getElementById(): 通过标签中的id属性值获来取该标签对象 2、getElementsByName(): 通过标签中的name属性值来获取该标签对象集合 3、getElementsByTagName(): 通过标签名来获取该标签对象集合 ※※所有节点(标签、属性、文本
HTML DOM Document对象
Focus-Fe
03-11 271
HTML DOM Document 对象      ----每次载入浏览器的HTML文档都会成为Document对象。     Document 对象集合      forms    -----   返回对文档中所有Form对象       Document 对象属性：           cookie   --------设置或返回与当前文档有关的所有cookie...
JavaScript总结：typeof与instanceof的区别，及Object.prototype.toString()方法
鄙人kunzhi96，感恩遇见！
03-09 1893
我前面的博客中介绍过基本数据类型和引用数据类型：基本类型是保存在栈内存中的简单数据段，也就是有单一字面量的值；引用数据类型指的是有多个值构成的对象。 typeof就是一个用来检测变量数据类型的操作符，主要用来检测基本数据类型。它可以判断一个变量是字符串、数值、布尔值还是undefined，但是如果检测的变量是引用数据类型，可以返回object或者function，但不能细致地分出是array还是R...
JavaScript-DOM-Exercises
03-18
DOM练习 练习解决如何应用DOM选择方法，事件侦听器和DOM修改方法的问题： document.querySelector document.querySelectorAll HTMLElement.classList HTMLElement.style HTMLElement.textNode 单击，更改，输入...
JavaScript驾驭网页－DOM
12-03
文档对象模型（Document Object Model） 二、DOM是什么 DOM就是一个编程接口，就是一套API。 DOM是针对HTML文档、XML等文档的一套API。就类似于JDBC是针对数据库的一套API一样。 三、DOM的用途 DOM 是用来访问或...
Javascript-DOM-API-cheatsheet
05-10
访问DOM元素DOM节点概述 // Returns a reference to the element by its ID.document . getElementById ( "someid" ) ;// Returns an array-like object of all child elements which have all of the given class ...
javascript-manipulation-of-the-dom-document-object-Model:Dom文档对象模型课程的Java语言操作
03-30
javascript-dom-dom-document对象模型的操作 Laurence Svekis对Dom文档对象模型课程的Java语言操作
jsx-dom:使用JSX创建DOM元素
04-30
jsx-dom 使用JSX创建DOM元素。 支持ES模块和TypeScript。 安装 npm install --save jsx-dom ...document . body . appendChild ( Hello World < / div > ) // Functional components // `defaultP
element-ui的bug记录
nick_zhang的博客
04-29 420
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 819
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
最新发布
XING的博客
05-03 673
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
bpmn-js推荐几款常用的插件
飞云先生
04-30 87
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
基于React实现B站评论区
stu_kk的博客
05-02 775
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
表格隔行变色
weixin_54339833的博客
05-02 276
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 1120
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
echarts+百度地图如何定义边界线
abc8002117034的博客
04-30 281
5.setOption里面的参数option.series是echarts散点图的配置项,option.bmap是百度地图的配置项，比如center是当前地图的中心点，zoom是缩放数值，roam是是否可以缩放，mapStyle是地图的样式。3.方法getCenterPoint是获取当前区域中心点的经纬度，我们将会在区域的中心点显示区域名称和具体数值。4.方法convertData返回的是地图上红色散点里面的数据，是对idata的数据格式做的一层转换。2.变量styleJson是地图的样式，可以去。
redux快速入门
qq_73270720的博客
04-29 317
简单的加减案例,学会redux快速入门
JavaScript-DOM之 querySelect() 和 querySelectAll()方法简述
09-01
querySelect() 和 querySelectAll() 是 JavaScript 中用于操作 DOM 的方法。 - querySelect() 方法返回文档中与指定选择器或选择器组匹配的第一个元素。如果没有匹配的元素，则返回 null。 - querySelectAll() 方法...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值