html dom中windows对象的4个常用子对象

嘿，我是一个老人，正在跟你谈论这个网站。

我记得有一年，我正在帮助一个年轻人建立一个网站，他每天都在谈论文档、元素和属性。
起初我很困惑。

我后来告诉他，你看，Document对象就是整个网页。
那时候，我们经常使用IE。
当我们打开一个网页时，浏览器就创建了一个Document对象，你可以通过编写JS来操作整个页面。
例如，如果您想更改标题，只需使用 document.title = 'New Title' 即可。
简单粗暴。

元素对象就像网页上的框。
想一想，一个网站有什么？标题、段落、图像，这些都是元素。
那年我在北京的时候，有一个客户正在做一个旅游网站。
他的网站有很多元素，数百个标签。
如果你想操作某个盒子，比如把图片变小，你必须先找到它，document.getElementById('myImage')，获取对象，然后改变它的类型。

属性对象是标签上的东西，比如src、id，就是属性。
那一年我在上海工作。
客户说所有图片的alt属性都应该添加到描述中。
我编写了一个循环来更改所有 img 标签的每个属性。

NamedNodeMap，我不太明白这个。
年轻人说这是一个集合，你可以通过名称或索引找到属性。
反正我当时用的不多，觉得很复杂。

最实用的是Event对象。
那年我在广州，有一个网站需要添加点击事件。
当用户单击该按钮时，会弹出一个窗口。
我只是使用 element.onclick = function() { notification('Click me!'); }， 就是这样。
事件是用户与网站交互时的感受，例如单击、拖动和键入。
这是所有事件。
请记住，该函数不会在事件发生之前执行。
这非常重要。
当时我差点为此惹上麻烦。

简单来说，文档、元素、属性、事件都是网页的组件，都可以使用JS来操作。
我在教那个年轻人的时候，就从这些基础开始，逐渐让他明白了JS是如何控制网页的。

为什么我的 HTML 页面一直刷新？

啊...当时...2 02 2 年...在北京...发现了奇怪的情况...页面刷新...刷新...不断...检查了半天...发现变量名不一致...location对象重新赋值...海页面重新加载重新加载...
工具发生了什么...JavaScript中...例如使用var声明直接在[xss_clean]标签中声明...变量会间接设置在globalThis对象...在浏览器中；它是一个window对象...代码中的location = _window.location;...在var中其实相当于_window.location = _window.location;...设置的值是它自己...但是浏览器会知道Location对象在页面刷新时已经触发了赋值
...刷新...因为_window.location是浏览器提供的一个BOM对象...用来获取或设置当前页面的URL...当直接给location赋值时...如果赋值的是当前的URL...浏览器会认为用户想去一个新页面...所以当前页面正在刷新...导致无限刷新循环...

后来我尝试了很多解决方案。
let 或 const... 例如 const location = _window.location;... 这样变量将不会被设置为 globalThis 对象... 它不会覆盖 _window.location... 它不会触发刷新...
方法 2 ... 立即使用 IIFE 调用函数表达式... 隔离范围... 例如(function(){var location = _window.location;})();...这样，变量只在函数内部有效...并且不会污染全局作用域...
方法3 ...避免使用BOM对象名作为变量名...最安全的方法是直接使用_window.location...使其成为冲突变量。
可选变量as...当前位置...
主要知识点...是var的隐式全局安装...顶层var声明会成为window对象的一个​​属性...这会导致意外覆盖。
..位置特异性...修改_window.location会触发页面导航...作用域隔离...使用块级作用域或函数作用域避免全局污染...
扩展建议...建议学习JavaScript作用域链和变量提升机制...理解var、let、const之间的区别...引用单词为Bront-endable void开发参数。
名字...例如名称历史记录等...
调整后...无休止的页面刷新问题彻底解决...

网页video标签循环播放反复请求资源，如何解决？

方法一：浏览器缓存。
设置缓存控制：最大年龄=3 1 5 3 6 000。
视频文件路径不能带参数。
第一次加载后，循环直接使用缓存。

方法二：客户端存储。
使用 fetch 获取视频，将其转换为 Blob 并将其另存为 URL。
使用此 URL 进行循环。
大文件占用大量内存。
谨防 CORS 问题。

方法三：代码问题。
检查循环冲突和 JS 循环。
使用 DevTools Chrome 网络面板查看请求。
不要在结束事件中重置 src。

建议：preload=auto，先加载视频。

选择方法一。
用于调试的浏览器工具。
IE不支持方法二。