Community
Learn
Tools Library
AI Tools
Leisure
search
English
Table of Contents
1、文档：DOM中的“D”
2、对象：DOM中的“O”
3、模型：DOM中的“M”
What to buy
Copy after login

如果你能把一个文档的各种元素想象成一棵家谱树，我们就可以用同样的术语描述DOM。但我觉得称为“节点树”更准确

4、节点" >、
    (这三个属于兄弟关系。
      也是一个父元素，有三个子元素，他们都是
    • 元素。
      Copy after login

如果你能把一个文档的各种元素想象成一棵家谱树，我们就可以用同样的术语描述DOM。但我觉得称为“节点树”更准确

4、节点

4、1元素节点
4、2文本节点
4、3属性节点
4、4 CSS
So dose this headline
4、5获取元素
1)getElementById
2)getElementsByTagName
3)getElementByClassName
5 获取和设置属性
Home Web Front-end HTML Tutorial 《Java Script DOM编程艺术》读书笔记--DOM_html/css_WEB-ITnose

《Java Script DOM编程艺术》读书笔记--DOM_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jun 21, 2016 am 08:51 AM

1、文档：DOM中的“D”

"D"代表document(文档)

2、对象：DOM中的“O”

“O”代表object(对象) 对象的分类

  • 用户定义对象(user-defined object)
  • 内建对象(native object)
  • 宿主对象(host object)

window对象window对象对应着浏览器窗口本身，这个对象的属性和方法通常统称为BOM（浏览器对象模型）BOM提供了window.open和window.blur等方法。以至于被滥用于各种弹出窗口和下拉菜单

3、模型：DOM中的“M”

