js中的基础知识点 —— DOM

Matcha_ice_cream

已于 2022-07-13 16:38:03 修改

阅读量325

点赞数

分类专栏： # js 文章标签： javascript 前端 css

于 2022-07-13 16:00:18 首次发布

本文链接：https://blog.csdn.net/Matcha_ice_cream/article/details/125710796

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文详细梳理了JavaScript中的DOM节点类型、操作方法，如getElementById、getElementsByTagName等，以及Element属性的getters和setters，如getAttribute、setAttribute等。此外，讲解了如何创建、添加、删除和替换节点，以及innerHTML和innerText的区别。核心内容包括DOM节点关系和常用API的实践应用。

摘要由CSDN通过智能技术生成

整理学习过程中js知识点，防遗忘。

JavaScript 基础知识点

一、DOM

一、DOM

1. DOM节点类型

HTML和XML文档可以用DOM表示为一个由节点构成的层级结构。（DOM树）

常见的节点有：文档节点、元素节点、属性节点、文本节点等。

每个节点都具有的属性：nodeType、nodeName、nodeValue

node	nodetype	nodeName	nodeValue	parentNode	子节点
Document(文档)	9	#document	null	null	DocumentType(<=1)、Element(<=1)
Element(元素/标签)	1	元素标签名	null	Document / Element	Element、Text、Comment
Text(文本)	3	#text	文本内容	Element	不支持
attr(属性)	2	属性名	属性值	null	不支持
Comment(注释)	8	#comment	注释内容	Document / Element	不支持
DocumentType(文档类型)	10	文档类型名称	null	Document	不支持
DocumentFragment(文档片段)	11	#document-fragment	null	null	Element、Text、Comment
CDATASection(CDATA区块)	4	#cdata-section	CDATA区块的内容	Document / Element	不支持

1）Document类型

Ⅰ 对象方法

1. getElementById()

接收需要获取元素的id，找到则返回该元素，没找到则返回null。
获取的只有一个元素。

部分代码演示：

<body>
  <div id="one">你好呀</div>
</body>
<script>
  var div = document.getElementById("one");
  console.log(div);
  console.log(div.innerHTML);
</script>
</html>

效果显示：

在这里插入图片描述

2. getElementsByTagName()

传入的参数为标签，获取一组元素。返回的是一个HTMLCollection对象。

部分代码演示：

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul> 
</body>
<script>
  var ul = document.getElementsByTagName("ul");
  console.log(ul);
  console.log(ul[0].innerHTML); 
</script>

效果显示：

在这里插入图片描述

3. getElementsByName()

getElementsByName() 方法常用于单选按钮。要有name属性

部分代码演示：

<body>
  <form action="">
    <input type="radio" value="male" name="type">
    <label for="">男</label>
    <input type="radio" value="female" name="type">
    <label for="">女</label>
  </form>
</body>
<script>
  var radios = document.getElementsByName("type");
  console.log(radios);
  console.log(radios[0].value);
  console.log(radios[1].value); 
</script>

效果显示：

在这里插入图片描述

4. write()、writeln()

向文档中写入内容。
write()和writeln()方法基本上无区别。唯一区别为：writeln()会在字符末尾加上“\n”符（书上说，但是验证结果是空格，而非换行符。。。）

注意：当页面加载完成后再调用 document.write()方法时，会重写整个页面。

部分代码演示：

<script>
  window.onload = function() {
    document.write("hello");
    document.write("hello")
    document.writeln("hi");
    document.writeln("hi");
  }
</script>
<body>
  <p>天气真的好热呀！！！</p>
</body>

效果显示：

在这里插入图片描述

5. querySelector()、querySelectorAll()

querySelector()：querySelector()方法的参数为CSS选择器，并返回文档中匹配CSS选择器的一个元素。
querySelectorAll()：querySelectorAll()方法的参数也为CSS选择器，但是返回文档中匹配指定CSS选择器的所有元素。

代码展示：

<script>
  window.onload = function() {
    let res1 = document.querySelector("span");
    console.log("querySelector", res1);
    let res2 = document.querySelectorAll("span");
    console.log("querySelectorAll", res2);
    console.log(res2[0]);
    console.log(res2[1]);
  }
</script>
<body>
  <div id="today">fighting!!!</div>
  <span>hello!</span>
  <p>逗你玩呢！！！</p>
  <span>加油，宝贝！！！</span>
</body>

显示效果：

在这里插入图片描述

6. getElementsByClassName()

getElementsByClassName()方法返回文档中指定类名的元素集合。
传入的参数为：类名

