1.Dom element acquisition
document.getElementById (): Get a Dom by element ID
document.getElementsByClassName (): acquire one or more elements Dom (dummy array) by the class name
document.getElementsByTagName (): acquire one or more elements Dom (pseudo-tag by name array)
document.querySelector (): Get a specified CSS selector element
document.querySelectorAll (): Get the specified CSS selectors a plurality of elements (dummy array)
document.getElementsByTagName () and document.getElementsByClassName () to get a list of all dynamic
document.querySelectorAll () to get a static list, change the structure of Dom happen to reacquire, otherwise there will be problems
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<style>
*{padding: 0;margin: 0;}
</style>
<body>
<ul>
<li class="test">1</li>
<li class="test">2</li>
<li class="test">3</li>
<li class="test">4</li>
</ul>
</body>
</html>
<script>
// 静态列表
var liNodes = document.querySelectorAll('li')
console.log(liNodes.length) // 4
// 动态添加li标签
document.querySelector('ul').innerHTML += "<li class='test'>5</li>"
console.log(liNodes.length) // 4
</script>2.Dom element node types
Dom node type divided into three categories: element nodes, attribute nodes, text nodes
each node has three attributes nodeName, nodeType, nodeValue
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<style>
*{padding: 0;margin: 0;}
</style>
<body>
<div id="box" title="我在哪">我是谁</div>
</body>
</html>
<script>
// 获取元素节点
var box = document.querySelector('#box')
// 元素节点的属性
console.log(box.nodeName);//DIV
console.log(box.nodeType); //1
console.log(box.nodeValue); //一律为null
// 根据属性名获取单个属性节点
var attrTitle = box.getAttributeNode("title")
// 属性节点的属性
console.log(attrTitle.nodeName);//title
console.log(attrTitle.nodeType); //2
console.log(attrTitle.nodeValue); //"我在哪"
// 获取box的文本节点（没有专门的方法用来获取文本节点，但是这个div的第一个子节点就是文本节点）
var textNode = box.childNodes[0];
// 文本节点的属性
console.log(textNode.nodeName);//#text
console.log(textNode.nodeType); //3
console.log(textNode.nodeValue); //"我是谁"
</script>3. Get the child elements of Dom element, the parent element, siblings
- Dom can get the current sub-element by element attribute children
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<style>
*{padding: 0;margin: 0;}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
<script>
// 获取ul元素
var ul = document.querySelector('ul')
// 获取ul子元素
var ul_children = ul.children
// 遍历子元素
for(var i=0;i<ul_children.length;i++){
console.log(ul_children[i].innerHTML)
// 1
// 2
// 3
}
</script>- Gets the current element of the parent element
parentElement / parentNode these two attributes can be
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<style>
*{padding: 0;margin: 0;}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
<script>
// 获取ul元素
var ul = document.querySelector('ul')
// 获取父元素(ul的父级就是body)
var parent = ul.parentElement
var parentNode = ul.parentNode
console.log(parent.nodeName) // BODY
console.log(parentNode.nodeName) // BODY
</script>- Gets the current element siblings
previousElementSbiling attributes: a sibling
nextElementSbiling attributes: next sibling element
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<style>
*{padding: 0;margin: 0;}
</style>
<body>
<ul>
<li>1</li>
<li id="test">2</li>
<li>3</li>
</ul>
</body>
</html>
<script>
// 获取id为test的li元素
var li = document.querySelector('#test')
// 获取兄弟元素
var preBrother = li.previousElementSibling
var nextBrother = li.nextElementSibling
console.log(preBrother.innerHTML) // 1
console.log(nextBrother.innerHTML) // 3
</script>Note:
Children and the childNodes, the former contains only the element node, and the latter is a text node element node + (carriage return linefeed be regarded as a text node)
and previousElementSibling with previousSibling, nextElementSibling with nextSibling also a reason
firstChild and lastChild: firstChild equivalent to the childNodes [ 0], lastChild corresponds to the last element of the childNodes
Adding and removing elements 4.DOM
- Add child elements
appendChild (): the target element as a child element of the current element to the rearmost
insertBefore (): Add the target element as a child element to the current element, the position can be freely selected
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<style>
*{padding: 0;margin: 0;}
</style>
<body>
<ul>
<li>1</li>
<li id="test">2</li>
<li>3</li>
</ul>
</body>
</html>
<script>
// 获取id为test的li元素
var ul = document.querySelector('ul')
// 创建li元素
var liNode = document.createElement('li')
liNode.innerHTML = "4"
// 将创建的li元素添加到ul中(最后面)
ul.appendChild(liNode)
// 再创建li元素
var liNode2 = document.createElement('li')
liNode2.innerHTML = "life"
var li_test = document.querySelector('#test')
// 将创建的li元素添加到ul中(li_test的前面)
ul.insertBefore(liNode2,li_test)
</script>operation result
<ul>
<li>1</li>
<li>life</li>
<li id="test">2</li>
<li>3</li>
<li>4</li>
</ul>- Delete sub-elements and sub-elements replace
removeChild (): delete the child element
replaceChild (): Replace sub-element
syntax: parent.removeChild (child)
Syntax: parent.removeChild (replacement of elements, replaced elements)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<style>
*{padding: 0;margin: 0;}
</style>
<body>
<ul>
<li>1</li>
<li id="test">2</li>
<li id="replace">3</li>
</ul>
</body>
</html>
<script>
// 获取id为test的li元素
var ul = document.querySelector('ul')
// 获取要删除的li元素
var li_test = document.querySelector('#test')
// 删除子元素
ul.removeChild(li_test)
// 获取要替换的li元素
var li_replace = document.querySelector('#replace')
// 创建要替换的元素
var newLI = document.createElement('li')
newLI.innerHTML = "replace li tag"
// 替换元素
ul.replaceChild(newLI,li_replace)
</script>operation result:
<ul>
<li>1</li>
<li>replace li tag</li>
</ul>