脚本化文档（又是美妙的一天）

DOM概述

文档对象模型（DOM）是表示和操作HTML和XML文档内容的基础API。HTML文档的树状结构包含表示HTML标签或元素和表示文本字符串的节点，它也可能包含表示HTML注释的节点。
在这里插入图片描述
下图展示了Node及其在类型层次结构中的子类型。

##选取文档元素
大多数客户端JavaScript程序运行时总是在操作一个或者多个文档元素。当程序启动时，可以使用全局变量document来引用Document对象。但为了操作文档中的元素，必须通过某种方式获得或选取这些引用文档元素的Element对象。有五种方式。

通过ID选取元素

任何HTML元素可以有一个id属性，在文档中该值必须唯一，即同一个文档中的两个元素不能有相同的ID。可以通过Document对象的getElementById()方法选取一个基于唯一ID的元素。

var section=doucment.getElementById("section");

通过名字选取元素

HTML的name属性最初打算为表单元素分配名字，在表单数据提交到服务器时使用该属性的值。和id不一样的是name属性只是少数HTML元素中有效，包括表单、表单元素、<iframe>和<img>元素;name属性的值不不必唯一。

var radioButtons=document.getElementByName("favorite_color");

通过标签名选取元素

Document对象的getElementsByTagName()方法可用来选取指定类型（标签名）的所有HTML或XML元素。

var spans=document.getElementByTagName("span");

通过CSS类选取元素

HTML元素的class属性值是一个以空格隔开的列表，可以为空或包含多个标识符。HTML定义了getElementsByClassName()方法，它基于其class属性值中的标识符来选取成组的文档元素。

var log=document.getElementsByClassName("log");

通过CSS选择器选取元素

与Css选择器相关的获取匹配一个给定选择器的元素的JavaScript方法是Document方法querySelectedorAll().他接受包含一个CSS选择器的字符串参数，返回一个表示文档中匹配选择器的所有元素的NodeList对象。文档对象中还定义了 querySelector()方法，它只返回第一个匹配的元素或者没有返回null.

//dom
<div id = 'box><div class = 'inner-box'></div><p class = 'inner-box'></p><div class = 'inner-box' id = 'operate-dom'></div>
</div>//getDom    ------querySelector
var getDom = document.querySelector('#box');

文档结构和遍历

一旦从文档中选取了一个元素，有时需要查找文档中与之在结构上相关的部分（父亲，兄弟和子女）。

作为节点树的文档

Document对象、它的Element对象和文档中表示文本的Text对象都是Node对象。Node对象有以下属性。
在这里插入图片描述

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>document.childNodes[0].childNodes[1];document.firstChild.firstChild.nextSibling;//nodeType为1，nodeName为“BODY"</script>
</head>
<body></body>
</html>

作为元素树的文档

将主要的兴趣点集中·在文档中的元素上而非它们之间的文本上时，我们可以使用一个更有用的API。它将文档看作成Element对象树，忽略部分文档：Text和Comment节点。
该API的第一部分时Element对象的children属性，类似于ChildNodes,它是一个NodeList对象，但不同的是children列表只包含Element对象。。第二部分是Element属性，后者有类似Node对象的子属性：
在这里插入图片描述

属性

HTML元素有一个标签和一组称为属性的名/值对组成。如，<a>元素定义一个超链接，它的href属性值作为链接的目的地址。HTML元素的属性值在代表这些元素的HTMLElement对象的属性中是可用的。

HTML属性作为Element属性

表示HTML文档元素的HTMLElement对象定义了读/写属性，它们映射了元素的HTML属性。例如，查询一张图片的URL，可以使用表示<img>元素的HTMLElement对象的src属性。
HTML属性名不分大小写，但JavaScript属性名大小写敏感，从HTML属性名转换到JavaScript属性名应该采取小写。

var image=document.getElementById("myImage");
var imgUrl=image.src;//src属性是图片的url
image.id==="myImage"//=>判断要查找的图片的id

获取和设置非标准HTML属性

Element类型还定义了getAttribute()和setAttribute()方法来查询和设置非标准的HTML属性，也可以用来查询和设置XML文档中元素上的属性。hasAttribute()和removeAttribute(),它们用来检测命名属性是否存在和完全删除属性。