getElementsByClassName()是html5新增的方法

代码展示：

<script>
  window.onload = function() {
    let res1 = document.getElementsByClassName("one")[0];
    console.log(res1); //选择class为one的div元素
  }
</script>
<body>
  <div class="one">one</div>
  <div class="two">two</div>
</body>

显示效果：
在这里插入图片描述

Ⅱ 对象属性

1. body

document.body 可以获得body对象的引用

代码展示：

<script>
  window.onload = function() {
    let body = document.body;
    console.log(body);
  }
</script>
<body>
  <p>fight!!!</p>
</body>

显示效果：

在这里插入图片描述

2. documentElement

document.documentElemet属性用于获取页面的 html 元素。

代码展示：

<script>
  window.onload = function() {
    let root = document.documentElement;
    console.log(root);
  }
</script>
<body>
  <p>javaScript!!!</p>
</body>

显示效果：

在这里插入图片描述

3. title

title属性返回文章的标题

代码展示：

<<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM</title>
</head>
<script>
  window.onload = function() {
    let title = document.title;
    console.log(title);
  }
</script>
<body>
  <p>javaScript!!!</p>
</body>
</html>

显示效果：

在这里插入图片描述

4. URL

URL属性：返回当前页面完整的URL

代码展示：

<script>
  window.onload = function() {
    let url = document.URL;
    console.log(url);
  }
</script>
<body>
  <p>javaScript!!!</p>
</body>

显示效果：

在这里插入图片描述

5. domain

domain属性：取得域名

6. referrer

referrer属性：包含链接到当前页面的那个页面的url。（载入当前文档的文档的url）

2）Element类型

Ⅰ 对象方法

1. getAttribute()

getAttribute()：getAttribute()方法返回元素节点指定的属性值。

代码展示：

<script>
  window.onload = function() {
    let div = document.getElementsByTagName("div")[0];
    let id = div.getAttribute("id");
    console.log(id);
  }
</script>
<body>
  <div id="today">fighting!!!</div>
</body>

显示效果：

在这里插入图片描述

2. setAttribute()

setAttribute()：setAttribute()方法更改属性值，或者将属性设置为指定值。
setAttribute()方法传递两个参数：要设置的属性名和属性值

注意：setAttribute()适用于HTML属性，也适用于自定义属性。

代码展示：

<script>
  window.onload = function() {
    let div = document.getElementsByTagName("div")[0];
    let id = div.setAttribute("id", "more"); //将id的属性值设置为 more
  }
</script>
<body>
  <div id="today">fighting!!!</div>
</body>

显示效果：

在这里插入图片描述

3. removeAttribute()

removeAttribute()：removeAttribute()方法表示从元素中移除指定属性。

代码展示：

<script>
  window.onload = function() {
    let div = document.getElementsByTagName("div")[0];
    let id = div.removeAttribute("id"); 
  }
</script>
<body>
  <div id="today">fighting!!!</div>
</body>

显示效果：

在这里插入图片描述

4. getComputedStyle()

getComputedStyle() 表示计算样式。用于获取指定元素的CSS样式
注意：获取的样式为浏览器最终渲染的样式
传入的参数：要取得的计算属性和伪元素字符串（如果不需要伪元素，可以传入null）
要点：

getComputedStyle()方法只支持读取属性
getComputedStyle()读取的属性，包括内联样式、嵌入样式、外部样式。（最终效果）
读取样式属性用getComputedStyle()，修改属性用Element.style

代码展示：

<style>
  div {
    width: 150px;
    height: 100px;
    background-color: aquamarine;
  }
</style>
<script>
  window.onload = function() {
    let div = document.querySelector("div");
    let computedStyle = window.getComputedStyle(div, null);
    console.log("backgroundColor", computedStyle.backgroundColor); //是pink颜色呀
    console.log("width", computedStyle.width);
    console.log("height", computedStyle.height);
    console.log("border", computedStyle.border);  
  }
</script>
<body>
  <div style="background-color: pink; border: 2px solid gray"></div>
</body>

显示效果：
在这里插入图片描述

Ⅱ 对象属性

1. style

element.style：该属性设置或者返回元素的style属性。
注意：添加或者更改的样式均为行内样式style （优先级比普通选择器要高）

代码展示：

<style>
  div {
    width: 200px;
    height: 200px;
    background-color: aquamarine;
  }
</style>
<script>
  window.onload = function() {
    let div = document.querySelector("div");
    div.style.backgroundColor = "skyblue"; //对于CSS中的background-color，采用驼峰命名法
  }
</script>
<body>
  <div></div>
