原生JAVASCRIPT让html节点完全加载完成后,执行DOM节点操作,给一个例子
时间: 2024-03-27 12:39:38 浏览: 25
可以使用以下代码,使用 `window.onload` 事件监听整个 HTML 页面加载完成后执行 DOM 操作:
```javascript
window.onload = function() {
// DOM 节点操作代码
}
```
此时,所有 HTML 元素和资源已经被完全加载,可以对页面中的 DOM 元素进行操作。
相关问题
js原生获取DOM节点的属性和设置属性
获取DOM节点的属性可以使用`getAttribute()`方法,例如:
```javascript
var element = document.getElementById("myElement");
var value = element.getAttribute("data-value"); // 获取data-value属性的值
```
设置DOM节点的属性可以使用`setAttribute()`方法,例如:
```javascript
var element = document.getElementById("myElement");
element.setAttribute("data-value", "123"); // 设置data-value属性的值为123
```
js原生把第一个孩子dom移动到最后一个
可以使用以下代码:
```javascript
const parent = document.getElementById('parent'); //获取父元素
const firstChild = parent.firstElementChild; //获取第一个子元素
const lastChild = parent.lastElementChild; //获取最后一个子元素
parent.removeChild(firstChild); //从父元素中移除第一个子元素
parent.insertBefore(firstChild, lastChild.nextSibling); //将移除的子元素插入到最后一个子元素之后
```
注意,这里使用了`firstElementChild`和`lastElementChild`方法来获取第一个子元素和最后一个子元素,而不是`firstChild`和`lastChild`属性。这是因为前者只会返回元素节点,而后者可能会返回文本节点等其他节点类型。在这里,我们只想要元素节点。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)