“M”代表“Model”（模型）DOM把一份文档表示为一棵树（数学意义上的概念）示例代码

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <title>Shoping List<title>  </head>  <body>     <h1 id="What-to-buy">What to buy</h1>     <p title="a gentle reminder">Don’t forget to buy this stuff.<p>     <ul id="purchases">        <li> A tin of beans<li>        <li class="sale">Cheese<li>        <li class="sale important">Milk<li>        </ul>    <body>  </html>代码中<html>相当于树根，即根元素。<head>和<body>属于下一个分支，位于同一层次且互不包含，属于兄弟关系。<head>元素有两个子元素<meta>和<title>(属于兄弟关系)<body>元素有三个子元素<p>、<h1 id="ul-这三个属于兄弟关系-ul-也是一个父元素-有三个子元素-他们都是-li-元素-pre-div-class-contentsignin-Copy-after-login-div-div-p-如果你能把一个文档的各种元素想象成一棵家谱树-我们就可以用同样的术语描述DOM-但我觉得称为-strong-节点树-strong-更准确-p-h-节点">、<ul>(这三个属于兄弟关系。<ul>也是一个父元素，有三个子元素，他们都是<li>元素。
Copy after login

如果你能把一个文档的各种元素想象成一棵家谱树，我们就可以用同样的术语描述DOM。但我觉得称为“节点树”更准确

4、节点

节点（node）属于网络术语，它表示网络中的一个连接点。一个网络就是由一些节点构成的集合。DOM也是同样的情况，文档是由节点构成的集合。

  • 元素节点
  • 文本节点
  • 属性节点

4、1元素节点

DOM的原子是元素节点（element node）诸如、

、之类的元素。标签的名字就是元素的名字。元素也可以包含其他的元素。没有被包含在其他元素的唯一元素是元素，它是我们的节点树的根元素。

4、2文本节点

在上述例子中，

元素包含着文本“don't forget to buy this stuff.”它就是一个文本节点（text node）。

4、3属性节点

属性节点是对元素做出更具体的描述。例如，几乎所有的元素都有一个title属性，我们可以利用这个属性对包含在元素里的东西做出准确的描述：

<p title="a gentle reminder">Don't forget to buy this stuff.<p>
Copy after login

在DOM中title="a gentle reminder"是一个属性节点（attribute node），在前面的例子中无序清单元素

    有个id属性。有些清单元素
  • 有class属性。

    三者之间的关系.png

    4、4 CSS

    类似javascript脚本，我们也可以将CSS样式嵌在文档部分（style>标签之间）。也可以放在另外的一个文件里。**在HTML文件中引用CSS文件的格式： 

    <link type="text/css" href="file.css" rel="stylesheet">
    Copy after login

    继承（inheritance)是CSS技术中的一项强大功能。1)、 class属性

    <p class="special">This pargraph has the special class<p><h2 id="So-dose-this-headline">So dose this headline</h2>
    Copy after login

    在样式表里可以为上面的代码进行定义

    special{font-style: italic;}
    Copy after login

    还可以这样定义

    h2.special{text-transform: uppercase;}
    Copy after login

    2)、id属性id属性的用途是给网页里的某个元素加上一个独一无二的标识符：

    <ul id="purchases">
    Copy after login

    样式表定义

    #purchases{border:1px solid white;background-color：#333;color：#ccc;padding:1em;}
    Copy after login
    #purchases li{font-weight:bold;}
    Copy after login

    4、5获取元素

    有3种DOM方法可获取元素节点，分别是通过元素ID、通过标签名和通过类名字来获取

    • getElementById
    • getElementsByTagName
    • getElementsByClassName

    1)getElementById

    此方法将返回一个与那个有着给定id属性值的元素节点对应的对象，在javascript里注意大小写。它是document对象特有的函数，在脚本代码里，函数名的后面必须跟有一对圆括号，这对圆括号包含这函数的参数。document.getElementById(id)在getElementById方法中只有一个参数：你想获得的那个元素的id属性的值，这个id属性必须放在单引号或双引号里。docment.getElementById("purchases")这个调用将返回一个对象，这个对象对应着document对象里的一个独一无二的元素，那个元素的HTLM id属性值是purchases

              Shoping List<title>  </head>  <body>     <h1 id="What-to-buy">What to buy</h1>     <p title="a gentle reminder">Don’t forget to buy this stuff.<p>     <ul id="purchases">        <li> A tin of beans<li>        <li class="sale">Cheese<li>        <li class="sale important">Milk<li>        </ul>     <script>         alert(typeof docment.getElementById("purchases"));     </script>    <body>  </html>//利用`typeof`操作符进行验证（typeof操作符可以告诉我们它的操作数是一个字母、数值、函数、布尔值还是对象。</pre><div class="contentsignin">Copy after login</div></div>   <p>验证可得是一个对象</p>   <h3 id="getElementsByTagName">2)getElementsByTagName</h3>   <p>getElementsByTagName方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。它的参数是标签的名字：decument.getElementByTagName(tag)</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>alert(document.getElementsByTagName("li").length);//显示文档里的列表元素个数为：3</pre><div class="contentsignin">Copy after login</div></div>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <title>Shoping List<title>  </head>  <body>     <h1 id="What-to-buy">What to buy</h1>     <p title="a gentle reminder">Don’t forget to buy this stuff.<p>     <ul id="purchases">        <li> A tin of beans<li>        <li class="sale">Cheese<li>        <li class="sale important">Milk<li>        </ul>     <script>         var items=document.getElementByTagName("li");         for (var i=0; i<items.length;i++){         alert(typeof items[i]);         }     </script>    <body>  </html>//代码运行结果显示三个alert对话框，显示的消息都是“object”。</pre><div class="contentsignin">Copy after login</div></div>   <p>getElementsByTagName允许把一个通配符作为它的参数，通配符（*）必须放在引号里</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>alert(document.getElementsByTagName("*").length);//可以知道文档里有多少个元素节点</pre><div class="contentsignin">Copy after login</div></div>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>var shopping=document.getElementById("purchases");var items=shopping.getElementsByTagName("*");//程序运行结果，items数组将只包含id属性值是purshase的元素清单的元素</pre><div class="contentsignin">Copy after login</div></div>   <h3 id="getElementByClassName">3)getElementByClassName</h3>   <p>这个方法让我们能够通过class属性中的类名来访问元素，getElementByClassName也只接受一个参数，就是类名：</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>getElementByClassName(class)</pre><div class="contentsignin">Copy after login</div></div>   <p>这个方法的返回值也与getElementsByTagName类似，都是一个具有相同类名的元素的数组。</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>document.getElementsByClassName("sale")</pre><div class="contentsignin">Copy after login</div></div>   <p>利用这种方法还可有查找那些带有多个类名的元素。多个类名之间用空格分开即可</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>alert(document.getElementsByClassName("important sale").length);//对话框显示1，表示只有一个元素匹配。类名的顺序不重要，就算元素还带有更多类名也没有关系。</pre><div class="contentsignin">Copy after login</div></div>   <p>也可以和getElementById组合使用</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>     var shopping=document.getElementById("purchase");     var sales=shopping.getElementsByClassName("sale");sales数组中包含的就只是位于“purchases”列表中的带有“sale”类的元素。</pre><div class="contentsignin">Copy after login</div></div>   <p>getElementByClassName方法非常有用，但只有较新的浏览器才支持它。所以，需要使用已有的DOM方法来实现自己的getElementsByClassName。</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function getElementsByClassName(node,classname){if (node.getElementsByClassName){//使用现有的方法return node.getElementsByTagName("*");for (var i=0; i<elems.length;i++){  if(elems[i].ClassName.indexof(classname)!= -1){results[results.length]=elems[i];          }      }return results；    }}</pre><div class="contentsignin">Copy after login</div></div>   <h4 id="获取和设置属性">5 获取和设置属性</h4>   <ul>       <li>
