Pembangunan DOM berkait rapat dengan trend umum penyeragaman WEB. Hanya berdasarkan logik semantik yang betul boleh DOM berfungsi dengan betul. Pada masa kini, keperluan seperti struktur semantik yang betul dan pemisahan persembahan dan kandungan telah menjadi keperluan asas dalam reka bentuk web. Oleh itu, dalam pembangunan bahagian hadapan web, kewujudan DOM sudah pasti menyediakan API yang sangat baik untuk sambungan pada lapisan pembentangan, lapisan tingkah laku dan juga tahap kandungan, dan telah menjadi bahagian yang amat diperlukan dalam aplikasi Ajax yang popular.
1. Degradasi lancar
1. Konsep
Pada zaman awal, sebelum JavaScript digunakan, kandungan dalam halaman web boleh dipaparkan seperti biasa dan pengguna boleh menyemak imbas ke kandungan yang berkaitan melalui peranti persisian (seperti tetikus pengalaman menyemak imbas ini mungkin tidak sesuai untuk pengguna). .
Berdasarkan permintaan ini, penyedia kandungan mempunyai matlamat yang rasional—iaitu, menggunakan JavaScript untuk meningkatkan pengalaman pengguna dan meningkatkan kelekatan pengguna tanpa menjejaskan paparan kandungan.
Dalam tajuk ini, terdapat syarat yang sangat jelas, iaitu ia tidak boleh menjejaskan paparan biasa kandungan Dalam erti kata lain, walaupun pelayar pengguna tidak menyokong JavaScript, pengguna masih boleh menyemak imbas secara normal.
2. Kaedah
①Asingkan JavaScript daripada HTML
Ini adalah perkara pertama yang harus difikirkan Jika kedua-duanya dipisahkan, HTML akan seperti kembali ke keadaan awal sebelum JavaScript digunakan, dan ia akan menjadi lancar seperti biasa.
Contohnya, tulis fungsi pengendalian acara seperti element.onClick ke dalam JavaScript dan ikatkannya pada fungsi tertentu.
②Kesan kaedah dalam JavaScript
Sesetengah kaedah yang dinyatakan sebelum ini, seperti getElementById, perlu ditentukan sama ada kaedah itu disokong.
<script> if(! document.getElementById) return false; </script>
Gunakan pernyataan if untuk mengesan sama ada kaedah itu disokong Jika ia disokong, anda boleh meneruskan Jika ia tidak disokong, ia akan kembali palsu secara langsung peranan dalam pengoptimuman prestasi.
2. Peristiwa onload mengikat
1. Sebab untuk mengikat
Sesetengah fungsi perlu dimuatkan sepenuhnya sebelum halaman dapat dilaksanakan dengan berkesan.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筱雨生 - 博客园</title>
<script>
function tagAttribute(){
var ali = document.getElementsByTagName('li');
for(var i = 0; i < ali.length; i++){
if(ali[i].firstChild.nodeType == 3){
alert(ali[i].childNodes[0].nodeValue);
}
}
}
window.onload = tagAttribute;
</script>
</head>
<body>
<h1 id="筱雨生">筱雨生</h1>
<p>時光飛逝，莫讓網絡蹉跎了歲月</p>
<div id="myBlog">
<ul>
<li title="JavaScript">JavaScript</li>
<li title="HTML">HTML</li>
<li title="CSS">CSS</li>
<li title="我的随笔">我的随笔</li>
<li></li>
</ul>
</div>
</body>
</html>
Dalam contoh di atas, jika window.onload tidak terikat, melaksanakan fungsi tagAttribute tidak akan bermakna.
Perkara lain yang perlu diperhatikan ialah fungsi terikat, bukan nilai fungsi, jadi tiada tanda kurungan selepasnya.
2. Kaedah mengikat
Jika anda hanya perlu mengikat fungsi, maka kaedah di atas boleh mencapai tujuan anda dengan mudah.
window.onload = myFunction;
Jika terdapat berbilang fungsi, anda boleh mengikatnya satu persatu. Namun, hasil daripada ini ialah hanya fungsi terakhir yang akan dilaksanakan dengan berkesan. Ini sebenarnya sangat mudah difahami.
Matlamat kami ialah tidak kira berapa banyak fungsi yang dilaksanakan apabila halaman dimuatkan, fungsi ini boleh dilaksanakan dengan berkesan, iaitu, fungsi ini berjaya terikat pada acara window.onload.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筱雨生 - 博客园</title>
<script>
function addOnLoadEvent(func){
var oldonload = window.onload; // 把现有的window.onload事件处理函数的值存储到变量oldonload
if(typeof window.onload != 'function'){ // 如果这个处理函数上还没有绑定任何函数
window.onload = func; // 将这个函数绑定到window.onload事件
}else{
window.onload = function(){ // 如果这个处理函数已经绑定了函数，就把这个函数追加到指令的末尾
oldonload();
func();
}
}
}
//自定义函数 tagAttribute
//功能：获取li标签中的title值
function tagAttribute(){
var ali = document.getElementsByTagName('li');
for(var i = 0; i < ali.length; i++){
if(ali[i].childNodes[0].nodeType == 3){
alert(ali[i].childNodes[0].nodeValue);
}
}
}
addOnLoadEvent(tagAttribute); // 为tagAttribute函数绑定到window.onload事件
</script>
</head>
<body>
<h1 id="筱雨生">筱雨生</h1>
<p>時光飛逝，莫讓網絡蹉跎了歲月</p>
<div id="myBlog">
<ul>
<li title="JavaScript">JavaScript</li>
<li title="HTML">HTML</li>
<li title="CSS">CSS</li>
<li title="我的随笔">我的随笔</li>
<li></li>
</ul>
</div>
</body>
</html>
javascript学习笔记 Dom知识点总结
JavaScript的window对象对应着浏览器窗口本身，因此这个对象的属性和方法统称为BOM（浏览器对象模型），如window.open(),window.location等。
JavaScript的document对象是指文档对象模型，主要是处理网页内容。DOM（Document Object Model）即文档对象模型，是针对 HTML 和 XML 文档的 API 。字母D指document（文档），字母O指object（对象），字母指Model（模型）。DOM 描绘了一个层次化的节点树。节点表示一个连接点，文档是由节点构成的集合，DOM的节点主要分为三类：元素节点、文本节点（不是文本内容）、属性节点。
获取节点的名称和类型
1.nodeName属性用来获取节点的名称，文本节点返回#text,元素节点返回标签名称（此时等价于tagName）。语法：目标节点.nodeName
2.nodeType属性用来获取节点的类型，元素节点：1，属性节点：2，文本节点：3。语法：目标节点.nodeType
3.nodeValue属性用来获取和设置节点的值。元素节点返回 null 。语法：目标节点.nodeValue
获取元素节点的方式
1. document.getElementById
通过ID查找，返回唯一元素节点
2. document.getElementsByName
通过name属性查找，返回元素节点数组
3. document.getElementsByTagName
通过标签名称查找，返回元素节点数组
以下三种方法属于HTML5 DOM，并非所有浏览器支持（如某些低版本IE就不支持），属于高级方法
4. document.getElementsByClassName
通过class属性的类名查找，返回元素节点数组
5. document.querySelector
通过selector条件获取元素节点，只返回符合条件的第一个元素节点
6. document.querySelectorAll
通过selector条件获取元素节点，返回所有符合条件的元素节点数组，多条件使用逗号分隔，表示要查找的元素必须符合所有逗号分隔的条件，如果一个元素只符合逗号分隔的条件中的一个，则不会被返回
小结： getElementById和querySelector只返回一个元素节点，而getElementsByName、getElementsByTagName、getElementsByClassName、querySelectorAll返回的是元素节点数组
节点指针
1.childNodes属性用来获取元素节点的子节点，返回节点数组。语法：父节点.childNodes;
2.children属性可以用来获取忽略了空白节点的有效节点（在某些浏览器上，空白符或换行符也是一个文本节点）。语法：父节点.children;
3.firstChild属性可以用来获取元素的第一个子节点，等价于 childNodes[0]。语法：父节点.firstChild;
3.lastChild属性可以用来获取元素的最后一个子节点，等价于 childNodes[childNodes.length-1]。语法：父节点.lastChild;
4.previousSibling属性用来获取目标节点的前一个兄弟节点。语法：目标节点.previousSibling;
5.nextSibling属性用来获取目标节点的后一个兄弟节点。语法：目标节点.nextSibling;
6.parentNode属性用来获取已知节点的父节点。语法：子节点.parentNode;
7.ownerDocument属性用来当前节点所在文档的根节点，等价于document。语法：目标节点.ownerDocument;
节点的操作
1.createElement方法用来创建元素节点。语法：document.createElement('元素标签名称');
2.createAttribute方法用来创建属性节点。语法：document.createAttribute('属性名称');
3.createTextNode方法用来创建文本节点。语法：document.createTextNode('文本内容');
4.appendChild方法用来在目标节点的子节点的末尾添加一个子节点（可以是createElement创建的元素节点，也可以是createTextNode创建的文本节点）。语法：parent.appendChild(要插入的节点);
5.insertBefore方法用来在目标元素的前面插入一个新元素节点，此时的指针在目标元素的父级上。语法：parent.insertBefore(newElement,targetElement);
6.DOM中没有insertAfter这个方法，但是可以通过以下方法来模拟insertAfter;
/*
* newElement : 要插入的新元素
* targetElement : 目标元素
*/
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
/*
如果目标元素是parent的最后一个子元素，则把新元素追加到parent元素上，
也就是在parent的子元素的末尾位置添加新元素
*/
parent.appendChild(newElement);
}else{
/*
否则，就把新元素添加到目标元素和目标元素的下一个兄弟元素之间
*/
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
7.replaceChild方法用来替换一个元素节点，此时的指针在目标元素的父级上。语法：parent.replaceChild(replaceElement,targetElement);
8.cloneChild方法用来克隆一个元素节点，传递一个布尔参数，参数为true时表示复制当前节点及其所有子节点，参数为false时表示支付至当前节点。语法：目标元素.cloneChild(true|false);
9.removeChild方法用来删除一个指定节点。语法：removeChild(要删除的节点);
10.getAttribute方法用来获取一个属性的值。语法：目标元素.getAttribute(元素属性名称);
11.setAttribute方法用来设置一个属性的值，没有该属性则创建。语法：目标元素.setAttribute(元素属性名称,属性值);
12.removeAttribute方法用来删除一个属性节点。语法：目标元素.removeAttribute(要删除的属性名称);
DOM操作内容
1.innerHTML属性用来获取和设置HTML内容。语法：元素节点.innerHTML 或者 元素节点.innerHTML = 'HTML字符串';
2.innerText|textContent属性用来获取和设置文本内容。fireFox使用textContent来获取和设置（注意兼容性）。语法：元素节点.innerText 或者 元素节点.innerText = 'HTML字符串';
DOM操作样式
1.style属性用来获取和设置元素的行内样式。语法：element.style;style属性只能获取和设置行内样式，对于如font-size这种样式属性，应该去掉 - 并且将 - 后面的第一个字母大写，驼峰法来获取和设置 如：element.style.fontSize , element.style.backgroundColor
2.getComputedStyle全局方法用来获取计算后的样式，第一个参数是元素节点，第二个参数是类型，如:hover,:active等伪类，默认情况下传 null ,某些IE版本使用currentStyle属性来获取 box.currentStyle。语法：window.getComputedStyle(元素，类型)
3.className属性用来获取和设置元素的样式名称。语法：element.className
4.自定义的 addClass() | hasClass() | removeClass() 方法
//元素是否含有某样式
function hasClass(element,className){
return !!element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'));
}
//向元素添加新样式
function addClass(element,className){
if(hasClass(element,className) == false){
element.className += ' '+className;
}
}
//移除元素的指定样式
function removeClass(element,className){
var currentClass = element.className;
if(hasClass(element,className)){
currentClass = currentClass.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),' ');
//去除空格
currentClass = currentClass.replace(/(^\s*)|(\s*$)/g,'');
element.className = currentClass;
}
}
DOM操作位置和大小
1.clientWidth属性用来获取元素的实际宽度，该值受滚动条和内边距影响，外边距和border不会影响。语法：
element.clientWidth;
2.clientHeight属性用来获取元素的实际高度，该值受滚动条和内边距影响，外边距和border不会影响。语法：
element.clientHeight;
3.offsetWidth属性用来获取元素的实际宽度，该值受边框和内边距影响，外边距和滚动条不会影响。语法：
element.offsetWidth;
4.offsetHeight属性用来获取元素的实际高度，该值受边框和内边距影响，外边距和滚动条不会影响。语法：
element.offsetHeight;
5.offsetTop和offsetLeft属性用来获取元素相对于父级的位置。该值受外边距影响。语法：element.offsetTop ||
element.offsetLeft;
6.scrollTop和scrollLeft属性用来获取滚动条被隐藏的区域大小，也可设置定位到该区域（比如返回顶部）。语法：
element.scrollTop || element.scrollLeft || element.scrollTop = 0;
常用到的简洁快速的document属性和方法
document.title 用来获取文档标题
document.domain 用来获取当前域名
document.URL 用来获取当前url路径
document.forms 获取表单集合
document.images 获取图片集合
document.body 获取body元素节点
document.compatMode 识别文档模式
Adakah JavaScript ditulis dalam C? Memeriksa buktiApr 25, 2025 am 12:15 AMYa, teras enjin JavaScript ditulis dalam C. 1) Bahasa C menyediakan prestasi yang efisien dan kawalan asas, yang sesuai untuk pembangunan enjin JavaScript. 2) Mengambil enjin V8 sebagai contoh, terasnya ditulis dalam C, menggabungkan kecekapan dan ciri-ciri berorientasikan objek C. 3) Prinsip kerja enjin JavaScript termasuk parsing, penyusun dan pelaksanaan, dan bahasa C memainkan peranan penting dalam proses ini.
Peranan JavaScript: Membuat Web Interaktif dan DinamikApr 24, 2025 am 12:12 AMJavaScript adalah di tengah -tengah laman web moden kerana ia meningkatkan interaktiviti dan dinamik laman web. 1) Ia membolehkan untuk menukar kandungan tanpa menyegarkan halaman, 2) memanipulasi laman web melalui Domapi, 3) menyokong kesan interaktif kompleks seperti animasi dan drag-and-drop, 4) mengoptimumkan prestasi dan amalan terbaik untuk meningkatkan pengalaman pengguna.
C dan JavaScript: Sambungan dijelaskanApr 23, 2025 am 12:07 AMC dan JavaScript mencapai interoperabilitas melalui webassembly. 1) Kod C disusun ke dalam modul WebAssembly dan diperkenalkan ke dalam persekitaran JavaScript untuk meningkatkan kuasa pengkomputeran. 2) Dalam pembangunan permainan, C mengendalikan enjin fizik dan rendering grafik, dan JavaScript bertanggungjawab untuk logik permainan dan antara muka pengguna.
Dari laman web ke aplikasi: Aplikasi pelbagai JavaScriptApr 22, 2025 am 12:02 AMJavaScript digunakan secara meluas di laman web, aplikasi mudah alih, aplikasi desktop dan pengaturcaraan sisi pelayan. 1) Dalam pembangunan laman web, JavaScript mengendalikan DOM bersama -sama dengan HTML dan CSS untuk mencapai kesan dinamik dan menyokong rangka kerja seperti JQuery dan React. 2) Melalui reaktnatif dan ionik, JavaScript digunakan untuk membangunkan aplikasi mudah alih rentas platform. 3) Rangka kerja elektron membolehkan JavaScript membina aplikasi desktop. 4) Node.js membolehkan JavaScript berjalan di sisi pelayan dan menyokong permintaan serentak yang tinggi.
Python vs JavaScript: Gunakan Kes dan Aplikasi MembandingkanApr 21, 2025 am 12:01 AMPython lebih sesuai untuk sains data dan automasi, manakala JavaScript lebih sesuai untuk pembangunan front-end dan penuh. 1. Python berfungsi dengan baik dalam sains data dan pembelajaran mesin, menggunakan perpustakaan seperti numpy dan panda untuk pemprosesan data dan pemodelan. 2. Python adalah ringkas dan cekap dalam automasi dan skrip. 3. JavaScript sangat diperlukan dalam pembangunan front-end dan digunakan untuk membina laman web dinamik dan aplikasi satu halaman. 4. JavaScript memainkan peranan dalam pembangunan back-end melalui Node.js dan menyokong pembangunan stack penuh.
Peranan C/C dalam JavaScript Jurubah dan PenyusunApr 20, 2025 am 12:01 AMC dan C memainkan peranan penting dalam enjin JavaScript, terutamanya digunakan untuk melaksanakan jurubahasa dan penyusun JIT. 1) C digunakan untuk menghuraikan kod sumber JavaScript dan menghasilkan pokok sintaks abstrak. 2) C bertanggungjawab untuk menjana dan melaksanakan bytecode. 3) C melaksanakan pengkompil JIT, mengoptimumkan dan menyusun kod hot-spot semasa runtime, dan dengan ketara meningkatkan kecekapan pelaksanaan JavaScript.
JavaScript in Action: Contoh dan projek dunia nyataApr 19, 2025 am 12:13 AMAplikasi JavaScript di dunia nyata termasuk pembangunan depan dan back-end. 1) Memaparkan aplikasi front-end dengan membina aplikasi senarai TODO, yang melibatkan operasi DOM dan pemprosesan acara. 2) Membina Restfulapi melalui Node.js dan menyatakan untuk menunjukkan aplikasi back-end.
JavaScript dan Web: Fungsi teras dan kes penggunaanApr 18, 2025 am 12:19 AMPenggunaan utama JavaScript dalam pembangunan web termasuk interaksi klien, pengesahan bentuk dan komunikasi tak segerak. 1) kemas kini kandungan dinamik dan interaksi pengguna melalui operasi DOM; 2) pengesahan pelanggan dijalankan sebelum pengguna mengemukakan data untuk meningkatkan pengalaman pengguna; 3) Komunikasi yang tidak bersesuaian dengan pelayan dicapai melalui teknologi Ajax.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
PhpStorm versi Mac
Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).
MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.
MantisBT
Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.
VSCode Windows 64-bit Muat Turun
Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft
