社区
学习
工具库
AI工具
休闲
搜索
简体中文
目录
1、文档：DOM中的“D”
2、对象：DOM中的“O”
3、模型：DOM中的“M”
What to buy
登录后复制

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

4、节点" >、
    (这三个属于兄弟关系。
      也是一个父元素，有三个子元素，他们都是
    • 元素。
      登录后复制

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

4、节点

4、1元素节点
4、2文本节点
4、3属性节点
4、4 CSS
So dose this headline
4、5获取元素
1)getElementById
2)getElementsByTagName
3)getElementByClassName
5 获取和设置属性
首页 web前端 html教程 《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-登录后复制-div-div-p-如果你能把一个文档的各种元素想象成一棵家谱树-我们就可以用同样的术语描述DOM-但我觉得称为-strong-节点树-strong-更准确-p-h-节点">、<ul>(这三个属于兄弟关系。<ul>也是一个父元素，有三个子元素，他们都是<li>元素。
登录后复制

如果你能把一个文档的各种元素想象成一棵家谱树，我们就可以用同样的术语描述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>
登录后复制

在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">
    登录后复制

    继承（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>
    登录后复制

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

    special{font-style: italic;}
    登录后复制

    还可以这样定义

    h2.special{text-transform: uppercase;}
    登录后复制

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

    <ul id="purchases">
    登录后复制

    样式表定义

    #purchases{border:1px solid white;background-color：#333;color：#ccc;padding:1em;}
    登录后复制
    #purchases li{font-weight:bold;}
    登录后复制

    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">登录后复制</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">登录后复制</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">登录后复制</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">登录后复制</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">登录后复制</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">登录后复制</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">登录后复制</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">登录后复制</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">登录后复制</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">登录后复制</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">本站声明</div>
						<div>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系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>热门文章</h2>
							</div>
							<div class="phpgenera_Details_mainR4_bottom">
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/zh/faq/1796785841.html" title="刺客信条阴影：贝壳谜语解决方案" class="phpgenera_Details_mainR4_bottom_title">刺客信条阴影：贝壳谜语解决方案</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>3 周前</span>
										<span>By DDD</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/zh/faq/1796789525.html" title="Windows 11 KB5054979中的新功能以及如何解决更新问题" class="phpgenera_Details_mainR4_bottom_title">Windows 11 KB5054979中的新功能以及如何解决更新问题</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>2 周前</span>
										<span>By DDD</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/zh/faq/1796785857.html" title="在哪里可以找到原子中的起重机控制钥匙卡" class="phpgenera_Details_mainR4_bottom_title">在哪里可以找到原子中的起重机控制钥匙卡</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>3 周前</span>
										<span>By DDD</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/zh/faq/1796781206.html" title="节省R.E.P.O.解释（并保存文件）" class="phpgenera_Details_mainR4_bottom_title">节省R.E.P.O.解释（并保存文件）</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>1 个月前</span>
										<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/zh/faq/1796783009.html" title="刺客信条阴影 - 如何找到铁匠，解锁武器和装甲定制" class="phpgenera_Details_mainR4_bottom_title">刺客信条阴影 - 如何找到铁匠，解锁武器和装甲定制</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 周前</span>
										<span>By DDD</span>
									</div>
								</div>
														</div>
							<div class="phpgenera_Details_mainR3_more">
								<a href="https://www.php.cn/zh/article.html">显示更多</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>热AI工具</h2>
								</div>
								<div class="phpgenera_Details_mainR3_bottom">
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/zh/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/zh/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
													<h3>Undresser.AI Undress</h3>
												</a>
												<p>人工智能驱动的应用程序，用于创建逼真的裸体照片</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/zh/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/zh/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
													<h3>AI Clothes Remover</h3>
												</a>
												<p>用于从照片中去除衣服的在线人工智能工具。</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/zh/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/zh/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
													<h3>Undress AI Tool</h3>
												</a>
												<p>免费脱衣服图片</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/zh/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/zh/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
													<h3>Clothoff.io</h3>
												</a>
												<p>AI脱衣机</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/zh/ai/ai-hentai-generator" title="AI Hentai Generator" 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/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/zh/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_title">
													<h3>AI Hentai Generator</h3>
												</a>
												<p>免费生成ai无尽的。</p>
											</div>
										</div>
																</div>
								<div class="phpgenera_Details_mainR3_more">
									<a href="https://www.php.cn/zh/ai">显示更多</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>热门文章</h2>
							</div>
							<div class="phpgenera_Details_mainR4_bottom">
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/zh/faq/1796785841.html" title="刺客信条阴影：贝壳谜语解决方案" class="phpgenera_Details_mainR4_bottom_title">刺客信条阴影：贝壳谜语解决方案</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>3 周前</span>
										<span>By DDD</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/zh/faq/1796789525.html" title="Windows 11 KB5054979中的新功能以及如何解决更新问题" class="phpgenera_Details_mainR4_bottom_title">Windows 11 KB5054979中的新功能以及如何解决更新问题</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>2 周前</span>
										<span>By DDD</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/zh/faq/1796785857.html" title="在哪里可以找到原子中的起重机控制钥匙卡" class="phpgenera_Details_mainR4_bottom_title">在哪里可以找到原子中的起重机控制钥匙卡</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>3 周前</span>
										<span>By DDD</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/zh/faq/1796781206.html" title="节省R.E.P.O.解释（并保存文件）" class="phpgenera_Details_mainR4_bottom_title">节省R.E.P.O.解释（并保存文件）</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>1 个月前</span>
										<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/zh/faq/1796783009.html" title="刺客信条阴影 - 如何找到铁匠，解锁武器和装甲定制" class="phpgenera_Details_mainR4_bottom_title">刺客信条阴影 - 如何找到铁匠，解锁武器和装甲定制</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 周前</span>
										<span>By DDD</span>
									</div>
								</div>
														</div>
							<div class="phpgenera_Details_mainR3_more">
								<a href="https://www.php.cn/zh/article.html">显示更多</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>热工具</h2>
								</div>
								<div class="phpgenera_Details_mainR3_bottom">
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/zh/toolset/development-tools/92" title="记事本++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="记事本++7.3.1" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/zh/toolset/development-tools/92" title="记事本++7.3.1" class="phpmain_tab2_mids_title">
													<h3>记事本++7.3.1</h3>
												</a>
												<p>好用且免费的代码编辑器</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/zh/toolset/development-tools/93" title="SublimeText3汉化版" 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汉化版" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/zh/toolset/development-tools/93" title="SublimeText3汉化版" class="phpmain_tab2_mids_title">
													<h3>SublimeText3汉化版</h3>
												</a>
												<p>中文版，非常好用</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/zh/toolset/development-tools/121" title="禅工作室 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="禅工作室 13.0.1" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/zh/toolset/development-tools/121" title="禅工作室 13.0.1" class="phpmain_tab2_mids_title">
													<h3>禅工作室 13.0.1</h3>
												</a>
												<p>功能强大的PHP集成开发环境</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/zh/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/zh/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
													<h3>Dreamweaver CS6</h3>
												</a>
												<p>视觉化网页开发工具</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/zh/toolset/development-tools/500" title="SublimeText3 Mac版" 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版" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/zh/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title">
													<h3>SublimeText3 Mac版</h3>
												</a>
												<p>神级代码编辑软件(SublimeText3)</p>
											</div>
										</div>
																	</div>
								<div class="phpgenera_Details_mainR3_more">
									<a href="https://www.php.cn/zh/ai">显示更多</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>热门话题</h2>
							</div>
							<div class="phpgenera_Details_mainR4_bottom">
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/zh/faq/gmailyxdlrkzn" title="gmail邮箱登陆入口在哪里" class="phpgenera_Details_mainR4_bottom_title">gmail邮箱登陆入口在哪里</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>7569</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/zh/faq/cakephp-tutor" title="CakePHP 教程" class="phpgenera_Details_mainR4_bottom_title">CakePHP 教程</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1386</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/zh/faq/steamdzhmcssmgs" title="steam的账户名称是什么格式" class="phpgenera_Details_mainR4_bottom_title">steam的账户名称是什么格式</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>87</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>11</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/zh/faq/winactivationkeyper" title="win11激活密钥永久" class="phpgenera_Details_mainR4_bottom_title">win11激活密钥永久</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>62</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>19</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/zh/faq/newyorktimesdailybrief" title="NYT连接提示和答案" class="phpgenera_Details_mainR4_bottom_title">NYT连接提示和答案</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>28</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>107</span>
										</div>
									</div>
								</div>
														</div>
							<div class="phpgenera_Details_mainR3_more">
								<a href="https://www.php.cn/zh/faq/zt">显示更多</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/zh/faq/1796782759.html" title="＆gt; gt;的目的是什么 元素？" 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/202503/21/2025032112342868456.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="＆gt; gt;的目的是什么 元素？" />
								</a>
								<a href="https://www.php.cn/zh/faq/1796782759.html" title="＆gt; gt;的目的是什么 元素？" class="phphistorical_Version2_mids_title">＆gt; gt;的目的是什么 元素？</a>
								<span class="Articlelist_txts_time">Mar 21, 2025 pm	 12:34 PM</span>
								<p class="Articlelist_txts_p">本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/zh/faq/1796791823.html" title="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/174395586298618.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML容易为初学者学习吗？" />
								</a>
								<a href="https://www.php.cn/zh/faq/1796791823.html" title="HTML容易为初学者学习吗？" class="phphistorical_Version2_mids_title">HTML容易为初学者学习吗？</a>
								<span class="Articlelist_txts_time">Apr 07, 2025 am	 12:11 AM</span>
								<p class="Articlelist_txts_p">HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/zh/faq/1796782758.html" title="＆lt; datalist＆gt;的目的是什么。 元素？" 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/202503/21/2025032112332857446.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="＆lt; datalist＆gt;的目的是什么。 元素？" />
								</a>
								<a href="https://www.php.cn/zh/faq/1796782758.html" title="＆lt; datalist＆gt;的目的是什么。 元素？" class="phphistorical_Version2_mids_title">＆lt; datalist＆gt;的目的是什么。 元素？</a>
								<span class="Articlelist_txts_time">Mar 21, 2025 pm	 12:33 PM</span>
								<p class="Articlelist_txts_p">本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/zh/faq/1796782760.html" title="＆lt; meter＆gt;的目的是什么。 元素？" 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/202503/21/2025032112352661331.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="＆lt; meter＆gt;的目的是什么。 元素？" />
								</a>
								<a href="https://www.php.cn/zh/faq/1796782760.html" title="＆lt; meter＆gt;的目的是什么。 元素？" class="phphistorical_Version2_mids_title">＆lt; meter＆gt;的目的是什么。 元素？</a>
								<span class="Articlelist_txts_time">Mar 21, 2025 pm	 12:35 PM</span>
								<p class="Articlelist_txts_p">本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/zh/faq/1796782305.html" title="视口元标签是什么？为什么对响应式设计很重要？" 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/202503/20/2025032017560614263.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="视口元标签是什么？为什么对响应式设计很重要？" />
								</a>
								<a href="https://www.php.cn/zh/faq/1796782305.html" title="视口元标签是什么？为什么对响应式设计很重要？" class="phphistorical_Version2_mids_title">视口元标签是什么？为什么对响应式设计很重要？</a>
								<span class="Articlelist_txts_time">Mar 20, 2025 pm	 05:56 PM</span>
								<p class="Articlelist_txts_p">本文讨论了视口元标签，这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互，而滥用可能会导致设计和可访问性问题。</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/zh/faq/1796782318.html" title="＆lt; iframe＆gt;的目的是什么。 标签？使用时的安全考虑是什么？" 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/202503/20/2025032018054766795.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="＆lt; iframe＆gt;的目的是什么。 标签？使用时的安全考虑是什么？" />
								</a>
								<a href="https://www.php.cn/zh/faq/1796782318.html" title="＆lt; iframe＆gt;的目的是什么。 标签？使用时的安全考虑是什么？" class="phphistorical_Version2_mids_title">＆lt; iframe＆gt;的目的是什么。 标签？使用时的安全考虑是什么？</a>
								<span class="Articlelist_txts_time">Mar 20, 2025 pm	 06:05 PM</span>
								<p class="Articlelist_txts_p">本文讨论了＆lt; iframe＆gt;将外部内容嵌入网页，其常见用途，安全风险以及诸如对象标签和API等替代方案的目的。</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/zh/faq/1796792987.html" title="HTML，CSS和JavaScript的角色：核心职责" 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="HTML，CSS和JavaScript的角色：核心职责" />
								</a>
								<a href="https://www.php.cn/zh/faq/1796792987.html" title="HTML，CSS和JavaScript的角色：核心职责" class="phphistorical_Version2_mids_title">HTML，CSS和JavaScript的角色：核心职责</a>
								<span class="Articlelist_txts_time">Apr 08, 2025 pm	 07:05 PM</span>
								<p class="Articlelist_txts_p">HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/zh/faq/1796791144.html" title="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="HTML中起始标签的示例是什么？" />
								</a>
								<a href="https://www.php.cn/zh/faq/1796791144.html" title="HTML中起始标签的示例是什么？" class="phphistorical_Version2_mids_title">HTML中起始标签的示例是什么？</a>
								<span class="Articlelist_txts_time">Apr 06, 2025 am	 12:04 AM</span>
								<p class="Articlelist_txts_p">AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。</p>
							</div>
													</div>

													<a href="https://www.php.cn/zh/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>公益在线PHP培训，帮助PHP学习者快速成长！</p>
        </div>
        <div class="footermid">
            <a href="https://www.php.cn/zh/about/us.html">关于我们</a>
            <a href="https://www.php.cn/zh/about/disclaimer.html">免责声明</a>
            <a href="https://www.php.cn/zh/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?1745055786"></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>
</body>

</html>