JS DOM

最新推荐文章于 2022-12-27 22:06:59 发布

怖呆

最新推荐文章于 2022-12-27 22:06:59 发布

阅读量212

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/u012733415/article/details/51074698

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

DOM 文档对象模型，JS 有一整套的函数对DOM 的节点进行操作。

Node 和 Element

Node(节点)是DOM 对象重要的部分，很多人都容易混淆这两个东西，但是一旦理解后，就会DOM 对象有了更深的一层了解。

Element 元素，它就是一个标签。就比如

<div id='box'>this is div</div>

而Node 是什么呢？上面的这个Element 的id 属性就是一个节点，this is div 这个文本也是一个节点，而这个标签本身也是一个节点。其实注释也是节点，节点的类型很多。以下是参考表。
这里写图片描述

获取DOM 对象

一个栗子

<!DOCTYPE html>
<html>
<head>
    <title>DOM</title>
</head>
<body>

<div id="box">
    <div name="child"></div>
</div>

</body>
</html>

document.getElementById('box') 根据一个元素的id 属性获取一个对象(此函数非document专有)
document.getElementsByTagName('div')[0]根据一个元素的标签名称获取一个数组，通过索引获取具体的对象(此函数非document专有)
document.getElementsByName('name')[0]根据一个元素的name 属性获取一个数组，通过索引获取具体的对象(此函数非document专有)
document.createElement('h1') 创建一个h1 标签，然后返回对象
document.createTextNode('this is InnerHtml') 创建一个文本节点，可以追加到一个对象的子节点

操作Element 类型的节点

获取一个box对象的父级节点

var box = document.getElementById('box');
var boxParent = box.parentElement;

为box 添加个同级元素div(引用boxParent)

var div = document.createElement('div');
div.appendChild(document.createTextNode('this is new div'));
boxParent.appendChild(div)

以上的操作可以将网页变成如下代码

<!DOCTYPE html>
<html>
<head>
    <title>DOM</title>
</head>
<body>

<div id="box">
    <div name="child"></div>
</div>

<div>
    this is new div
</div>

</body>
</html>

操作Attr 类型节点

Attr 节点的修改(也可称为添加)/删除/获取

var box = document.getElementById('box');
box.setAttribute('name','username');
box.getAttribute('name');
box.removeAttribute('name');

Node

获取一个节点名称

document.nodeName

获取一个节点类型

document.nodeType

节点类型会返回一个数字，下图是这些数字代表的类型
这里写图片描述

怖呆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS DOM

DOM 文档对象模型，JS 有一整套的函数对DOM 的节点进行操作。Node 和 ElementNode(节点)是DOM 对象重要的部分，很多人都容易混淆这两个东西，但是一旦理解后，就会DOM 对象有了更深的一层了解。Element 元素，它就是一个标签。就比如<div id='box'>this is div</div>而Node 是什么呢？上面的这个Element 的id 属性就是一个节点，th
复制链接

扫一扫