목차
回复讨论(解决方案)
웹 프론트엔드 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 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

이 기사는 CSS를 사용한 웹 페이지에 효율적인 PNG 테두리 추가를 보여줍니다. CSS는 JavaScript 또는 라이브러리에 비해 우수한 성능을 제공하며, 미묘하거나 눈에 띄는 효과를 위해 테두리 너비, 스타일 및 색상 조정 방법을 자세히 설명합니다.

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

& lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

See all articles