DOM--노드 추가, 삭제 및 수정을 위한 CRUD, DOM--예: 뉴스 글꼴 설정, DOM의 작은 예---드롭다운 메뉴 만들기
DOM--추가, 삭제 및 수정을 위한 CRUD of node
<!DOCTYPE html>
<html>
<head>
<title>DOM--节点的增删改查CRUD</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
p {
border: #00ccff solid 1px;
width: 200px;
height: 30px;
}
</style>
<script type="text/javascript">
//创建纯"文本节点"
function createAndAdd1(){
var objp = document.getElementById("p1");
var oTextNode = document.createTextNode("this is a text");
objp.appendChild(oTextNode);
}
//创建"标签元素"
function createAndAdd2(){
//创建一个标签节点:<input type="button" value="OK"/>
var oInputNode = document.createElement("input");
oInputNode.type = "button";
oInputNode.value = "OK";
//把所创建标签元素 添加到 p1 中
var objp2 = document.getElementById("p1");
objp2.appendChild(oInputNode);
}
//一种通用的节点创建方式
//创建"标签元素" ---通过标签元素的innerText或innerHTML来实现
function createAndAdd3(){
var objp3 = document.getElementById("p1");
//objp3.innerText = "湖南";
//objp3.innerText +="湖南";
//objp3.innerHTML = "<input type='button' value='OK'/>";
//objp3.innerHTML += "<input type='button' value='OK'/>";
objp3.innerHTML += "<a href='http://www.baidu.com'>百度</a>";
}
//////2删//////
function delNode(){
var objp = document.getElementById("p2");
//objp.removeNode(true);
//objp.removeNode(true);//连子树一起删除
//objp.removeNode(false);//只删除当前标签节点，子树不删除
//高版本建议采用removeChild()，删除更干净
objp.parentNode.removeChild(objp); //自己找父节点删除
}
//////3改//////
//移动替换
function updateNode(){
var objp2 = document.getElementById("p2");
var objp3 = document.getElementById("p3");
//高版本建议采用replaceChild()，替换更干净
objp2.parentNode.replaceChild(objp3,objp2); //用p3替换p2
}
//拷贝替换
function updateNode2(){
var objp2 = document.getElementById("p2");
var objp3 = document.getElementById("p3");
//克隆节点
//var objp3_2 = objp3.cloneNode();//空参即是false,不克隆属性及子节点--子树
var objp3_2 = objp3.cloneNode(true);//参数为true,克隆属性及子节点--子树
objp2.parentNode.replaceChild(objp3_2,objp2); //用p3替换p2
}
/////4查////前面早讲了
</script>
</head>
<body>
<p id="p1">
111
</p>
<p id="p2">
222
</p>
<p id="p3">
3333
</p>
<input type="button" value="创建并添加节点1" onclick="createAndAdd1();">
<br/>
<input type="button" value="创建并添加节点2" onclick="createAndAdd2();">
<br/>
<input type="button" value="创建并添加节点3" onclick="createAndAdd3();">
<br/>
<br/>
<br/>
<input type="button" value="删除节点" onclick="delNode();">
<br/>
<input type="button" value="移动替换节点" onclick="updateNode();">
<br/>
<input type="button" value="拷贝替换节点" onclick="updateNode2();">
<br/>
<br>
</body>
</html>DOM --예: 뉴스 글꼴 설정
<!DOCTYPE html>
<html>
<head>
<title>DOM--例子:设置新闻字体</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
p{
border:#00ccff solid 1px;
width:500px;
height:300px;
}
</style>
<script type="text/jscript">
function changeFont(){
var oNewsText = document.getElementById("newstext");
oNewsText.style.fontSize="20pt";
}
function changeFont2(){
var oNewsText = document.getElementById("newstext");
oNewsText.style.fontSize="16pt";
}
function changeFont3(){
var oNewsText = document.getElementById("newstext");
oNewsText.style.fontSize="12pt";
}
</script>
</head>
<body>
<a href="#" onclick="changeFont();">大字体</a>
<a href="javascript:changeFont2();">中字体</a>
<a href="javascript:void(0);" onclick="changeFont3();"> 小字体</a>
<hr/>
<!-- 用HTML的方式手动测试字体设置
<p id="newstext" style="font-size:18pt;">
-->
<p id="newstext">
根据《教育部学位中心关于2018年中外合作办学评估网上公示工作的通知》（学位中心[2018]55号）的相关要求，现将湖南城市学院与新西兰维特利亚理工学院合作举办视觉传达设计专业本科教育项目的2018年评估信息进行网上公示，接受社会监督。
</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>DOM--例子:设置新闻字体</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
p {
border: #00ccff solid 1px;
width: 500px;
height: 300px;
}
</style>
<script type="text/javascript">
function changeFont(size,color){
var objText=document.getElementById("newstext");
objText.style.fontSize=size+"pt";
objText.style.color=color;
}
</script>
</head>
<body>
<a href="javascript:changeFont(20,'red');">大字体</a>
<a href="javascript:changeFont(18,'yellow');">中字体</a>
<a href="javascript:changeFont(16,'blue');">小字体</a>
<hr/>
<p id="newstext">
根据《教育部学位中心关于2018年中外合作办学评估网上公示工作的通知》（学位中心[2018]55号）的相关要求，现将湖南城市学院与新西兰维特利亚理工学院合作举办视觉传达设计专业本科教育项目的2018年评估信息进行网上公示，接受社会监督。
</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>DOM--例子:设置新闻字体</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
p {
border: #00ccff solid 1px;
width: 500px;
height: 300px;
}
.norm{
color:#000000;
font-size:16px;
background-color:#cdd8d0;
}
.min{
color:#ff0000;
font-size:12px;
background-color:#f9fac2;
font-family:黑体;
}
.max{
color:#808080;
font-size:20px;
background-color:#9ce9b4;
}
</style>
<script type="text/javascript">
function changeFont(selectorName){
var objText=document.getElementById("newstext");
objText.className=selectorName;
}
</script>
</head>
<body>
<a href="javascript:changeFont('max');">大字体</a>
<a href="javascript:changeFont('norm');">中字体</a>
<a href="javascript:changeFont('min');"> 小字体</a>
<hr/>
<!--先用HTML的方式测试一下
<p id="newstext" class="max">
-->
<p id="newstext">
根据《教育部学位中心关于2018年中外合作办学评估网上公示工作的通知》（学位中心[2018]55号）的相关要求，现将湖南城市学院与新西兰维特利亚理工学院合作举办视觉传达设计专业本科教育项目的2018年评估信息进行网上公示，接受社会监督。
</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>DOM--例子:设置新闻字体</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/2.css" id="link1"/>
<style type="text/css">
a:link,a:visited{
color:#ff0000;
text-decoration:none;
}
a:hover{
color:#0000ff;
}
span:hover{
color:#0000ff;
background-color:#80ffff;
cursor:pointer;
}
</style>
<script type="text/javascript">
function changeFont(selectorName){
var objText=document.getElementById("newstext");
objText.className=selectorName;
}
function changeSuit(sNum)
{
var objLink=document.getElementById("link1");
objLink.href="css/"+sNum+".css";
}
</script>
</head>
<body>
<span onclick="changeSuit('1')">风格1</span>
<span onclick="changeSuit('2')">风格2</span>
<a href="javascript:changeFont('max');">大字体</a>
<a href="javascript:changeFont('norm');">中字体</a>
<a href="javascript:changeFont('min');"> 小字体</a>
<hr/>
<!--先用HTML的方式测试一下
<p id="newstext" class="max">
-->
<p id="newstext">
根据《教育部学位中心关于2018年中外合作办学评估网上公示工作的通知》（学位中心[2018]55号）的相关要求，现将湖南城市学院与新西兰维特利亚理工学院合作举办视觉传达设计专业本科教育项目的2018年评估信息进行网上公示，接受社会监督。
</p>
</body>
</html>DOM의 작은 예 --- 드롭다운 메뉴 만들기
<!DOCTYPE html>
<html>
<head>
<title>3listMenu.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
#newsid ul{
list-style:none;
}
#newslist li{
float:left;
width:180px;
}
#newslist li ul{
margin:0px;
padding:0px;
}
#newslist li ul li{
line-height:25px;
}
#newslist li a{
display:block;
color:#ffffff;
background-color:#0066cc;
text-decoration:none;
line-height:25px;
text-align:center;
}
#newslist li a:hover{
color:#0066cc;
background-color:#999999;
}
#newslist li ul a{
color:#000000;
background-color:#0099ff;
}
#newslist li ul li a:hover{
color:#0066ff;
background-color:#999999;
}
#newslist li ul{
display:none;
}
</style>
<script type="text/jscript">
function list(liNode){
var ulNode=document.getElementsByTagName("ul")[0];
with(ulNode.style){
display= display=="block"?"none":"block" ;
}
}
</script>
</head>
<body background="bg-img.jpg">
<!-- 制作一个下拉菜单：1)封装数据 2)定义基本样式 -->
<p id="newsid">
<ul id="newslist">
<li onmouseover="list(this)"; onmouseout="list(this)">
<a href="javascript:void(0)">城院新闻</a>
<ul style="display:none;">
<li>
<a href="http://www.hncu.net/">校园新闻内容摘要</a>
</li>
<li>
<a href="http://www.hncu.net/">校园新闻内容摘要</a>
</li>
<li>
<a href="http://www.hncu.net/">校园新闻内容摘要</a>
</li>
<li>
<a href="http://www.hncu.net/">校园新闻内容摘要</a>
</li>
</ul>
</li>
<li onmouseover="list(this)"; onmouseout="list(this)">
<a href="javascript:void(0)">大学新闻</a>
<ul style="display:none;">
<li>
<a href="http://www.hncu.net/">大学新闻内容摘要</a>
</li>
<li>
<a href="http://www.hncu.net/">大学新闻内容摘要</a>
</li>
<li>
<a href="http://www.hncu.net/">大学新闻内容摘要</a>
</li>
<li>
<a href="http://www.hncu.net/">大学新闻内容摘要</a>
</li>
</ul>
</li>
<li onmouseover="list(this)"; onmouseout="list(this)">
<a href="javascript:void(0)">社会新闻</a>
<ul style="display:none;">
<li>
<a href="http://www.hncu.net/">社会新闻内容摘要</a>
</li>
<li>
<a href="http://www.hncu.net/">社会新闻内容摘要</a>
</li>
<li>
<a href="http://www.hncu.net/">社会新闻内容摘要</a>
</li>
<li>
<a href="http://www.hncu.net/">社会新闻内容摘要</a>
</li>
</ul>
</li>
<li onmouseover="list(this)"; onmouseout="list(this)">
<a href="javascript:void(0)">就业新闻</a>
<ul style="display:none;">
<li>
<a href="http://www.hncu.net/">就业新闻内容摘要</a>
</li>
<li>
<a href="http://www.hncu.net/">就业新闻内容摘要</a>
</li>
<li>
<a href="http://www.hncu.net/">就业新闻内容摘要</a>
</li>
<li>
<a href="http://www.hncu.net/">就业新闻内容摘要</a>
</li>
</ul>
</li>
</ul>
</p>
</body>
</html>테이블 + 목록을 사용하여 메뉴 캡슐화
<!DOCTYPE html>
<html>
<head>
<title>用表格+列表封装菜单</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
table ul{
list-style:none;
/*background-color:#ff0000;*/
padding:0px;
margin:0px;
display:none;
/*display:block; */
}
table{
border: #8080ff;
width:100px;
}
table td{
border: #8080ff 1px solid;
}
table td a:link, table td a:visited{
text-decoration:none;
}
table td a:hover{
color:#df4011;
}
/*预定义两种菜单显示的类样式*/
.open{
display:block;
}
.close{
display:none;
}
</style>
<script type="text/javascript">
function list(objANode){
var oTdNode=objANode.parentNode;
//当前用户点击的菜单块对象：oulNode
var oulNode=oTdNode.getElementsByTagName("ul")[0];
//遍历所有"菜单ul"，如果是当前菜单块且处于"非open"状态则设样式为"open",否则全部设成"close"样式
var oTableNode=document.getElementById("tabFriends");
var collUlNodes=oTableNode.getElementsByTagName("ul");
for(var x=0;x<collUlNodes.length;x++){
if(collUlNodes[x]==oulNode && oulNode.className !="open"){
collUlNodes[x].className = "open";
}else{
collUlNodes[x].className = "close";
}
}
/*过渡版本
//ul的类样式有三种状态：open, close,空(初始时还未设)
if(oUlNode.className=="open"){
oUlNode.className="close";
}else{
oUlNode.className="open";
}
*/
}
</script>
</head>
<body>
<table id="tabFriends">
<tr>
<td>
<a href="javascript:void(0);" onclick="list(this);">好友菜单1</a>
<ul>
<li><a href="action1">一个好友11</a></li>
<li><a href="action2">一个好友12</a></li>
<li><a href="action3">一个好友13</a></li>
<li><a href="action4">一个好友14</a></li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0);" onclick="list(this);">好友菜单2</a>
<ul>
<li>一个好友21</li>
<li>一个好友22</li>
<li>一个好友23</li>
<li>一个好友24</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0);" onclick="list(this);">好友菜单3</a>
<ul>
<li>一个好友31</li>
<li>一个好友32</li>
<li>一个好友33</li>
<li>一个好友34</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0);" onclick="list(this);">好友菜单4</a>
<ul>
<li>一个好友41</li>
<li>一个好友42</li>
<li>一个好友43</li>
<li>一个好友44</li>
</ul>
</td>
</tr>
</table>
</body>
</html>관련 기사:
첫 번째 빠른 시작하기 - 기본 JS 연습의 날짜, 수학 및 전역 개체
2부 빠른 시작 - JS 기본 연습 BOM - 브라우저 개체 모델, DOM
관련 동영상:
프런트엔드 JS 개발을 위한 27가지 고전 실용적인 비디오 튜토리얼-무료 온라인 비디오 튜토리얼
위 내용은 3부 빠른 시작 - JS 기본 실제 애플리케이션 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
C/C에서 JavaScript까지 : 모든 것이 어떻게 작동하는지Apr 14, 2025 am 12:05 AMC/C에서 JavaScript로 전환하려면 동적 타이핑, 쓰레기 수집 및 비동기 프로그래밍으로 적응해야합니다. 1) C/C는 수동 메모리 관리가 필요한 정적으로 입력 한 언어이며 JavaScript는 동적으로 입력하고 쓰레기 수집이 자동으로 처리됩니다. 2) C/C를 기계 코드로 컴파일 해야하는 반면 JavaScript는 해석 된 언어입니다. 3) JavaScript는 폐쇄, 프로토 타입 체인 및 약속과 같은 개념을 소개하여 유연성과 비동기 프로그래밍 기능을 향상시킵니다.
JavaScript 엔진 : 구현 비교Apr 13, 2025 am 12:05 AM각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.
브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.
Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.
Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.
JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AMJavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.
JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AMJavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.
Demystifying JavaScript : 그것이하는 일과 중요한 이유Apr 09, 2025 am 12:07 AMJavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션
2 몇 주 전ByDDD
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
뜨거운 도구
SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경
Eclipse용 SAP NetWeaver 서버 어댑터
Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.
에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음
