Jadual Kandungan
CSS Demo
Rumah hujung hadapan web tutorial js JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)_基础知识

JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)_基础知识

May 16, 2016 pm 05:54 PM
Tambah secara dinamik

http://www.cnblogs.com/TomXu/archive/2012/02/16/2351331.html , 在回来看这里文章,你一定会有更深刻的认识。因为我在这里介绍概念上的东西比较少,看下面的例子,对初学的朋友可能会有些吃力!

1、DOM的架构

复制代码 代码如下:



document


CSS Demo


我喜欢美女,特别是高个的美女





这个文档的DOM表示如下图:

图片表示一个HTML文档的树.

所有DOM树结构表现为不同种类的Node对象的一个数,firstChild,lastChild,nextSibling,previousSibling和ParentNode属性提供遍历节点的树的一种办法,appendChild,removeChild,replaceChildh和insertBefore这样的方法可以像文档中添加节点或者从文档中删除节点。不明白没关系接下来我将用大量的例子让你明白。

1、先创建一个使用CSS美化的列表
复制代码 代码如下:



2、加一个div 元素.
复制代码 代码如下:

3、你现在应该看到如下图:

4、根据上图获取元素总数
复制代码 代码如下:

var Tools = {};
Tools.getElementCount = function(e){
var count =0;
elementTotal(e);
document.table.txt.value = "element:"+ count;
function elementTotal(e)
{
if(e.nodeType == 1) count++;
var children = e.childNodes;
for(var i = 0;i{
elementTotal(children[i]);
}
}
};

备注:大家使用可以再body加入
5、将文本全部大写
复制代码 代码如下:

Tools.ModifyElement = function modify(e){
if(e.nodeType == 3)
e.data = e.data.toUpperCase();
else
{
for(var i = e.firstChild;i!=null;i=i.nextSibling)
modify(i);
}
};

备注:大家使用可以再body加入

效果:

 

6、给列表排序
复制代码 代码如下:

Tools.documentSort = function(e){
var textArray = [];
if(typeof e =="string") e = document.getElementById(e);
for(var x = e.firstChild; x!= null;x=x.nextSibling)
if(x.nodeType == 1) textArray.push(x);
textArray.sort(function(n,m){
var s = n.firstChild.firstChild.data;
var t = m.firstChild.firstChild.data;
if(s>t) return -1;
else if(selse return 0;
});

备注:大家使用可以再body加入

效果:

7、动态插入列表项(子节点) 
复制代码 代码如下:

Tools.insertElement = function(n,e){
if(typeof n == "string") n = document.getElementById(n);
var li = document.createElement(e);
var a = document.createElement("a");
a.setAttribute("href","#");
var txt = document.createTextNode("HotBlog");
a.appendChild(txt);
li.appendChild(a);
var parent = n.parentNode;
parent.insertBefore(li,n);
};

备注:大家使用可以再body加入

效果: 

8、使用javascript类动态创建文档
1、样式表
复制代码 代码如下:

.tooltip{background:url('2.jpg'); border:solid 1px #99ffcc; width:200px;height:200px;}//这里的图片大家要该一下
.toolcontent{background-color:#ffffff; border:solid 1px #99ff00; padding:5px; font:tahoma 12px; color:#000000;}

2、javascript类
复制代码 代码如下:

function Tooltip()
{
this.tooltip = document.createElement("div");
this.tooltip.style.position = "absolute";
this.tooltip.className = "tooltip";
this.content = document.createElement("div");
this.content.style.position = "relative";
this.content.className = "toolcontent";
this.tooltip.appendChild(this.content);
}
Tooltip.prototype.show = function(text,x,y)
{
this.content.innerHTML = text;
this.tooltip.style.left = x+"px";
this.tooltip.style.top = y+"px";
this.tooltip.style.visibility = "visible";
if(this.tooltip.parentNode != document.body)
document.body.appendChild(this.tooltip);
};
Tooltip.prototype.hide = function(){ this.tooltip.style.visibility ="hidden";};
var t = new Tooltip();
function hide()
{
t.hide();
}
function show()
{
t.show("hello ",300,0);
}
function init()
{
document.operator.show.onclick = show;
document.operator.hide.onclick = hide;
}

备注:配合上面使用必须还完成以下步骤:1、将body中的onload=init();2 在body中添加 :




效果:(隐藏看到什么了) 

9、动态添加样式和删除样式

1、样式表
复制代码 代码如下:

.container{font-family:tahoma;font-size:14px;border:solid 1px #99ffcc; width:200px;height:140px;float:left;}
.container ul{list-style:none;padding:1px 0px 0px 0px; margin:0px;}
.container ul li{ border-bottom:solid 1px #99ffcc; margin:0px;height:27px;}
.container ul li a{background-color:gray;text-decoration:none;display:block; border-left:solid 10px red;margin:0px; padding:5px 0px 5px 10px;}
.container ul li a:hover{background-color:red; color:#ffffff; }

2、工具函数(动态添加、删除样式)
复制代码 代码如下:

var CSSclass = {};
CSSclass.is = function(e,c){
if(typeof e == "string") e = document.getElementById(e);
var classes = e.className;
if(!classes) return false;
if(classes == c) return true;
return e.className.search("\\b" +c +"\\b*") != -1;
};
CSSclass.add = function(e,c){
if(typeof e == "string") e = document.getElementById(e);
if(CSSclass.is(e,c))return;
//if(e.className) c=""+c;
e.className += c;
};
CSSclass.remove = function(e,c){
if(typeof e == "string") e = document.getElementById(e);
//e.id = e.id.replace(new RegExp("\\b" +e.id +"\\b\\s*","g"),"");
e.className = e.className.replace(new RegExp("\\b"+c+"\\b\\s*","g"),"");
};

3、在body中加入如下元素
复制代码 代码如下:






效果: 


没添加样式的样子

加了样式之后。

小结:Dom文档操作、内联样式、动态设置样式等就给大家分享到这里吧!其实还有很多细节没给大家呈现。下一篇我将分享我学习事件的历程。

(很多没有备注,大家有问题可以给我留言!) 
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri? Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri? Mar 18, 2025 pm 03:12 PM

Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.

Bagaimanakah saya mengoptimumkan kod JavaScript untuk prestasi dalam penyemak imbas? Bagaimanakah saya mengoptimumkan kod JavaScript untuk prestasi dalam penyemak imbas? Mar 18, 2025 pm 03:14 PM

Artikel ini membincangkan strategi untuk mengoptimumkan prestasi JavaScript dalam pelayar, memberi tumpuan kepada mengurangkan masa pelaksanaan dan meminimumkan kesan pada kelajuan beban halaman.

Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan? Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan? Apr 04, 2025 pm 02:42 PM

Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...

Bagaimanakah saya boleh debug kod javascript dengan berkesan menggunakan alat pemaju pelayar? Bagaimanakah saya boleh debug kod javascript dengan berkesan menggunakan alat pemaju pelayar? Mar 18, 2025 pm 03:16 PM

Artikel ini membincangkan debugging JavaScript yang berkesan menggunakan alat pemaju pelayar, memberi tumpuan kepada menetapkan titik putus, menggunakan konsol, dan menganalisis prestasi.

Siapa yang dibayar lebih banyak Python atau JavaScript? Siapa yang dibayar lebih banyak Python atau JavaScript? Apr 04, 2025 am 12:09 AM

Tidak ada gaji mutlak untuk pemaju Python dan JavaScript, bergantung kepada kemahiran dan keperluan industri. 1. Python boleh dibayar lebih banyak dalam sains data dan pembelajaran mesin. 2. JavaScript mempunyai permintaan yang besar dalam perkembangan depan dan stack penuh, dan gajinya juga cukup besar. 3. Faktor mempengaruhi termasuk pengalaman, lokasi geografi, saiz syarikat dan kemahiran khusus.

Bagaimanakah saya menggunakan peta sumber untuk debug kod JavaScript minified? Bagaimanakah saya menggunakan peta sumber untuk debug kod JavaScript minified? Mar 18, 2025 pm 03:17 PM

Artikel ini menerangkan cara menggunakan peta sumber untuk debug JavaScript minifikasi dengan memetakannya kembali ke kod asal. Ia membincangkan membolehkan peta sumber, menetapkan titik putus, dan menggunakan alat seperti Chrome Devtools dan Webpack.

Bermula dengan Chart.js: Pie, Donut, dan Carta Bubble Bermula dengan Chart.js: Pie, Donut, dan Carta Bubble Mar 15, 2025 am 09:19 AM

Tutorial ini akan menerangkan cara membuat carta pai, cincin, dan gelembung menggunakan carta.js. Sebelum ini, kami telah mempelajari empat jenis carta carta.js: carta baris dan carta bar (tutorial 2), serta carta radar dan carta rantau polar (Tutorial 3). Buat carta pai dan cincin Carta pai dan carta cincin sangat sesuai untuk menunjukkan perkadaran keseluruhan yang dibahagikan kepada bahagian yang berlainan. Sebagai contoh, carta pai boleh digunakan untuk menunjukkan peratusan singa lelaki, singa wanita dan singa muda dalam safari, atau peratusan undi yang diterima oleh calon yang berbeza dalam pilihan raya. Carta pai hanya sesuai untuk membandingkan parameter tunggal atau dataset. Harus diingat bahawa carta pai tidak dapat menarik entiti dengan nilai sifar kerana sudut kipas dalam carta pai bergantung pada saiz berangka titik data. Ini bermaksud mana -mana entiti dengan perkadaran sifar

TypeScript untuk pemula, Bahagian 2: Jenis Data Asas TypeScript untuk pemula, Bahagian 2: Jenis Data Asas Mar 19, 2025 am 09:10 AM

Sebaik sahaja anda telah menguasai tutorial TypeScript peringkat kemasukan, anda harus dapat menulis kod anda sendiri dalam IDE yang menyokong TypeScript dan menyusunnya ke dalam JavaScript. Tutorial ini akan menyelam ke dalam pelbagai jenis data dalam TypeScript. JavaScript mempunyai tujuh jenis data: null, undefined, boolean, nombor, rentetan, simbol (diperkenalkan oleh ES6) dan objek. Typescript mentakrifkan lebih banyak jenis atas dasar ini, dan tutorial ini akan meliputi semuanya secara terperinci. Jenis data null Seperti JavaScript, Null dalam TypeScript

See all articles