06dom基本操作-CSDN博客

本文链接：https://blog.csdn.net/qq_46055080/article/details/105597532

06.Dom基本操作

文章目录

06.Dom基本操作

1.什么是Dom

DOM（文档对象模型 document object model）是语言中立的 API应用程序编程接口(Application Programming Interface），用于访问和操作 HTML 和 XML 文档。

DOM将 HTML 和 XML 文档形象地看作一个层次化的节点树，可以使用 JavaScript 来操作（添加、移除和修改）这个节点树，进而改变底层文档的外观和结构。

节点分为几种不同的类型，每种类型分别表示文档中不同的信息及标记。每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。

📌最基本的节点类型是 Node，用于抽象地表示文档中一个独立的部分；所有其他类型都继承自Node。

📌Document 类型表示整个文档，是一组分层节点的根节点。在 JavaScript 中，document 对象是Document 的一个实例。使用 document 对象，有很多种方式可以查询和取得节点。

📌Element 节点表示文档中的所有 HTML 或 XML 元素，可以用来操作这些元素的内容和特性。

📌另外还有一些节点类型，分别表示文本内容、注释、文档类型、CDATA 区域和文档片段。

举个例子：

<html> 
 <head> 
 <title>Sample Page</title> 
 </head> 
 <body> 
 <p>Hello World!</p> 
 </body> 
</html>

可以将这个简单的 HTML 文档表示为一个层次结构，文档节点是每个文档的根节点，在这个例子中，文档节点是<html>元素

2.选择符API

javaScript利用这些选择符操纵html

（1）获取

querySelector()

通过选择器来查询元素,只能获取到第一个

<body>
    <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
</body>
<script>
	var container = document.querySelector( '.container' );
    console.log( container );
    //此时控制台讲打印出类名为container里的所有内容
</script>

那么，如果我们想获取类名为container里边的盒子，又该如何写呢？

第一种：和css中的选择器写法是相同的：

var container_box = document.querySelector('.container .box');
//别忘了这里是字符串式的写法，选择器有“.”记得加上
console.log( container_box );

第二种：通过链式的方法

var container_box = document.querySelector('.container').querySelector('.box');
cosole.log(container_box);

此时，你将会发现控制台，只打印出第一个类名为box的盒子,因此出现👇

querySelectorAll()

var boxs = document.querySelectorAll('.container .box');
console.log(boxs);

此时呢，将会把container里边所有的内容获取到，如图所示：

在这里插入图片描述
这个方法返回的是一个 NodeList的实例，NodeList意思为“节点列表”，是一个类数组，可以获取到标签和文字，length:3则表示此类数组长度为3，因此，可以通过下标来获取其中的每个元素：

var boxs = document.querySelectorAll('.container .box');
console.log(boxs[2]);

getElementsByTagName()

通过标签名来选择标签，只能写标签名

<body>
     <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
</body>
<script>
	var divList = document.getElementsByTagName('div');
     console.log( divList );
    //console.log( divList[0]);
</script>

此时，控制台打印出如图所示：

在这里插入图片描述

如图所示的HTMLCollection意思为标签集合，也是一个类数组，只能获取到标签。

getElementsByClassName()

通过类名来获取元素。

var divList = document.getElementsByClassName('box');//此时不用加.
console.log( divList );

链式操作：

var boxs= document.getElementByClassName('container')[0].getElementsByClassName('box')[1];
console.log( boxs );

getElementById()

通过id来获取元素

<body>
   <div id="chonger">宠儿是独一无二的</div>     
</body>
<script>
	var chonger = document.getElementById('chonger');
    console.log(chonger);
</script>

getElementsByName()

通过name属性来获取元素

<body>
    <input type="text" name = "username" plaseholder = "请输入你的用户名">
    <div name="chonger">chonger</div>
</body>
<script>
 	var input = "document.getElementByName('username')";
    console.log(input);
    var chonger = document.getElementsByName('chonger');
    console.log(chonger);
</script>

小结

query开头的方法与get开头的方法异同点：

异：query：NodeList（节点列表）（获取到标签和文字） -> 静态方法

get：HTMLCollection（标签集合）（类数组,只能获取到标签) -> 动态方法

静态，动态是什么意思？下边的修改上详解

同：都能进行链式操作（也能同时使用）

 var boxs = document.querySelector('.container').getElementsByClassName('box');

（2）修改

innerHTML

更改结构，写在innerHTML里的标签会被转义为真正的标签

<body>
    <div class ="bag">
        <div class="suger">第一颗糖</div>
        <div class="suger">第二颗糖</div>
    </div>
</body>
<script>
	var bag = document.querySelector('.bag');
    var sugers = document.querySelectorAll('.bag > .suger');
    console.log( sugers );
    //此时打印出的是这两颗糖
    //现在增加第三颗糖
    // bag.innerHTML = '<div>第三课糖 </div>';
    // console.log(sugers);
    //此时打印发现，并没有出现预期的效果，而是第三课糖覆盖了前两颗糖（可用来替换），那如何增加呢？使用+=
    bag.innerHTML += '<div class="suger">第三颗糖</div>';
    console.log(sugers);
</script>

此时可以发现这一系列的改变，控制台打印出的sugers的信息并没有变化，如图所示：

在这里插入图片描述

接下来，我们用getElementsByClassName()方法进行获取：

var sugers_a = document.getElementsByClassName('suger');
    console.log(sugers_a);

在这里插入图片描述

因此，静态是只获取一次,后面怎么改都可以动态是每次改都要重新获取。

innerText

更改文字

innerText和innerHTML道理是相通的,但是不会转义标签。

<body>
    <p>我是p标签中的文字</p>
</body>
<script>
	var op = document.querySelector("p");
    console.log(op);
    //此时打印出上述文字
    op.innerText += "我是来加入的";
    console.log(op);
</script>

innerText和innerHTML道理是相通的,但是不会转义标签。

<body>
    <p>我是p标签中的文字</p>
</body>
<script>
	var op = document.querySelector("p");
    console.log(op);
    //此时打印出上述文字
    op.innerText += "我是来加入的";
    console.log(op);
</script>