</body>

显示效果：

在这里插入图片描述

2. offsetHeight、offsetWidth、offsetLeft、offsetTop

偏移尺寸
offsetHeight：返回元素的高度（包括content+padding+border）
offsetWidth：返回元素的宽度（包括content+padding+border）
offsetLeft：返回元素水平偏移位置
offsetTop：返回元素垂直偏移位置
offsetParent：相当于偏移容器。有定位时，返回最近一级的祖先元素；无定位时，返回body
注意：这些属性均为只读属性，并且每次访问都会重新计算（减少、适当使用），可用局部变量保存，调用变量，减少页面渲染。得到的值没有单位！没有单位!!

在这里插入图片描述

1）无定位实例：
1）代码展示：

<style>
  * {
    padding: 0;
    margin: 0;
  }
  div {
    width: 150px;
    height: 100px;
    padding: 30px;
    margin: 20px;
    border: 2px solid gray;
    background-color: aquamarine;
  }
</style>
<script>
  window.onload = function() {
    let div = document.getElementById("div");
    console.log("offsetHeight", div.offsetHeight);
    console.log("offsetWidth", div.offsetWidth);
    console.log("offsetLeft", div.offsetLeft); //无定位时，返回的是body的magin值
    console.log("offsetTop", div.offsetTop);  //无定位时，返回的是body的magin值
    console.log("offsetParent", div.offsetParent); //没有定位，则为body
     
  }
</script>
<body>
  <div id="div"></div>
</body>

1）显示效果：

在这里插入图片描述

2）有定位实例：
2）代码展示：

<style>
  * {
    padding: 0;
    margin: 0;
  }
  #div1 {
    position: relative;
    width: 150px;
    height: 100px;
    padding: 15px;
    border: 2px solid gray;
    background-color: skyblue;
  }
  #div2 {
    position: absolute;
    top: 20px;
    left: 10px;
    width: 100px;
    height: 50px;
    padding: 10px;
    border: 2px solid gainsboro;
    background-color: yellowgreen;
  }
</style>
<script>
  window.onload = function() {
    let div = document.getElementById("div2");
    console.log("offsetHeight", div.offsetHeight);
    console.log("offsetWidth", div.offsetWidth);
    console.log("offsetLeft", div.offsetLeft); //有定位时，定位设置的left值
    console.log("offsetTop", div.offsetTop);  //有定位时，定位设置的top值
    console.log("offsetParent", div.offsetParent); //没有定位，则为body
     
  }
</script>
<body>
  <div id="div1">
    <div id="div2"></div>
  </div>
</body>

2）显示效果：

注意：如果div2未设置top，以及left值，则offsetLeft = 15 、offsetTop = 15，分别是父元素对应的padding值

3. clientWidth、clientHeight

客户端尺寸
clientWidth：返回元素的可见宽度（包括content+padding）
clientHeight：返回元素的可见高度（包括content+padding）

注意：这些属性均为只读属性，并且每次访问都会重新计算（减少、适当使用），可用局部变量保存，调用变量，减少页面渲染。得到的值没有单位！没有单位!!

在这里插入图片描述

代码展示：

<style>
  * {
    padding: 0;
    margin: 0;
  }
  #div1 {
    position: relative;
    width: 150px;
    height: 120px;
    padding: 20px;
    border: 8px solid gray;
    background-color: rosybrown;
  }
  #div2 {
    position: absolute;
    width: 100px;
    height: 50px;
    padding: 10px;
    border: 5px solid ghostwhite;
    background-color: gold;
  }
</style>
<script>
  window.onload = function() {
    let div = document.getElementById("div2");
    console.log("clientHeight", div.clientHeight);
    console.log("clientWidth", div.clientWidth);
    console.log("offsetParent", div.offsetParent); //没有定位，则为body    
  }
</script>
<body>
  <div id="div1">
    <div id="div2"></div>
  </div>
</body>

显示效果：

在这里插入图片描述

4. scrollHeight、scrollWidth、scrollLeft、scrollTop

滚动尺寸
scrollHeight：可滚动区域的高度。（一般指内部可滚动内容区域的高度）
scrollWidth：可滚动区域的宽度。
scrollLeft：内容区左侧隐藏的像素数。（一般滚动条的位置改变才会有数值）
scrollTop：内容区顶部隐藏的像素数。（一般滚动条的位置改变才会有数值）

在这里插入图片描述
补充：
上下滚动条都到底了的标志
scrollHeight - ScrollTop = clientHeight
scrollWidth - scrollLeft = clientWidth

