常见Dom操作有哪些？

最新推荐文章于 2023-03-30 16:50:06 发布

menggx1

最新推荐文章于 2023-03-30 16:50:06 发布

阅读量238

点赞数

分类专栏： it 文章标签： Dom

本文链接：https://blog.csdn.net/menggx1/article/details/80094964

版权

it 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

常见Dom操作有哪些？
it-修真院小课堂
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍
DOM（文档对象模型）是针对HTML 和XML 文档的一个API（应用程序编程接口）。
DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。
2.知识剖析
DOM是什么？
DOM 是 Document Object Model（文档对象模型）的缩写。DOM就是一个编程接口，就是一套API，是针对HTML文档、XML等文档的一套API。
DOM用来访问或操作HTML文档、XHTML文档、XML文档中的节点元素。JavaScript 可以通过 DOM 来访问和操作HTML文档所有的元素。JavaScript是一种脚本语言，DOM是用来获得和操作HTML文档的节点属性。JavaScript通常是通过DOM来获得和操作HTML属性的。
什么是DOM节点？
HTML 文档中的所有内容都是节点
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
常见的DOM操作有哪些？
1.查找节点
2.新建节点
3.添加新节点
4.删除节点
5.设置样式
常用的查找节点的方法有：
document.getElementById('id属性值');返回拥有指定id的对象的引用
document.getElementsByClassName('class属性值');返回拥有指定class的对象集合
document.getElementsByTagName('标签名');返回拥有指定标签名的对象集合
document.getElementsByName('name属性值'); 返回拥有指定名称的对象结合
document/element.querySelector('CSS选择器'); 仅返回第一个匹配的元素
document/element.querySelectorAll('CSS选择器'); 返回所有匹配的元素
document.documentElement; 获取页面中的HTML标签
document.body; 获取页面中的BODY标签
document.all['']; 获取页面中的所有元素节点的对象集合型
常用的新建节点的方法有：
document.createElement('元素名');创建新的元素节点
document.createAttribute('属性名');创建新的属性节点
document.createTextNode('文本内容');创建新的文本节点
document.createComment('注释节点'); 创建新的注释节点
document.createDocumentFragment( ); 创建文档片段节点
常用的添加新节点的方法有：
1.element.setAttribute( attributeName, attributeValue );给元素增加指定属性，并设定属性值
2.element.setAttributeNode( attributeName );给元素增加属性节点
3.如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
1)document.createTextNode('新增文本内容');创建新的文本节点
2)parent.appendChild( 创建的新节点 );向父节点的最后一个子节点后追加新节点或 parent.insertBefore( newChild, existingChild );向父节点的某个特定子节点之前插入新节点
常用的删除节点的方法有：
parentNode.removeChild( existingChild );删除已有的子节点，返回值为删除节点
DOM 需要清楚你需要删除的元素，以及它的父元素。常用的解决方案：找到你希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
设置样式
ele.style.styleName = styleValue;设置ele元素的CSS样式
3.常见问题
DOM 和 HTML是一回事吗？
DOM 和 JavaScript什么关系？
书写细节
如何获取相邻的节点？
可以复制节点么？
4.解决方案
DOM 和 HTML是一回事吗？
就像很多人把JQuery和Javascript的本质搞混一样，DOM和HTML也完全不是一回事，DOM是一个API，HTML(Hyper Text Markup Language)则是一种标记语言，HTML在DOM的模型标准中被视为对象，DOM只提供编程接口，却无法实际操作HTML里面的内容。
但是前端工程师，一般在浏览器端操作HTML。每个Web浏览器都会使用DOM，所以页面可以被脚本语言访问。而所有的浏览器都是以Javascript作为默认的脚本语言。所以HTML在浏览器端基本上可以直接通过DOM模型来操作，通过script标签载入或者直接插入Javascript脚本，通过DOM直接操作浏览器端的HTML文件。正是这种无缝融合，导致DOM和HTML的概念很容易混淆。
DOM 和 JavaScript什么关系？
Javascript可以通过DOM直接访问和操作网页文档的内容，一开始，DOM是为方便Javascript操作设计的API。但其实发展到后来，他们是两个独立的个体。而且Javascript不是唯一可以使用DOM的编程语言，比如python也可以访问DOM。所以DOM不是提供给Javascript的API，也不是Javascript里的API。但JavaScript可以通过DOM访问和操作HTML和XML文档内容。
书写细节
只有查找ID时element不加<b style="color: #000000;">s</b> ，对新人来说要是不注意细节很可能会书写错误，导致一时半会儿找不到错误所在
getElementById
getElementsByClassName
如何获取相邻的节点？
neborNode.previousSibling :获取已知节点的相邻的上一个节点
nerbourNode.nextSlbling: 获取已知节点的下一个节点
可以复制节点么？
cloneNode(true | false);复制某个节点
参数：是否复制原节点的所有属性

