Detaillierte Kenntnisse von DOM
- 1. Was ist DOM?
- 2. So erhalten Sie Elemente aus DOM
- 3.innerHTML und innerText
- 4. Rufen Sie einige Attribute des Elements ab
- 5.H5 benutzerdefinierte Attribute
- 6. Rufen Sie den Namen der Elementklasse ab
- 7. Elementstil abrufen
- 8. Holen Sie sich den DOM-Knoten
- 9. Manipulation des DOM
- 10. Ermitteln Sie den Element-Offset
- 11. Ermitteln Sie die Elementgröße und die Größe des Browserfensters
1. Was ist DOM?
DOM ist einDokumentobjektmodell, das auch eine Schnittstelle für die HTML-Programmierung ist, um die Elemente auf der Seite über DOM zu manipulieren. Wenn eine HTML-Seite geladen wird, erstellt der Browser ein DOM, das eine neue logische Struktur für das Dokument bereitstellt und den Inhalt und die Struktur ändern kann.
DOM ist objektorientiert und definiert die zum Ändern des Dokuments erforderlichen Objekte sowie die Beziehung zwischen den einzelnen Objekten. Wir können das DOM auf der Seite auch als Baumstruktur betrachten und über JS Schriftsatz zum HTML-Dokument hinzufügen. Wenn JS dies wünscht um auf HTML zuzugreifen Die Elemente in werden über das Objektmodell abgerufen.
2. So erhalten Sie Elemente aus DOM
2.1 Holen Sie sich unkonventionelles DOM
Unkonventionelles DOM umfasst HTML, Head und Body
// 2.1 HTML语法: document.documentElement
var htmlEle = document.documentElement
console.log(htmlEle)
// 2.2 head 语法: document.head
var headEle = document.head
console.log(headEle)
// 2.3 body 语法: document.body
var bodyEle = document.body
console.log(bodyEle)
2.2 Holen Sie sich reguläres DOM
Beim Abrufen regulärer Elemente ist JS dasselbe wie CSS. Sie können Elemente nach Klassenname, Tag-Name und ID-Namen abrufen
2.2.1 Tags nach Klassennamen abrufen
<div class="box" id="box2"> 我是具有class的box2 </div>
<div class="box"> 我是具有class的box1 </div>
<p>我是一个P标签</p>
<div class="box"> 我是具有class的box3 </div>
<script>
var oBox = document.getElementsByClassName('box')
//获取class名为'box'的元素
console.log(oBox)
</script>
oBox ist ein Pseudo-Array. Wenn Sie ein bestimmtes Element erhalten möchten, können Sie den Index verwenden
Pseudo-Array: Es sieht aus wie ein Array mit Index und Länge, es gibt jedoch keine gemeinsame Methode für Arrays
Unabhängig von der Anzahl der Elemente mit diesem Klassennamen auf der Seite liegt das Ergebnis immer in Form eines Pseudo-Arrays vor
2.2.2 Tags nach Tag-Namen abrufen
<div class="box" id="box2"> 我是具有class的box2 </div>
<div class="box"> 我是具有class的box1 </div>
<p>我是一个P标签</p>
<div class="box"> 我是具有class的box3 </div>
<script>
var oDiv = document.getElementsByTagName('box')
//获取所有的div
console.log(oDiv)
</script>
oDiv ist auch ein Pseudo-Array. Wenn Sie ein bestimmtes Element erhalten möchten, können Sie den Index verwenden
2.2.3 Tags nach ID-Namen abrufen
<div class="box" id="box2"> 我是具有class的box2 </div>
<div class="box"> 我是具有class的box1 </div>
<p>我是一个P标签</p>
<div class="box"> 我是具有class的box3 </div>
<script>
var oBox2 = document.getElementById('box2')
//获取ID为'box2'的元素
console.log(oBox2)
</script>
Da die ID normalerweise eindeutig ist
, wird hier ein Label mit einer ID namens „box2“ erhalten, kein Pseudo-Array
2.2.4 Die Form des Selektors
Holen Sie sich das erste Etikett, das die Bedingung erfüllt
<div class="box" id="box2"> 我是具有class的box2 </div>
<div class="box"> 我是具有class的box1 </div>
<p>我是一个P标签</p>
<div class="box"> 我是具有class的box3 </div>
<script>
var myDiv = document.querySelector('.box')
//querySelector: 获取到满足条件的第一个标签
console.log(myDiv)
</script>
Holen Sie sich alle Etiketten, die die Bedingung erfüllen
<div class="box" id="box2"> 我是具有class的box2 </div>
<div class="box"> 我是具有class的box1 </div>
<p>我是一个P标签</p>
<div class="box"> 我是具有class的box3 </div>
<script>
var myDivAll = document.querySelectorAll('.box')
//querySelector: 获取到满足条件的所有标签
console.log(myDivAll)
</script>
3.innerHTML und innerText
<div>
我是 DIV 的文本
<p>
我是 P 的文本
<span>
我是 SPAN 的文本
</span>
</p>
<div>
我是内部 DIV 的文本
</div>
</div>
<script>
// 获取页面的 DIV 标签
var oDiv = document.querySelector('div') // 获取满足条件的第一个标签 条件: div
console.log(oDiv)
</script>
3.1 Attribute abrufen
innerHTML: Ruft den Text und die HTML-Struktur innerhalb des Tags ab
innerText: Ruft nur den Textinhalt der Seitenstruktur ab, die HTML-Struktur wird ignoriert
<div>
我是 DIV 的文本
<p>
我是 P 的文本
<span>
我是 SPAN 的文本
</span>
</p>
<div>
我是内部 DIV 的文本
</div>
</div>
<script>
console.log(oDiv.innerHTML) // 获取到标签内部的文本与HTML结构
console.log(oDiv.innerText) // 获取到页面的文本内容
</script>
3.2 Manipulieren der Attribute von Elementen
innerHTML: Beim Zuweisen eines Werts wird die HTML-Struktur in der Zeichenfolge erkannt. Wenn ein tatsächliches Tag vorhanden ist, wird es als Tag auf der Seite gerendert. innerText: Beim Zuweisen eines Werts wird die HTML-Struktur in der Zeichenfolge nicht
erkannt erkannt werden.
Wenn ein tatsächliches Tag vorhanden ist, wird es als Zeichenfolge auf der Seite dargestellt
InnerHTML wie gezeigt
<script>
oDiv.innerHTML = '1234567890'
oDiv.innerHTML = '<div>1234567890<div>'
</script>
Wie im Bild gezeigt ist innerText
<script>
oDiv.innerText = '1234567890'
oDiv.innerText = '<div>1234567890<div>'
</script>
4. Rufen Sie einige Attribute des Elements ab
4.1 Elemente abrufen
<div class="box" a="100" b="200">我是一个具有很多属性的 DIV 标签</div>
<script>
var oBox = document.getElementsByClassName('box')[0] //获取页面中第一个class名为box的元素
console.log(oBox)
</script>
4.2 Holen Sie sich einige Attribute von Elementen
Syntax: Element.getAttribute('Der abzufragende Attributname')
<script>
//获取元素的class属性
console.log(oBox.getAttribute('class'))
//获取元素的a属性
console.log(oBox.getAttribute('a'))
//获取元素的b属性
console.log(oBox.getAttribute('b'))
</script>
4.3 Legen Sie einige Eigenschaften einiger Elemente fest
Syntax: Element.setAttribute('Der festzulegende Attributname','Der festzulegende Attributwert')
<script>
//将属性a的值修改为A
oBox.setAttribute('a', 'A')
//将属性b的值修改为B
oBox.setAttribute('b', 'B')
//原本div里本没有c这个属性值,执行此操作就不在是修改,而为新增一个c属性名,值为C
oBox.setAttribute('c', 'C')
</script>
4.4 Ein Attribut eines Elements entfernen**
Syntax: Element.removeAttribute('Der zu entfernende Attributname')
<script>
//移除b这个属性名,同时值也会一同被移除
oBox.removeAttribute('b')
</script>
5.H5 benutzerdefinierte Attribute
Syntax: Datenattributname=''Attributwert''
HTML- und CSS-Bereich
<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>Document</title>
</head>
<body>
<div A="123" data-B="123456789">H5新增自定义属性</div>
JavaScript-Bereich
<script>
//获取div
var oDiv = document.querySelector('div')
// 获取 H5 自定义属性
// 1. 获取语法: 元素.dataset.属性名
console.log(oDiv.dataset.B)
// 2. 设置语法
oDiv.dataset.B = 'abcd' // 标签中实际拥有; 做修改操作
oDiv.dataset.age = 18 // 标签中实际没有; 做新增操作
// 3. 删除
delete oDiv.dataset.age
</script>
6. Rufen Sie den Namen der Elementklasse ab
<div class="item box">我是一个具有两个类名的 DIV</div>
<script>
//获取元素类名
var oDiv = document.querySelector('div')
// 1. 获取语法 元素.className
console.log(oDiv.className)
// 2. 设置语法 元素.className = '新的类名'
oDiv.className = oDiv.className + ' new_box'
// 3. 第二种获取语法
console.log(oDiv.classList)
// 4. 第二种设置语法
oDiv.classList.add('new_box')
// 5. 删除语法
oDiv.classList.remove('box')
</script>
7. Elementstil abrufen
HTML- und CSS-Bereich
<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>Document</title>
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
<div class="box"> 我是一个具有样式的div </div>
JavaScript-Bereich
Syntax: element.style.a CSS-Eigenschaft
<script>
var oBox = document.getElementsByClassName('box')[0]
// 1. 获取元素样式
console.log(oBox.style.width)
console.log(oBox.style.height)
// console.log(oBox.style.background-color) // 错误写法
console.log(oBox.style['background-color']) // 中括号语法
console.log(oBox.style.backgroundColor) // 驼峰命名
// 2. 设置元素样式 ---> 只能设置给行内
oBox.style.backgroundColor = 'blue'
//获取元素样式 (非行内) 注意: 这种方式获取到的 是 只读的属性
//只读: 只能获取到, 但是不允许修改
console.log(window.getComputedStyle(oBox).width)
console.log(window.getComputedStyle(oBox).backgroundColor)
</script>
8. Holen Sie sich den DOM-Knoten
8.1 Untergeordnete DOM-Knoten abrufen
<div class="box">
<p>123</p>
<span>abc</span>
</div>
<div id="box1"></div>
<script>
// 1. 获取元素的子节点
var oDiv = document.querySelector('div')
console.log(oDiv.children) // 获取元素的所有 子级元素节点(只能获取到标签)
console.log(oDiv.childNodes)
//oDiv.childNodes: ---> NodeList(5) [text, p, text, span, text]
//获取所有的 子级节点(会把换行识别为一个文本, 标签当成 元素节点)
//div 结束标签的位置开始, 到p标签开始位置的换行会被识别为一个 text
//p 标签会被识别为一个 元素节点
//p 结束标签到 span 开始标签前 的换行 会被识别为一个 text
//span 标签会被是被识别为一个 元素节点
//span 标签结束位置到 div 结束标签前 的换行 会被识别为一个 text
</script>
8.2 Holen Sie sich den ersten untergeordneten Knoten von DOM
<div class="box">
<p>123</p>
<span>abc</span>
</div>
<script>
var oDiv = document.getElementsByTagName('div')[0]
console.log(oDiv.firstChild) // 获取的是 元素内部 第一个 子节点 (不一定是 子元素节点)
//获取到div节点内的第一个子节点
//注意此时并不是获取到了第一个元素节点,
//而是div开始标签后到p开始标签前的一段换行, 这一段被识别为 text(文本节点)
//除非你的 HTML 结构 不写换行
console.log(oDiv.firstElementChild) // 获取的是元素内部第一个子元素节点
</script>
8.3 Holen Sie sich den letzten untergeordneten Knoten von DOM
<div class="box">
<p>123</p>
<span>abc</span>
</div>
<script>
var oDiv = document.querySelector('div')
console.log(oDiv.lastChild)
//获取最后一个子节点, 也就是 span结束标签, 到div结束标签前的一个换行, 这里会被识别为 text
console.log(oDiv.lastElementChild)
// 获取最后一个子元素节点 ---> span
</script>
8.4 Geschwisterknoten abrufen
<ul>
<li id="a">1</li>
<li id="b">2</li>
<li id="c">3</li>
</ul>
<script>
var oli = document.getElementById('b')
// 获取下一个兄弟节点
console.log(oli.nextSibling) // 获取下一个兄弟节点 ---> #text
// 获取下一个兄弟元素节点
console.log(oli.nextElementSibling) // 获取下一个兄弟元素节点 ---> <li id="c"></li>
// 获取上一个兄弟节点
console.log(oli.previousSibling) // 获取上一个兄弟节点 ---> #text
// 获取上一个兄弟元素节点
console.log(oli.previousElementSibling) // 获取上一个兄弟元素节点 ---> <li id="a"></li>
</script>
8.5 Holen Sie sich den übergeordneten Knoten
<div>
<ul>
<li id="a">1</li>
<li id="b">2</li>
<li id="c">3</li>
</ul>
</div>
<script>
// 获取元素的 父级节点
var oli = document.getElementById('b')
console.log(oli)
console.log(oli.parentNode)
</script>
8.6 Knotenklassifizierung
<ul A="100" B="200">
<li>我是ul的子级</li>
</ul>
<script>
var oUl = document.querySelector('ul')
// 1. 元素节点
var ele = oUl.firstElementChild
// 2. 文本节点
var text = oUl.firstChild
// 3. 属性节点
var attr = oUl.attributes[0]
//nodeType 节点类型
console.log(ele.nodeType) // 元素节点打印1
console.log(text.nodeType) // 文本节点打印3
console.log(attr.nodeType) // 属性节点打印2
//nodeName 节点名称
console.log(ele.nodeName) // 元素节点节点名称大写的LI
console.log(text.nodeName) // 文本节点名称#text
console.log(attr.nodeName) // 属性节点名称就是属性名
//nodeValue 节点的值
console.log(ele.nodeValue) // 元素节点是没有 nodeValue
console.log(text.nodeValue) // 文本节点是实际的文本的值
console.log(attr.nodeValue) // 属性节点是实际属性值
</script>
9. Manipulation des DOM
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
// 1.1 创建 元素节点
var myLi = document.createElement('li')
// 1.2 创建文本节点
var myStr = document.createTextNode('222222222222222')
myLi.appendChild(myStr)
console.log(myLi)
// console.log(myStr)
// 获取UL标签
var oUl = document.querySelector('ul')
var oLi = document.getElementsByTagName('li')[1]
// 2.1 增加dom(添加到指定父节点的最后)
oUl.appendChild(myLi)
// 2.2 增加dom(添加到指定父节点的最后) 语法:父节点.insertBefore(要插入的新节点, 插入到那个节点前(传递Null的话是插入到父节点最后))
oUl.insertBefore(myLi, null)
// 2.3 增加dom(添加到父节点的最前边)
oUl.insertBefore(myLi, oUl.firstElementChild)
// 3. 删除DOM 父节点.removeChild(要删除的节点)
oUl.removeChild(oUl.firstElementChild)
// 4. 修改某一个节点 父节点.replaceChild(新的节点, 要被修改的节点)
oUl.replaceChild(myLi, oLi)
//5.克隆DOM
//复制(克隆)一个 LI
//语法:想要复制的节点.cloneNode(参数布尔值)
//参数 false 不克隆子节点 默认为false(可不写)
//参数 true 克隆子节点
var newLi = oLi.cloneNode(true)
console.log(newLi)
oUl.appendChild(newLi)
</script>
10. Ermitteln Sie den Element-Offset
<style>
* {
padding: 0;
margin: 0;
}
.box1 {
width: 400px;
height: 400px;
background-color: pink;
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
left: 100px;
top: 200px;
}
</style>
<div class="box1">
<div class="box2"></div>
</div>
<script>
// 0. 获取元素
var box2 = document.querySelector('.box2')
// 1. 获取元素相对父级 元素.offsetParent
console.log(box2.offsetParent)
// 2. 获取元素的偏移量
console.log( box2.offsetLeft) //相对于父级元素横向偏移
console.log( box2.offsetTop) //相对于父级元素纵向偏移
</script>
11. Ermitteln Sie die Elementgröße und die Größe des Browserfensters
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 4000px;
height: 5000px;
background-color: pink;
}
</style>
<div></div>
<script>
var oDiv = document.querySelector('div')
// 获取元素尺寸(占地面积)
// 1. offsetXXX ---> 实际宽度/高度 + padding + border
console.log( oDiv.offsetWidth)
console.log( oDiv.offsetHeight)
// 2. clientXXX ---> 实际宽度/高度 + padding
console.log( oDiv.clientWidth)
console.log( oDiv.clientHeight)
// 获取浏览器窗口尺寸
// 1. window.innerXXX ---> 计算时 会包含浏览器的滚动条
console.log( window.innerWidth)
console.log( window.innerHeight)
// 2. document.documentElement.clientXXX ---> 计算时 不会计算滚动条(只计算浏览器的可视区域)
console.log( document.documentElement.clientWidth)
console.log( document.documentElement.clientHeight)
</script>