代码展示：

<style>
  * {
    padding: 0;
    margin: 0;
  }
  #div1 {
    position: relative;
    overflow: auto;
    width: 150px;
    height: 120px;
    /* padding: 30px; */
    border: 8px solid silver;
    background-color: rosybrown;
  }
  #div2 {
    position: absolute;
    width: 200px;
    height: 300px;
    padding: 10px;
    border: 5px solid ghostwhite;
    background-color: goldenrod;
  }
</style>
<script>
  window.onload = function() {
    let div = document.getElementById("div1");
    let btn = document.querySelector("button");
    btn.onclick = function() {
      console.log("scrollHeight", div.scrollHeight);   //为内容区域的高度（contentheight+padding+border）
      console.log("scrollWidth", div.scrollWidth); //为内容区域的宽度（contentwidth+padding+border）
      console.log("scrollLeft", div.scrollLeft);
      console.log("scrollTop", div.scrollTop);
      console.log("offsetParent", div.offsetParent);  
    }
      
  }
</script>
<body>
  <button>点击</button>
  <br><br/>
  <div id="div1">
    <div id="div2"></div>
  </div>
</body>

显示效果：

在这里插入图片描述

注：可以试一试给父盒子div加上padding值，scrollHeight会有些不同（会在原有基础上加上父盒子设置的padding值，总之，就是要包括所有可滚动区域的高度；宽度同理）

3）Text类型

Ⅰ 对象方法

1. createTextNode()

document.createTextNode()方法可以用来创建新文本节点。

代码展示：

<script>
  window.onload = function() {
    let text = document.createTextNode("goodbye");
    let res = document.querySelector("span").appendChild(text);
    console.log(res);
  }
</script>
<body>
  <div id="today">fighting!!!</div>
  <span></span>
</body>

显示效果：

在这里插入图片描述

2. DOM节点关系

每个节点都有一个childNodes属性（NodeList）
每个节点都有一个parentNode属性（DOM树中的父元素）
同胞节点：previousSibling、nextSibling
父节点的子节点：第一个子节点 firstChild，最后一个子节点 lastChild

1）childNodes、children

childNodes 属性返回节点子节点的集合（包含文本节点）
children 属性包含元素 Element类型的子节点。

代码展示：

<script>
  window.onload = function() {
    var uls = document.getElementsByTagName("ul")[0].childNodes;
    console.log("childNodes", uls); 
    var uls1 = document.getElementsByTagName("ul")[0].children;
    console.log("children", uls1);
  }
</script>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

显示效果：

在这里插入图片描述

2）parentNode

parentNode 返回元素的父节点

代码展示：

<script>
  window.onload = function() {
    var lis = document.getElementsByTagName("li")[0].parentNode;
    console.log("parentNode", lis); 
  }
</script>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</body>

显示效果：

在这里插入图片描述

3）previousSibling、previousElementSibling

previousSibling: 返回同一个节点树的前一个元素。（包括各种节点类型，eg: 文本节点）
previousElementSibling：返回同一个节点树的前一个Element元素，如果没有，则返回null。

代码展示：

<script>
  window.onload = function() {
    var li1 = document.getElementsByTagName("li")[0].previousSibling;
    console.log("previousSibling", li1);  //是文本节点
    var li2 = document.getElementsByTagName("li")[0].previousElementSibling;
    console.log("previousElementSibling", li2); //第一个li之前没有同胞节点，返回null
    var li3 = document.getElementsByTagName("li")[1].previousElementSibling;
    console.log("previousElementSibling", li3); //第二个li之前有同胞节点，返回第一个节点
  }
</script>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</body>

显示效果：

在这里插入图片描述

4）nextSibling、nextElementSibling

nextSibling: 返回同一个节点树的后一个元素。（包括各种节点类型，eg: 文本节点）
nextElementSibling：返回同一个节点树的后一个Element元素，如果没有，则返回null。

代码展示：

<script>
  window.onload = function() {
    var li1 = document.getElementsByTagName("li")[0].nextSibling;
    console.log("nextSibling", li1);  //是文本节点
    var li2 = document.getElementsByTagName("li")[0].nextElementSibling;
    console.log("nextElementSibling", li2); //第一个li之后有同胞节点，返回第二个li
    var li3 = document.getElementsByTagName("li")[2].nextElementSibling;
    console.log("nextElementSibling", li3); //第三个li之后没有同胞节点，返回null
  }
</script>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</body>

显示效果：

在这里插入图片描述

5）firstChild、firstElementChild

firstChild：返回父节点的首个子节点。
firstElementChild：返回父节点的首个元素节点。

