創(chuàng)建元素的三種方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>點(diǎn)擊</button>
<p>abc</p>
<div class="inner"></div>
<div class="create"></div>
<script>
// window.onload = function () {
// document.write('<div>123</div>')
// }
// document.write創(chuàng)建元素如果頁(yè)面文檔流加載完畢，在調(diào)用這句話會(huì)導(dǎo)致頁(yè)面重繪
// var btn = document.querySelector('button')
// btn.onclick = function () {
// document.write('<div>123</div>')
// }
// 2\. innerHTML
var inner = document.querySelector('.inner')
// 拼接字符串
// for (var i = 0; i <100 ; i++) {
// inner.innerHTML += '<a href="#">百度</a>'
// }
// 使用數(shù)組的方式
var arr = [];
for (var i = 0; i <100 ; i++) {
// 數(shù)組元素的添加
arr.push('<a href="#">百度</a>')
}
// 將數(shù)組連接起來(lái)
inner.innerHTML = arr.join('')
//
var create = document.querySelector('.create')
for (var i = 0; i <100 ; i++) {
var a = document.createElement('a')
a.innerHTML = '百度'
a.href = "#"
create.appendChild(a)
}
</script>
</body>
</html>
拼接效率測(cè)試
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function fn() {
var d1 = +new Date() // + 號(hào)相當(dāng)于將時(shí)間對(duì)象做了隱士轉(zhuǎn)換
var str = '';
for (var i = 0; i <1000 ; i++) {
document.body.innerHTML += '<div style="width: 100px; height: 2px; border: 1px solid blue"></div>'
}
var d2 = +new Date()
console.log(d2-d1)
}
fn();
</script>
</body>
</html>
數(shù)組拼接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function fn() {
var d1 = +new Date() // + 號(hào)相當(dāng)于將時(shí)間對(duì)象做了隱士轉(zhuǎn)換
var arr = [];
for (var i = 0; i <1000 ; i++) {
// document.body.innerHTML += '<div style="width: 100px; height: 2px; border: 1px solid blue"></div>'
arr.push('<div style="width: 100px; height: 2px; border: 1px solid blue"></div>')
}
document.body.innerHTML = arr.join('');
var d2 = +new Date()
console.log(d2-d1)
}
fn();
</script>
</body>
</html>
createElement
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function fn() {
var d1 = +new Date() // + 號(hào)相當(dāng)于將時(shí)間對(duì)象做了隱士轉(zhuǎn)換
var arr = [];
for (var i = 0; i <1000 ; i++) {
// document.body.innerHTML += '<div style="width: 100px; height: 2px; border: 1px solid blue"></div>'
arr.push('<div style="width: 100px; height: 2px; border: 1px solid blue"></div>')
}
document.body.innerHTML = arr.join('');
var d2 = +new Date()
console.log(d2-d1)
}
fn();
</script>
</body>
</html>
DOM的核心總結(jié)
關(guān)于dom操作，我們主要針對(duì)于元素的操作。主要有創(chuàng)建、增、刪、改、查、屬性操作、事件操作。
-
創(chuàng)建
-
增加
-
刪
-
改
-
查
-
屬性操作