<strong>getAttribute方法</strong>(获取元素的属性)</li>    <li>
<strong>setAttribute方法</strong>(更改属性节点值)5、1getAttributegetAttribute是一个函数，它只有一个参数(你所要查询的属性的名称)</li>   </ul>   


						</div>
					</div>
					<div class="wzconShengming_sp">
						<div class="bzsmdiv_sp">Statement of this Website</div>
						<div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div>
					</div>
				</div>

				<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="2507867629"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>


				<div class="AI_ToolDetails_main4sR">


				<ins class="adsbygoogle"
        style="display:block"
        data-ad-client="ca-pub-5902227090019525"
        data-ad-slot="3653428331"
        data-ad-format="auto"
        data-full-width-responsive="true"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>


					<!-- <div class="phpgenera_Details_mainR4">
						<div class="phpmain1_4R_readrank">
							<div class="phpmain1_4R_readrank_top">
								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									src="/static/imghw/hotarticle2.png" alt="" />
								<h2>Hot Article</h2>
							</div>
							<div class="phpgenera_Details_mainR4_bottom">
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/faq/1796785841.html" title="Assassin's Creed Shadows: Seashell Riddle Solution" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Seashell Riddle Solution</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 weeks ago</span>
										<span>By DDD</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/faq/1796789525.html" title="What's New in Windows 11 KB5054979 & How to Fix Update Issues" class="phpgenera_Details_mainR4_bottom_title">What's New in Windows 11 KB5054979 & How to Fix Update Issues</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>3 weeks ago</span>
										<span>By DDD</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/faq/1796785857.html" title="Where to find the Crane Control Keycard in Atomfall" class="phpgenera_Details_mainR4_bottom_title">Where to find the Crane Control Keycard in Atomfall</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 weeks ago</span>
										<span>By DDD</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/faq/1796784440.html" title="Roblox: Dead Rails - How To Complete Every Challenge" class="phpgenera_Details_mainR4_bottom_title">Roblox: Dead Rails - How To Complete Every Challenge</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>1 months ago</span>
										<span>By DDD</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/faq/1796793874.html" title="How to fix KB5055523 fails to install in Windows 11?" class="phpgenera_Details_mainR4_bottom_title">How to fix KB5055523 fails to install in Windows 11?</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>2 weeks ago</span>
										<span>By DDD</span>
									</div>
								</div>
														</div>
							<div class="phpgenera_Details_mainR3_more">
								<a href="https://www.php.cn/article.html">Show More</a>
							</div>
						</div>
					</div> -->


											<div class="phpgenera_Details_mainR3">
							<div class="phpmain1_4R_readrank">
								<div class="phpmain1_4R_readrank_top">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/hottools2.png" alt="" />
									<h2>Hot AI Tools</h2>
								</div>
								<div class="phpgenera_Details_mainR3_bottom">
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
													<h3>Undresser.AI Undress</h3>
												</a>
												<p>AI-powered app for creating realistic nude photos</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
													<h3>AI Clothes Remover</h3>
												</a>
												<p>Online AI tool for removing clothes from photos.</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
													<h3>Undress AI Tool</h3>
												</a>
												<p>Undress images for free</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
													<h3>Clothoff.io</h3>
												</a>
												<p>AI clothes remover</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
													<h3>Video Face Swap</h3>
												</a>
												<p>Swap faces in any video effortlessly with our completely free AI face swap tool!</p>
											</div>
										</div>
																</div>
								<div class="phpgenera_Details_mainR3_more">
									<a href="https://www.php.cn/ai">Show More</a>
								</div>
							</div>
						</div>
					

					<script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script>

					<div class="phpgenera_Details_mainR4">
						<div class="phpmain1_4R_readrank">
							<div class="phpmain1_4R_readrank_top">
								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									src="/static/imghw/hotarticle2.png" alt="" />
								<h2>Hot Article</h2>
							</div>
							<div class="phpgenera_Details_mainR4_bottom">
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/faq/1796785841.html" title="Assassin's Creed Shadows: Seashell Riddle Solution" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Seashell Riddle Solution</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 weeks ago</span>
										<span>By DDD</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/faq/1796789525.html" title="What's New in Windows 11 KB5054979 & How to Fix Update Issues" class="phpgenera_Details_mainR4_bottom_title">What's New in Windows 11 KB5054979 & How to Fix Update Issues</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>3 weeks ago</span>
										<span>By DDD</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/faq/1796785857.html" title="Where to find the Crane Control Keycard in Atomfall" class="phpgenera_Details_mainR4_bottom_title">Where to find the Crane Control Keycard in Atomfall</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 weeks ago</span>
										<span>By DDD</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/faq/1796784440.html" title="Roblox: Dead Rails - How To Complete Every Challenge" class="phpgenera_Details_mainR4_bottom_title">Roblox: Dead Rails - How To Complete Every Challenge</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>1 months ago</span>
										<span>By DDD</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/faq/1796793874.html" title="How to fix KB5055523 fails to install in Windows 11?" class="phpgenera_Details_mainR4_bottom_title">How to fix KB5055523 fails to install in Windows 11?</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>2 weeks ago</span>
										<span>By DDD</span>
									</div>
								</div>
														</div>
							<div class="phpgenera_Details_mainR3_more">
								<a href="https://www.php.cn/article.html">Show More</a>
							</div>
						</div>
					</div>


											<div class="phpgenera_Details_mainR3">
							<div class="phpmain1_4R_readrank">
								<div class="phpmain1_4R_readrank_top">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/hottools2.png" alt="" />
									<h2>Hot Tools</h2>
								</div>
								<div class="phpgenera_Details_mainR3_bottom">
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
													<h3>Notepad++7.3.1</h3>
												</a>
												<p>Easy-to-use and free code editor</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Chinese version" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_title">
													<h3>SublimeText3 Chinese version</h3>
												</a>
												<p>Chinese version, very easy to use</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Zend Studio 13.0.1" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_title">
													<h3>Zend Studio 13.0.1</h3>
												</a>
												<p>Powerful PHP integrated development environment</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
													<h3>Dreamweaver CS6</h3>
												</a>
												<p>Visual web development tools</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac version" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_title">
													<h3>SublimeText3 Mac version</h3>
												</a>
												<p>God-level code editing software (SublimeText3)</p>
											</div>
										</div>
																	</div>
								<div class="phpgenera_Details_mainR3_more">
									<a href="https://www.php.cn/ai">Show More</a>
								</div>
							</div>
						</div>
										

					
					<div class="phpgenera_Details_mainR4">
						<div class="phpmain1_4R_readrank">
							<div class="phpmain1_4R_readrank_top">
								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									src="/static/imghw/hotarticle2.png" alt="" />
								<h2>Hot Topics</h2>
							</div>
							<div class="phpgenera_Details_mainR4_bottom">
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/faq/gmailyxdlrkzn" title="Where is the login entrance for gmail email?" class="phpgenera_Details_mainR4_bottom_title">Where is the login entrance for gmail email?</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>7733</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>15</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/faq/java-tutorial" title="Java Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java Tutorial</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1643</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>14</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/faq/cakephp-tutor" title="CakePHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP Tutorial</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1397</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>52</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/faq/laravel-tutori" title="Laravel Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel Tutorial</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1290</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>25</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/faq/php-tutorial" title="PHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP Tutorial</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1233</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>29</span>
										</div>
									</div>
								</div>
														</div>
							<div class="phpgenera_Details_mainR3_more">
								<a href="https://www.php.cn/faq/zt">Show More</a>
							</div>
						</div>
					</div>
				</div>
			</div>
							<div class="Article_Details_main2">
					<div class="phpgenera_Details_mainL4">
						<div class="phpmain1_2_top">
							<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
									src="/static/imghw/index2_title2.png" alt="" /></a>
						</div>
						<div class="phpgenera_Details_mainL4_info">

													<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/faq/1796791823.html" title="Is HTML easy to learn for beginners?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/174395586298618.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Is HTML easy to learn for beginners?" />
								</a>
								<a href="https://www.php.cn/faq/1796791823.html" title="Is HTML easy to learn for beginners?" class="phphistorical_Version2_mids_title">Is HTML easy to learn for beginners?</a>
								<span class="Articlelist_txts_time">Apr 07, 2025 am	 12:11 AM</span>
								<p class="Articlelist_txts_p">HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/faq/1796792987.html" title="The Roles of HTML, CSS, and JavaScript: Core Responsibilities" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/174411031220217.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="The Roles of HTML, CSS, and JavaScript: Core Responsibilities" />
								</a>
								<a href="https://www.php.cn/faq/1796792987.html" title="The Roles of HTML, CSS, and JavaScript: Core Responsibilities" class="phphistorical_Version2_mids_title">The Roles of HTML, CSS, and JavaScript: Core Responsibilities</a>
								<span class="Articlelist_txts_time">Apr 08, 2025 pm	 07:05 PM</span>
								<p class="Articlelist_txts_p">HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/faq/1796791144.html" title="What is an example of a starting tag in HTML?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/174386905283883.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What is an example of a starting tag in HTML?" />
								</a>
								<a href="https://www.php.cn/faq/1796791144.html" title="What is an example of a starting tag in HTML?" class="phphistorical_Version2_mids_title">What is an example of a starting tag in HTML?</a>
								<span class="Articlelist_txts_time">Apr 06, 2025 am	 12:04 AM</span>
								<p class="Articlelist_txts_p">AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/faq/1796794693.html" title="Understanding HTML, CSS, and JavaScript: A Beginner's Guide" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/174438733162787.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Understanding HTML, CSS, and JavaScript: A Beginner's Guide" />
								</a>
								<a href="https://www.php.cn/faq/1796794693.html" title="Understanding HTML, CSS, and JavaScript: A Beginner's Guide" class="phphistorical_Version2_mids_title">Understanding HTML, CSS, and JavaScript: A Beginner's Guide</a>
								<span class="Articlelist_txts_time">Apr 12, 2025 am	 12:02 AM</span>
								<p class="Articlelist_txts_p">WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/faq/1796790390.html" title="Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/246/273/174312372425268.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?" />
								</a>
								<a href="https://www.php.cn/faq/1796790390.html" title="Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?" class="phphistorical_Version2_mids_title">Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?</a>
								<span class="Articlelist_txts_time">Apr 04, 2025 pm	 11:54 PM</span>
								<p class="Articlelist_txts_p">GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/faq/1796790382.html" title="How to implement adaptive layout of Y-axis position in web annotation?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/246/273/174312432456726.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How to implement adaptive layout of Y-axis position in web annotation?" />
								</a>
								<a href="https://www.php.cn/faq/1796790382.html" title="How to implement adaptive layout of Y-axis position in web annotation?" class="phphistorical_Version2_mids_title">How to implement adaptive layout of Y-axis position in web annotation?</a>
								<span class="Articlelist_txts_time">Apr 04, 2025 pm	 11:30 PM</span>
								<p class="Articlelist_txts_p">The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/faq/1796793129.html" title="HTML, CSS, and JavaScript: Essential Tools for Web Developers" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/174412873346901.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML, CSS, and JavaScript: Essential Tools for Web Developers" />
								</a>
								<a href="https://www.php.cn/faq/1796793129.html" title="HTML, CSS, and JavaScript: Essential Tools for Web Developers" class="phphistorical_Version2_mids_title">HTML, CSS, and JavaScript: Essential Tools for Web Developers</a>
								<span class="Articlelist_txts_time">Apr 09, 2025 am	 12:12 AM</span>
								<p class="Articlelist_txts_p">HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/faq/1796790622.html" title="How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/246/273/174312337977178.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?" />
								</a>
								<a href="https://www.php.cn/faq/1796790622.html" title="How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?" class="phphistorical_Version2_mids_title">How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?</a>
								<span class="Articlelist_txts_time">Apr 05, 2025 am	 06:15 AM</span>
								<p class="Articlelist_txts_p">To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...</p>
							</div>
													</div>

													<a href="https://www.php.cn/web-designer.html" class="phpgenera_Details_mainL4_botton">
								<span>See all articles</span>
								<img src="/static/imghw/down_right.png" alt="" />
							</a>
											</div>
				</div>
					</div>
	</main>
	<footer>
    <div class="footer">
        <div class="footertop">
            <img src="/static/imghw/logo.png" alt="">
            <p>Public welfare online PHP training，Help PHP learners grow quickly！</p>
        </div>
        <div class="footermid">
            <a href="https://www.php.cn/about/us.html">About us</a>
            <a href="https://www.php.cn/about/disclaimer.html">Disclaimer</a>
            <a href="https://www.php.cn/update/article_0_1.html">Sitemap</a>
        </div>
        <div class="footerbottom">
            <p>
                © php.cn All rights reserved
            </p>
        </div>
    </div>
