Table of contents
Second, the basic operation of DOM
2. Basic operation of elements
Manipulating element attributes
Manipulating element inline styles
1. What is DOM
DOM, the full name of Document Object Model, Document Object Model , is used to manipulate HTML documents . DOM regards the entire HTML file as a tree structure , and each element represents a node . The root of the tree structure is not an html tag , but a Document object.
Document object: not manually created, but automatically created by the JS interpreter , and a page has one and only one document.
Function: Every DOM element/node on the page can be found through document.
Note: Document will treat every element, attribute, comment, etc. on the page as an element/node.
Second, the basic operation of DOM
Find elements by ID
Syntax: document.getElementById("id value")
Due to the uniqueness of id, there is only one element obtained through id . Even if there are multiple elements with the same id, only the first one will be found.
Note: In JS, the value of the id attribute of an element can be used directly as a variable.
<body>
<div id="div1"></div>
<script>
console.log(div1)
</script>
</body>Find elements by tag name
Syntax: document.getElementsByTagName("Tag Name")
Since there may be many identical tags, the number of elements obtained by this method will be ≥ 1, that is, the result obtained is an array . However, this array cannot use the common methods of general arrays, and each item in it can only be obtained by traversing . Such as: array name.push(), etc., so the array is also called a pseudo-array .
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var lis = document.getElementsByTagName("li");
console.log(lis)
</script>
</body>Search by class name
Syntax: document.getElementsByClassName("class name")
Similarly, the final returned result is also a pseudo-array.
<body>
<ul class="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var uls = document.getElementsByClassName("ul");
console.log(uls)
</script>
</body>Find by selector
DOM supports the search of elements through selectors, such as id selectors, label selectors, group selectors, descendants/children selectors, etc.
1. Find one through the selector: document.querySelector("selector"), if there is no one, return null
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var li = document.querySelector("ul>li");
console.log(li) //只会找到ul下面的第一个li
</script>
</body>2. Find all through the selector: document.querySelectorAll("selector"), which returns a pseudo-array.
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var li = document.querySelectorAll("ul>li");
console.log(li) //会找到ul下面的所有li
</script>
</body>Find by node relationship
You can search through the relationship between nodes and nodes, such as parent nodes, child nodes, sibling nodes, etc.
Commonly used are:
Find the parent node : element.parentNode
Find child nodes : element.children---returns a pseudo-array
Find the first child node : element.firstElementChild
Find the last child node : element.lastElementChild
Find the previous sibling node : element.previousElementSibling
Find the next sibling node : element.nextElementSibling
Note: Finding elements does not have to start from the root of the document, but you can also start searching from a parent element.
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var ul = document.querySelector("ul");
var lis=ul.getElementsByTagName("li")
console.log(lis) //会找到ul下的所有li
</script>
</body>2. Basic operation of elements
Action element content
There are two commonly used operation elements: innerText and innerHTML
Get element content: element.innerText or element.innerHTML .
Set element content:
element.innerText="new content"
element.innerHTML="new content"
Difference: innerText can only support the acquisition and setting of plain text , while innerHTML can support the setting of HTML tags.
var div=document.querySelector("div")
div.innerText="哈哈" //正常显示
div.innerText="<h1>哈哈</h1>" // 在页面上原样显示，不会解析h1标签
div.innerHTML="你好" // 正常显示
div.innerHTML="<h1>哈哈</h1>" //会将h1解析成html标签，然后显示Manipulating element attributes
1. Operate element native attributes :
Get: element.attribute
Setting: element.attribute = "new attribute value"
2. Manipulate element custom attributes (or native attributes) :
Get: element.getAttribute("attribute name")
Setting: Element.setAttribute("Attribute Name", "Attribute Value")
Delete: element.removeAttribute("attribute name")
Action element class name
Get: element.className
Setting: element.className="new class name"
Manipulating element inline styles
Get: element.style.style name
Setting: element.style.styleName="stylevalue"
After learning the basic operations of DOM, you can combine what you have learned before to bind events to elements, such as: add click events to elements
<body>
//添加点击事件方式一，直接在开始标签内添加onclick属性
<button onclick="函数名或代码">点击</button>
<script>
var btn=document.querySelector("button")
// 添加点击事件方法二，获取元素之后，添加onclick方法,给这个onclick方法赋值一个函数
btn.onclick=function(){
函数体
}
</script>
</body>Supplement: You can use the this keyword in the function to replace the element that is currently bound to the event. This is essentially a pointer.
var btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
//这里的this指的就是btns[i]
if (this.innerText == "C") {
text.innerText = "";
} else if (this.innerText == "=") {
if (text.innerHTML == "") {
alert("请输入内容再计算");
} else {
// 计算
text.innerHTML = eval(text.innerHTML);
}
} else {
text.innerHTML += this.innerText;
}
};
}