第14章DOM笔记2

最新推荐文章于 2024-02-20 22:27:54 发布

-sinsuke-

最新推荐文章于 2024-02-20 22:27:54 发布

阅读量86

点赞数

本文链接：https://blog.csdn.net/xiaozong301/article/details/119046204

版权

文章目录

DOM
MutationObserver接口

DOM

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。也就是说把文档编译成了一个对象模型，例如我们写的html文件实际上是一个文档文件，通过我们的浏览器把它编译成了一个对象模型，这个模型就是document对象。
DOM 以树结构表达 HTML 文档。就好像是一个家族谱，有父级元素也有对应的子级元素，那么document对象就是我们最大的父级元素。

节点的分类：元素节点属性节点文本节点
节点操作：
通过元素的id来获取相应的节点

document.getElementById("");

通过元素的标签名来获取节点

document.getElementsByTagName("");

通过元素的类名来获取节点

document.getElementsByClassName("");

通过元素的name属性来获取节点

document.getElementsByName("");

获取元素的所有子节点

node.childNodes;

创建元素节点

document.createElement("tagName");

往父节点最后添加子节点

fatherNode.append(childNode);

删除元素节点

fatherNode.removeChild(childNode);

替换节点

fatherNode.replaceChidl(newNode,oldNode);

注意：除了通过id选择节点的方式拿到的是一个确定的节点，其余的方式拿到的都会是一个数组，那么获取数组里面对应的节点需要用索引来取并且在Elements后面有s
例如：var body = document.ElementsByTagName("body")[0]
("fatherNode"表示父节点，"childNode"表示子节点)

属性节点操作
添加属性节点

node.setAttribute('attr',"attrValue");

删除属性节点

div.removeAttribute("attr");

修改属性节点

div.setAttribute("attr","new");

获取属性节点

div.getAttribute("style");

文本节点操作
创建文本节点

var textNode = document.createTextNode("hello");

获取文本节点

var textNode = div.childNodes[0];

删除起始位置开始的num个值

textNode.deleteData(starNum,num);

尾部添加内容

textNode.appendData("后面哦");

中间插入内容

te.insertData(1,"中间哦");

innerHTML 和 innerText的区别
innerHTML

<body>
    <div id="div"></div>
    <script type="text/javascript">
        var div = document.getElementById("div");
        div.innerHTML = "<h1>hello</h1>";
    </script>
</body>

呈现出来为hello
innerText

<body>
    <div id="div"></div>
    <script type="text/javascript">
        var div = document.getElementById("div");
        div.innerText = "<h1>hello</h1>";
    </script>
</body>

呈现出来为：在这里插入图片描述

MutationObserver接口

相关概述
 具体实操

-sinsuke-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第14章DOM笔记2

文章目录DOMMutationObserver接口DOMDOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。也就是说把文档编译成了一个对象模型，例如我们写的html文件实际上是一个文档文件，通过我们的浏览器把它编译成了一个对象模型，这个模型就是document对象。DOM 以树结构表达 HTML 文档。就好像是一个家族谱，有父级元素也有对应的子级元素，那么document对象就是我们最大的父级元素。节点的分类：元素节点属性节点文本节
复制链接

扫一扫