代码展示：

<script>
  window.onload = function() {
    var lif = document.getElementsByTagName("ul")[0].firstChild;
    console.log("fisrtChild", lif);
    var lief = document.getElementsByTagName("ul")[0].firstElementChild;
    console.log("firstElementChild", lief);
  }
</script>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</body>

显示效果：

在这里插入图片描述

6）lastChild、lastElementChild

lastChild：返回父节点的最后一个子节点。
lastElementChild：返回父节点的最后一个元素节点。

代码展示：

<script>
  window.onload = function() {
    var lil = document.getElementsByTagName("ul")[0].lastChild;
    console.log("lastChild", lil); //最后一个节点为文本节点
    var lile = document.getElementsByTagName("ul")[0].lastElementChild;
    console.log("lastElementChild", lile);
  }
</script>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</body>

显示效果：

在这里插入图片描述

3. 操纵节点

1）创建新元素：createElement()

可以使用 document.createElement()方法创建新元素。
注意：此时该元素未添加到文档树中

代码展示：

<script>
  window.onload = function() {
    var div = document.createElement("div");
    div.id = "div1";
    div.innerHTML = "hello, JavaScript";
    console.log(div);
  }
</script>
<body>
</body>

显示效果：

在这里插入图片描述

2）添加节点：appendChild()、insertBefore()

appendChild()：向元素的末尾添加节点。appendChild()返回新添加的节点。
insertBefore()：将元素添加到指定位置，可以使用insertBefore()方法。该方法传入两个参数：要插入的节点和参照节点。
其中，要插入的节点会变成参照节点的前一个同胞节点（previousSibling）；如果参照节点为 null，则会向元素末尾添加节点（同appendChild()方法一样）

注意：此时元素已经添加到DOM树中。

代码展示：

<script>
  window.onload = function() {
    let div = document.createElement("div"); //创建div元素
    div.innerHTML = "hello everyone!!!" 
    let resa = document.body.appendChild(div); 
    console.log("appendChild()", resa);

    let li = document.createElement("li"); //创建li元素
    li.innerHTML = "random";
    let ul = document.getElementsByTagName("ul")[0]; //获取第一个ul
    let resi = ul.insertBefore(li, document.getElementsByTagName("li")[1]); //在ul中第二个li前插入创建的li元素
    console.log(resi);

    let li1 = document.createElement("li"); //创建li元素
    li1.innerHTML = "last";
    let resi1 = document.getElementsByTagName("ul")[1].insertBefore(li1, null);
    console.log(resi1);
  
  }
</script>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
  <ul>
    <li>one</li>
  </ul>
</body>

显示效果：

在这里插入图片描述

3）删除节点：removeChild()

removeChild()：从元素中移除子节点。removeChild()返回移除的节点

代码展示：

<script>
  window.onload = function() {
    let p = document.getElementsByTagName("p")[0]; //获取p节点
    let resr = document.body.removeChild(p);
    console.log("removeChild()", resr);
  }
</script>
<body>
  <ul>
    <li>one</li>
  </ul>
  <p>hello wyb!!!</p>
</body>

显示效果：

在这里插入图片描述

4）替换节点：replaceChild()

replaceChild()： replaceChild()方法接收两个参数：要插入的节点和要替换的节点
replaceChild()方法的返回值为：要替换的节点；并且，替换的节点会在DOM文档树中删除。

代码展示：

<script>
  window.onload = function() {
    let span = document.querySelector("span");
    let p = document.querySelector("p");
    let res = document.getElementsByTagName("div")[0].replaceChild(span, p);
    console.log(res);
  }
</script>
<body>
  <ul>
    <li>one</li>
  </ul>
  <div>
    <p>hi!!</p>
  </div>
  <span>javaScript!!!</span>
</body>

显示效果：

在这里插入图片描述

4. 插入标记

1）innerHTML

innerHTML 属性设置或返回HTML字符串。
注意：会识别并转换HTML标签

代码展示：

<script>
  window.onload = function() {
    let div = document.querySelector("div");
    div.innerHTML = "<strong>打卡!!!</strong>"
  }
</script>
<body>
  <p>hello!</p>
  <div></div>
</body>

显示效果：

在这里插入图片描述

2）innerText

innerText 属性设置或返回文本内容。
注意：不解析HTML标签

代码展示：

<script>
  window.onload = function() {
    let div = document.querySelector("div");
    div.innerText = "<strong>打卡!!!</strong>"
  }
</script>
<body>
  <p>hello!</p>
  <div></div>
</body>