</footer>

<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>

<script src="/static/js/common_new.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js?1745654984"></script>
		<script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script>
	<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
	<script type='text/javascript' src='/static/js/viewer.min.js?1'></script>
	<script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script>
	<script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script>
	
	<script>
		var _paq = window._paq = window._paq || [];
		/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
		_paq.push(['trackPageView']);
		_paq.push(['enableLinkTracking']);
		(function () {
			var u = "https://tongji.php.cn/";
			_paq.push(['setTrackerUrl', u + 'matomo.php']);
			_paq.push(['setSiteId', '9']);
			var d = document,
				g = d.createElement('script'),
				s = d.getElementsByTagName('script')[0];
			g.async = true;
			g.src = u + 'matomo.js';
			s.parentNode.insertBefore(g, s);
		})();
	</script>

	
	<script>
		// top
		layui.use(function () {
			var util = layui.util;
			util.fixbar({
				on: {
					mouseenter: function (type) {
						layer.tips(type, this, {
							tips: 4,
							fixed: true,
						});
					},
					mouseleave: function (type) {
						layer.closeAll("tips");
					},
				},
			});
		});

		document.addEventListener("DOMContentLoaded", (event) => {
			// 定义一个函数来处理滚动链接的点击事件
			function setupScrollLink(scrollLinkId, targetElementId) {
				const scrollLink = document.getElementById(scrollLinkId);
				const targetElement = document.getElementById(targetElementId);

				if (scrollLink && targetElement) {
					scrollLink.addEventListener("click", (e) => {
						e.preventDefault(); // 阻止默认链接行为
						targetElement.scrollIntoView({
							behavior: "smooth"
						}); // 平滑滚动到目标元素
					});
				} else {
					console.warn(
						`Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.`
						);
				}
			}

			// 使用该函数设置多个滚动链接
			setupScrollLink("Article_Details_main1L2s_1", "article_main_title1");
			setupScrollLink("Article_Details_main1L2s_2", "article_main_title2");
			setupScrollLink("Article_Details_main1L2s_3", "article_main_title3");
			setupScrollLink("Article_Details_main1L2s_4", "article_main_title4");
			setupScrollLink("Article_Details_main1L2s_5", "article_main_title5");
			setupScrollLink("Article_Details_main1L2s_6", "article_main_title6");
			// 可以继续添加更多的滚动链接设置
		});


		window.addEventListener("scroll", function () {
			var fixedElement = document.getElementById("Article_Details_main1Lmain");
			var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器
			var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度
			var scrollHeight = document.documentElement.scrollHeight; // 页面总高度

			// 计算距离底部的距离
			var distanceToBottom = scrollHeight - scrollTop - clientHeight;

			// 当距离底部小于或等于300px时，取消固定定位
			if (distanceToBottom <= 980) {
				fixedElement.classList.remove("Article_Details_main1Lmain");
				fixedElement.classList.add("Article_Details_main1Lmain_relative");
			} else {
				// 否则，保持固定定位
				fixedElement.classList.remove("Article_Details_main1Lmain_relative");
				fixedElement.classList.add("Article_Details_main1Lmain");
      		}
    	});

	
	</script>


<script>
	document.addEventListener('DOMContentLoaded', function() {
  const mainNav = document.querySelector('.Article_Details_main1Lmain');
  const header = document.querySelector('header');
  if (mainNav) {
    window.addEventListener('scroll', function() {
      const scrollPosition = window.scrollY;
      if (scrollPosition > 84) {
        mainNav.classList.add('fixed');
      } else {
        mainNav.classList.remove('fixed');
      }
    });
  }
});
</script>

</body>

</html>