目录
回复讨论(解决方案)
首页 web前端 html教程 css样式除了用id选择器以外,可以唯一确定一个dom元素吗_html/css_WEB-ITnose

css样式除了用id选择器以外,可以唯一确定一个dom元素吗_html/css_WEB-ITnose

Jun 24, 2016 pm 12:15 PM

正在做的功能,需要确定修改的目标,但是,并不是每一个dom元素都有id,所以卡在这里,在没有id的时候如何确定一个dom元素?


回复讨论(解决方案)

方法很多啊,根据条件来选择,如通过class属性,
比如遍历判断其他属性

楼主看看JQ的选择器用法就知道了,有很多形式。其实从本质上来讲,它的原理就象楼上说的是遍历元素并根据它的其它属性来进行判断,但比你自己写方便多了。

当然,也不建议仅仅是因为获取几个对象容易点就使用JQ。有空多看看它的功能,如果能让它在你的页面里发挥较多的作用,使用它的便利和代价之比就会更合适了。

我还忘说一点比较有用的了,就是通过和你要找的对象有关的其它容易找的对象来找你这个对象。呵呵,听来绕口,但其实很好理解,比如:


....
  
  • ...


假设你想找这里面的LI,没必要遍历所有的document内的元素对象,只要通过它的上级UL所在的上级DIV,因为它有ID名为theforever_csdn,找到它,再找它的UL子对象里的LI子对象就可以了。

这是通过父元素找子元素,类似的,还可以通过兄弟元素找兄弟元素,通过子元素找父元素。多看看DOM方法就行了。

我还忘说一点比较有用的了,就是通过和你要找的对象有关的其它容易找的对象来找你这个对象。呵呵,听来绕口,但其实很好理解,比如:


....
  
  • ...


假设你想找这里面的LI,没必要遍历所有的document内的元素对象,只要通过它的上级UL所在的上级DIV,因为它有ID名为thefore……
有人知道除了id,之外还能怎么唯一确定一个dom元素么?通过class和父级dom,都没办法。或者我没想到吧。

哎,郁闷呀,没办法唯一确定一个dom元素,通过class和上下级关系,都不能保证肯定是唯一的

哎,郁闷呀,没办法唯一确定一个dom元素,通过class和上下级关系,都不能保证肯定是唯一的

如果支持CSS3:
section:nth-child(1) {} /* 选择第一个 

 */
section:nth-child(2) {} /* 选择第二个 
 */
section:nth-child(N) {} /* 选择第N个 
 */
section:nth-last-child(1) {} /* 选择最后一个 
 */
section:nth-last-child(2) {} /* 选择倒数第二个 
 */
section:nth-last-child(N) {} /* 选择倒数第N个 
 */

第几个子元素都挨个定位得到,怎么就不能保证唯一了?这比用ID都更精准。因为ID其实是可以写同样的好几个的,当然,结果只会找到第一个,但如果你忘了前面写过,后面再写同样ID也不是不可能。

比较复杂,你是需要确定 dom元素 在dom文档树中的位置
而这个位置在 

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1670
14
CakePHP 教程
1428
52
Laravel 教程
1329
25
PHP教程
1274
29
C# 教程
1256
24
HTML:结构,CSS:样式,JavaScript:行为 HTML:结构,CSS:样式,JavaScript:行为 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是:1.HTML定义网页结构,2.CSS控制网页样式,3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML,CSS和JavaScript的未来:网络开发趋势 HTML,CSS和JavaScript的未来:网络开发趋势 Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件,CSS的未来趋势是CSS-in-JS和CSSHoudini,JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果,Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积,CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡,Serverless简化开发但需优化冷启动问题。

HTML的未来:网络设计的发展和趋势 HTML的未来:网络设计的发展和趋势 Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML:建立网页的结构 HTML:建立网页的结构 Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义,使用、、等标签。2.提供语义化标记,如、、等,提升SEO效果。3.通过标签实现用户交互,需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号,需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

HTML与CSS vs. JavaScript:比较概述 HTML与CSS vs. JavaScript:比较概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是:HTML负责内容结构,CSS负责样式,JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容,确保语义化。2.CSS通过选择器和属性控制网页样式,使其美观易读。3.JavaScript通过脚本控制网页行为,实现动态和交互功能。

HTML与CSS和JavaScript:比较Web技术 HTML与CSS和JavaScript:比较Web技术 Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术:1.HTML定义网页结构,2.CSS负责网页外观,3.JavaScript提供网页动态和交互性,它们共同作用,打造出用户体验良好的网站。

HTML:是编程语言还是其他? HTML:是编程语言还是其他? Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增强WebevebDevelopment。

&lt; strong&gt;,lt; b&gt;有什么区别标签和lt; em&gt;,&lt; i&gt;标签? &lt; strong&gt;,lt; b&gt;有什么区别标签和lt; em&gt;,&lt; i&gt;标签? Apr 28, 2025 pm 05:42 PM

本文讨论了HTML标签,和和关注其语义与表现用途及其对SEO和可访问性的影响之间的差异。

See all articles