var image=document.images[0];
var width=parsentInt(image.getAttribute("WIDTH");
image.setAttribute("class","thumbnail");

数据集属性

Element对象还定义了dataset属性。该属性指代一个对象，它的各个属性对应去掉前缀的data-属性。因此dataset.x应该保存data-x属性的值。

<span class="sparkline" data-ymin="0" data-ymax="10"
123445666778
<span>

作为Attr节点的属性

Node类型定义了attributes属性，针对Element对象的任何节点，该属性为null。对于Element对象，attributes属性是只读的类数组对象，他代表元素的所有属性。

document.body.attributes[0]//<body>元素的第一个属性

元素的内容

作为HTML的元素内容

读取Element的innerHTML属性作为字符串标记返回那个元素的内容（内嵌内容包括文本左右空格）。HTML5还标准化了outerHTMl属性，当查询outerHTML时，返回的HTML或XML标记的字符串包含被查询元素的开头和结尾标签。insertAdjancentHTML()方法，它将任意的HTML标记字符串插入到指定的元素“相邻”的位置（第一个参数为”beforebegin",“afterbegin”.“beforeend”,“aferend”,第二个参数是要插入的字符）。

  var text = document.getElementById("text");alert(text.innerHTML.length);alert(text.outerHTML);text.insertAdjacentHTML("afterbegin", "082");

作为纯文本的元素内容

有时需要查询纯文本形式的元素内容，或者在文档中插入纯文本（不必转义HTML标记使用的尖括号和&符号），可以用Node的textContent属性和innerText数学来实现。

var para=document.getElementByTagName("p")[0];
var text=para.textContent;
para.textContent="ai ni";

作为Text节点的元素内容

另一种方法处理元素的内容来是当做一个子节点列表，每个子节点可能有他自己的一组子节点。

创建和插入文本

创建节点

 let jiText = document.createTextNode("吉林");//创建文本节点let ji = document.createElement("li");//创建Element节点，使用Document对象的createElement()方法。给方法传递元素的标签名。ji.append(jiText);

插入节点

**appendChild()**是在需要插入的Element节点上调用的，它插入指定的节点使其成为那个节点的最后一个子节点。**insertBefort()**也是在需要插入的Element节点上调用的，第一个参数就是待插入的节点，第二个参数是已存在的节点，新节点将插入该节点的前面。

 ji.appendChild(jiText);ul.insertBefore(ji, bj);

删除和替换节点

**removeChild()**方法是从文档树中删除一个节点。**replaceChild()**方法删除一个子节点并用一个新节点取而代之。

 parent.removeChild(bj);parent.replaceChild(fu, bj);

文档和元素的几何形状和滚动

当浏览器在窗口中渲染文档是，它创建的一个视觉表示层，在那里每个元素有自己的位置和尺寸。

文档坐标和视口坐标

元素的位置是以像素来度量的，向右代表X坐标的增加，向下代表Y坐标的增加。但是有两个不同的点作为坐标系的原点：元素的X和Y坐标可以相对于文档的左上角或者相对于在其中显示文档的视口的左上角

查询元素的几何尺寸

判断一个元素的尺寸和位置最简单的方法是调用它的getBoundingClientRect()方法。它不需要参数，返回一个有left,right,top和bottom属性的对象。这个方法返回元素在视口坐标中的位置。当查询内联元素每个独立的矩形，调用getClientRects()方法来获得一个只读的类数组对象。

判断元素在某点

判定在视口中的指定位置上有什么元素，可以用Document对象的elementFromPoint()方法来判定。通过传递X和Y坐标，来返回指定位置的一个元素

滚动

Windo的scrollBy()方法和scroll()和scroll类似，但它们的参数是相对的，并在当前的滚动条的偏移量上增加。

         scrollTo(0,document.documentElement.offsetHeight - window.innerHeight);

关于元素尺寸，位置和溢出更多信息

元素的尺寸获取比较简单：任何HTML元素的只读属性offsetWidth和offsetHeight以及CSS像素返回它的屏幕尺寸，返回尺寸包括元素的边框和内边距，除去外边距。
所有HTML元素拥有offsetLeft和offsetTop属性来返回元素的X和Y坐标。对于很多的元素，这些值文档坐标，并直接指定元素的位置。但对于已定位元素的后代元素和一些其他元素（如表格元素），这些属性返回的坐标是相对祖先元素而非文档。

//通过循环offsetParent对象链来累计偏移量，来计算指定元素的文档坐标
function getElementPosition(e){
var x=0,y=0;
while(e!=null){
x+=e.offsetLeft;
y+=e.offsetTop;
e=e.offsetparent;
}
return {x:x,y:y};
}

clientWidth和clientHeight类似offsetWidth和offsetHeight,不同的是它们不包含边框大小，只包含内容和它的内边距。
注意： 对于类似<i>,<code>,<span>这些内联元素，clientWidth和clientHeight总返回0.
clientLeft和clientTop没什么用：它们返回元素的内边距的外边缘和它的边框的外边缘之间的水平距离和垂直距离，通常这些值就等于左边和上边的边框宽度。
scrollLeft和scrollTop指定元素的滚动条的位置。scrollLeft和scrollTop是可写的属性，通过设置它们来让元素中的内容滚动。

HTML表单

选取表单和表单元素

表单和它们所包含的元素可以用如getElementById()和getElementByTagName()等标准的方法从文档中选取：

var fields=document.getElementById("adress").getElemetByTagName("input");

在支持querySelectorAll()的浏览器中从一个表单中获取所有的单选按钮或所有同名的元素的代码如下：

//id为"shipping"的表单中所有的单选按钮
document.querySelectorAll('#shipping input[type="radio"]');
//id为"shipping"的 表单中所有名字为"method"的单选按钮

name="adress"属性的<form>可以用以下任何方法获取：

window.address  //不可靠：不要使用
document.address//仅表单有name属性时可用
document.forms.address //显示访问有name或id的表单
document.forms[n] //不可靠：n是表单序号

表单和元素的属性

所有表单通常都有以下属性。
在这里插入图片描述

表单和元素的事件处理程序

每个Form元素都有一个onsubmit事件处理程序来侦测表单的提交，还有一个onreset事件处理程序来侦测表单的重置。

按纽

按钮元素本身没有什么默认行为，除非他有onclick事件处理程序，否则他并没有什么用处。

开关按钮

单选按钮和复选框都定义了checked属性。该属性是可读/可写的布尔值，指定了元素当前是否可选。

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

L1-056 猜数字 (20分)（C语言）
L1-056 猜数字 (20分) 一群人坐在一起，每人猜一个 100 以内的数，谁的数字最接近大家平均数的一半就赢。本题就要求你找出其中的赢家。输入格式：输入在第一行给出一个正整数N（≤10 4 ）。随后 N 行，每行给出一个玩家的名字（由不超过8个英文字母组成的字符串）和其…...
2024/4/29 2:46:02
LeetCode-Algorithms-[Mid][高频题]173. 二叉搜索树迭代器
实现一个二叉搜索树迭代器。你将使用二叉搜索树的根节点初始化迭代器。调用 next() 将返回二叉搜索树中的下一个最小的数。示例：BSTIterator iterator = new BSTIterator(root); iterator.next(); // 返回 3 iterator.next(); // 返回 7 iterator.hasNext(); // 返回 …...
2024/5/3 16:21:54
LeetCode 312. 戳气球 (区间DP、记忆化搜索)
戳气球这道区间DP题的特点是，每次戳一个气球，其他的气球的相邻关系就会发生变化，不方便之后的处理。逆向思考：一共有n个位置，从最后的状态开始一个位置一个位置放气球，直至放满。这样的话，每次放气球的时候它的左右相邻气球实质就是区间的左右端点（当然它们一开始并不…...
2024/5/2 3:15:44
表格操作系列——在配置文件中获取变量初始值
表格操作系列三、在配置表中获取变量初始值在程序启动时，需要初始化一些参数，或是在执行过程中，取得一些变量或是字段的配置参数。这些数据可能存储在某一个表中，为了能够方便的获取这些数据，编制了下面的这个函数，可以很方便的取得初始值。函数代码 Public Function …...
2024/5/4 20:10:45
pytorch学习笔记（三十七）：Adam
文章目录Adam算法1. 算法2. 从零开始实现3. 简洁实现小结 Adam算法 Adam算法在RMSProp算法基础上对小批量随机梯度也做了指数加权移动平均 [1]。下面我们来介绍这个算法。所以Adam算法可以看做是RMSProp算法与动量法的结合。1. 算法 Adam算法使用了动量变量vt\boldsymbol{v}_tv…...
2024/5/4 20:11:01
VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案
文章目录1.下载安装Hbuilder-x2.新建VUE模板项目3.选定VUE项目（非JS引入）4.建好后5.下载Nodd.js文件环境6.安装Node.js7.配置整合Hbuilder-x和NPM7.1.配置7.2.检测7.3.工程中安装NPM7.4.手动控制台安装8.安装并引入router8.1.创建router8.1 vue-router使用8.1.1.定义路由器8.…...
2024/5/4 20:10:43
企业编程题实战（一）
1、小v今年有n门课，每门都有考试，为了拿到奖学金，小v必须让自己的平均成绩至少为avg。每门课由平时成绩和考试成绩组成，满分为r。现在他知道每门课的平时成绩为ai ,若想让这门课的考试成绩多拿一分的话，小v要花bi 的时间复习，不复习的话当然就是0分。同时我们显然可以发现…...
2024/5/1 22:27:36
易点易动助力企业告别固定资产管理难的时代
随着企业发展范围的扩大，固定资产的数量像滚雪球一样越来越多。越来越多企业面临着固定资产管理难的困境：固定资产的价值高，存放地点相对分散，使用周期长。还有很多企业面临着固定资产管理的各种挑战：账实不符，账、物、卡不统一。这样就导致家底不清，固定资产管理不明朗…...
2024/5/1 8:27:37
Lambda表达式的使用-Java8新特性
Lambda表达式的使用 1.举例：(o1,o2) -> Interger(o1,o2); 中间的"->"是lambda操作符 2.格式： -> : lambda操作符或箭头操作符 ->左边 : 形参列表 (其实就是接口中的抽象方法的形参列表) ->右边 : lambda体 (其实就是重写的抽象方法的方法体) 3.…...
2024/4/29 8:00:52
kafka的消息分区分配机制之 Producer
后续会补上~...
2024/5/4 20:10:28
扫码直购区块链新零售模式:帮助企业智能化运营,实现消费者与企业的精准链接
在新零售时代，就需要借助智能信息化市场的变化，根据消费者需求升级，满足消费者信息获取慵懒化，给商家带来更多切入市场的机会。购物模式的变革随着时代的发展，购物模式的变革，如今的购物消费从原来的现金结算，银行转账，已经变成一种新型且流行的结算方式。而商品也从…...
2024/5/2 13:45:41
剑指offer20 表示数字的字符串
剑指offer20 之前做的时候思路比较乱，重新总结一波；按题目要求，字符串表示为数字有以下几个规则： 1.首尾的空格必须去掉，不影响结果； 2.+或者- 必须出现在第一位，或者e/E的后面一位； 3.e和. 只能出现一次; 4.e/E 后面必须有数字； 5. .面不能有e/E; 不满足以上条件的就…...
2024/5/2 20:39:59
线程的同步
线程的同步 1.背景2.同步代码块和同步方法package com.atguigu.java;/*** 例子：创建三个窗口卖票，总票数为100张.使用实现Runnable接口的方式** 1.问题：卖票过程中，出现了重票、错票 -->出现了线程的安全问题* 2.问题出现的原因：当某个线程操作车票的过程中，尚未操作完…...
2024/5/1 15:08:32
vue项目微信端清理缓存问题解决
vue项目微信端清理缓存问题解决参考文章：（1）vue项目微信端清理缓存问题解决（2）http://www.cnblogs.com/sakura-lifangfang/p/9660550.html 备忘一下。...
2024/5/2 22:22:48
PHP字符串函数parse_str(将字符串解析成多个变量)
在PHP中，字符串函数 parse_str() 将字符串解析成多个变量。函数语法：parse_str ( string $encoded_string [, array &$result ] ) : void函数参数说明：参数描述encoded_string必需。规定要解析的字符串。result可选。规定存储变量的数组名称。该参数指示变量存储到数组中…...
2024/5/2 18:33:18
Scrum板与Kanban如何抉Scrum团队在一个Sprint中的
这些常见的白板概念应用于各种敏捷团队，它们都通过可视化的任务、透明化的工作状态来激励团队成员工作、提高工作专注力及效率。那这两者有什么关联？ Scrum板与看板在功能上有颇多相似之处： 1.标注团队成员的专属个人信息大卫安德森将看板划分为五个部分，这些标注着任务…...
2024/5/4 17:07:34
系统思考启发
近来读完丹尼斯舍伍德的《系统思考》，感触较大的三点：闭环思维：系统思维的基础之一就是要有反馈，要形成闭环。这对于任何岗位的人来说，都是必备的，也如常常在讲的：事事有着落，件件有回音，也是这个道理因果链：系统思维的另一个基础是因果链，讲究因果性，和大数据崇尚…...
2024/5/4 23:06:34
JAVA API学习记录——String和StringBuffer类
JAVA API学习String类用于封装字符串在使用String类之前需要先对String类进行初始化1.使用字符串常量直接初始化一个String对象String str1 = "abc";2.使用String的构造方法初始化字符串对象String类常用方法注：String字符串在获取某个字符时，会用到字符的索引，当…...
2024/4/29 8:00:20
C++ 中 string转 char *
前提 m_strPath 按照下面方法，使用string转 char * 转化时程序崩溃 char *cchar = new char[1024]; strcpy_s(cchar,m_strPath.length(), m_strPath.c_str()); //正确解决办法： char *cchar = new char[1024]; cchar = (char*)m_strPath.c_str(); 参考文章 https://blog.…...
2024/5/4 9:10:01
银行家算法python实现Dijkstra
银行家算法python实现Dijkstra 题目要求假定系统有3类资源A（10个）、B（15个）、C（12个），系有5个进程并发执行，进程调度采用时间片轮转调度算法。每个进程由一个进程控制块（ PCB）表示，进程控制块可以包含如下信息：进程名、需要的资源总数、已分配的资源数、进程状态。…...
2024/4/29 8:00:09