5.编码实战

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>常见的DOM操作</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body style="font-size:20px;">
<h1 id="id" class="class">AAAAAAA</h1>
<h2 class="class">BBBBBB</h2>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<input type="text" name="kuang" value="输入框" >
<p>CCCCCCCC</p>
<p>DDDDDDDD</p>
<p>EEEEEEEE</p>
<div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
</div>
<button οnclick="create()">create</button>
<button οnclick="set()">set</button>
<button οnclick="del()">delete</button>
<button οnclick="change()">change</button>
<script>

    //获取节点

    var a = document.getElementById("id");
    //返回拥有指定对象id的引用
    console.log(a);
    var b = document.getElementsByClassName("class");
    //返回拥有指定class的对象集合
    console.log(b);
    var c = document.getElementsByTagName("li");
    //返回拥有指定标签的对象集合
    console.log(c);
    var d = document.getElementsByName("kuang");
    //返回拥有指定名称的对象集合
    console.log(d);
    var e = document.querySelector("p");
    //返回第一个匹配的元素
    console.log(e);
    var f = document.querySelectorAll("p");
    //返回所有匹配的元素
    console.log(f);
    var g = document.documentElement;
    //获取页面中的HTML标签
    console.log(g);
    var h = document.body;
    //获取页面中的BODY标签
    console.log(h);
    var i = document.all;
    //获取页面中的所有标签
    console.log(i);

    //新建节点

    function create(){
        // var para=document.createElement("p");
        // //创建新的 <p> 元素
        // var node=document.createTextNode("这是新段落。");
        // //向 <p> 元素添加文本，首先创建文本节点
        // para.appendChild(node);
        // //向 <p> 元素追加这个文本节点
        // var element=document.getElementById("div1");
        // //向一个已有的元素追加这个新元素,找到一个已有的元素
        // element.appendChild(para);
        // //向这个已有的元素追加新元素
        var element = document.getElementById("p2");
        element.innerHTML="新增段落";//插入文本内容
    }

    //添加新节点

    function set(){
        //给元素增加指定属性，并设定属性值
        document.getElementsByTagName("input")[0].setAttribute("type","button");
    }

    //删除节点

    function del(){
        //如需删除 HTML 元素，您必须首先获得该元素的父元素
        var parent=document.getElementById("div1");
        //找到 id="div1" 的元素
        var child=document.getElementById("p1");
        //找到 id="p1" 的 <p> 元素
        parent.removeChild(child);
        //从父元素中删除子元素
    }

    //设置样式

    function  change() {
        var j =document.getElementById("id");
        j.style.backgroundColor="red";
    }
</script>
</body>
</html>

6.更多讨论
常见的DOM - 事件有哪些？
onclick 事件——当用户点击时
onload 事件——用户进入
onmouseover事件——鼠标移入
onmouseout事件——鼠标移出
onmousedown事件——鼠标按下
onmouseup 事件——鼠标抬起
http://www.runoob.com/jsref/dom-obj-event.html/HTML DOM 事件
DOM有什么优点和缺点？
DOM的优势主要表现在：易用性强，使用DOM时，将把所有的XML文档信息都存于内存中，并且遍历简单，支持XPath，增强了易用性。
DOM的缺点主要表现在：效率低，解析速度慢，内存占用量过高，对于大文件来说几乎不可能使用。另外效率低还表现在大量的消耗时间，因为使用DOM进行解析时，将为文档的每个element、attribute、processing-instrUCtion和comment都创建一个对象，这样在DOM机制中所运用的大量对象的创建和销毁无疑会影响其效率。
7.参考文献
http://www.runoob.com/htmldom/htmldom-tutorial.html/菜鸟教程-HTML DOM 教程
http://www.cnblogs.com/yinshuige/p/5812095.html/DOM常用操作 - GraceZy - 博客园
鸣谢

感谢大家观看

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。

快来与我一起学习吧~ http://www.jnshu.com/login/1/21109035

menggx1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常见Dom操作有哪些？

常见Dom操作有哪些？it-修真院小课堂目录1.背景介绍2.知识剖析3.常见问题4.解决方案5.编码实战6.扩展思考7.参考文献8.更多讨论1.背景介绍DOM（文档对象模型）是针对HTML 和XML 文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。2.知识剖析DOM是什么？DOM 是 Document Object Model（文档...
复制链接

扫一扫