찾다
웹 프론트엔드JS 튜토리얼JavaScript 지식 포인트 수집: 요소 및 노드 획득

이 기사에서는 javascript에 대한 관련 지식을 제공합니다. ID, 클래스 이름, 이름, 태그 이름, 생성, 삭제, 복제를 통한 요소 획득을 포함하여 요소 및 노드 획득에 대한 관련 콘텐츠를 주로 소개합니다. 노드와 같은 문제에 대해서는 아래 내용을 살펴보세요. 모든 사람에게 도움이 되기를 바랍니다.

JavaScript 지식 포인트 수집: 요소 및 노드 획득

【관련 추천: javascript 비디오 튜토리얼, web front-end

Get elements

  • Get by ID(getElementById)
  • 이름 속성별(getElementsByName) )
  • By 태그 이름(getElementsByTagName)
  • 클래스 이름으로 요소 가져오기(getElementsByClassName)
  • 선택기로 요소 가져오기(querySelector)
  • 선택기로 요소 집합 가져오기(querySelectorAll) ​​​​
  • HTML 메소드 가져오기( document.documentElement)
  • 본문을 가져오는 메소드(document.body)

1 ID로 가져오기(getElementById)

// 1 获取元素节点
    // 通过id的方式( 通过id查找元素,大小写敏感,如果有多个id只找到第一个)
    document.getElementById('p1');

  • 컨텍스트는 문서여야 합니다.
  • 매개변수를 전달해야 합니다. 매개변수는 문자열 유형이며 요소의 ID를 얻는 데 사용됩니다.
  • 반환 값은 하나의 요소만 가져오고, 찾을 수 없으면 null을 반환합니다.

2. 클래스 이름별(getElementsByClassName)

    // 通过类名查找元素,多个类名用空格分隔,得到一个HTMLCollection(一个元素集合,有length属性,可以通过索引号访问里面的某一个元素)
    var cls = document.getElementsByClassName('a b');
    console.log(cls);
  • 매개변수는 요소의 클래스 이름입니다.
  • 반환 값은 배열과 유사하며, 찾을 수 없으면 빈 배열이 반환됩니다.

3. 이름 속성(getElementsByName)을 통해

 // 通过name属性查找,返回一个NodeList(一个节点集合,有length属性,可以通过索引号访问)
   var nm =  document.getElementsByName('c');
    console.log(nm);

4. 태그 이름(getElementsByTagName)을 통해

    // 通过标签名查找元素 返回一个HTMLCollection
    document.getElementsByTagName('p');
.
  • 매개변수는 요소를 가져오는 것입니다. 태그 이름 속성은 대소문자를 구분하지 않습니다.
  • 반환 값은 클래스 배열입니다. 찾을 수 없으면 빈 배열이 반환됩니다.

5. 선택기(querySelector)를 통해 요소를 가져옵니다.

document.querySelector('.animated')
  • 매개변수는 다음과 같은 선택기입니다. .클래스이름".
  • 단일 노드를 반환하고, 일치하는 요소가 여러 개 있으면 첫 번째 노드를 반환합니다.

6. 선택기(querySelectorAll)를 통해 요소 집합을 가져옵니다.

document.querySelector('.animated')
  • 반환 값은 배열과 유사합니다.

노드 가져오기

DOM(문서 개체 모델)에서 각 노드는 개체입니다. DOM 노드에는 세 가지 중요한 속성이 있습니다.

1. Nodename: 노드 이름

2. NodeValue: 노드의 값

3. Nodetype: 노드 유형

1 , nodeName 속성: 읽기 전용인 노드의 이름입니다.

  • 요소 노드의 nodeName은 라벨 이름과 동일합니다.
  • 속성 노드의 nodeName은 속성의 이름입니다.
  • 텍스트 노드의 nodeName은 항상 #text
  • 문서의 nodeName입니다. 노드는 항상 #document

2. nodeValue 속성 : 노드의 값

  • 요소 노드의 nodeValue가 정의되지 않거나 null입니다.
  • 텍스트 노드의 nodeValue는 텍스트 자체입니다
  • 의 nodeValue 속성 노드는 속성

의 값입니다. 3. nodeType 속성: 노드의 유형이며 읽기 전용입니다. 일반적으로 사용되는 노드 유형은 다음과 같습니다.

  • 요소 유형 노드 유형
  • 요소 1
  • 속성 2
  • Text 3 공백도 3
  • Comment 8
  • Document 9

을 반환합니다.

1. 노드 생성: createElement('')

 // 创建元素,只是创建出来并未添加到html中,需要与appendChild 配合使用
    var elem = document.createElement('p');
    elem.id = 'test';
    elem.style = 'color: red';
    elem.innerHTML = '我是新创建的节点';
    document.body.appendChild(elem);

2. 노드 삽입: appendChild ()

  • 사용법은 다음과 같습니다. parent.appendChild(child)
  • 는 하위 노드를 상위 노드에 추가합니다. 마지막
  • 자식 노드가 이미 존재하는 경우 원래 노드는 제거되고 끝에 새 노드가 추가되지만 이벤트는 유지됩니다
 var oNewp=document.createElement("p");
      var oText=document.createTextNode("World Hello");
      oNewp.appendChild(oText);

2-1. 노드 삽입: insertBefore()

  • 用法是 parent.insertBefore(newNode,refNode);
     var oOldp=document.body.getElementsByTagName("p")[0];
      document.body.insertBefore(oNewp,oOldp);

  删除节点

1.删除节点:removeChild

  • 用法是:parent.removeChild(child) 
  • 如果删除的不是父元素的子节点会报错
   var op=document.body.getElementsByTagName("p")[0];
         op.parentNode.removeChild(op);

   克隆节点

1.克隆节点:parent.cloneNode() false 或者true

  • 克隆节点(需要接受一个参数来表示是否复制元素)
  // 克隆节点(需要接受一个参数来表示是否复制元素)
    var form =  document.getElementById('test');
    var clone = form.cloneNode(true);
    clone.id = 'test2';
    document.body.appendChild(clone);

   替换节点

1.替换节点 方法node.replace(new,old) 

       var oOldp=document.body.getElementsByTagName("p")[0];
       oOldp.parentNode.replaceChild(oNewp,oOldp);

  文档碎片框 

  • 作用:当向document中添加大量的节点时,如果逐个添加将会十分缓慢,这时可以使用文档碎片一次性添加到document中
  • 语法:document.createDocumentFragment();
  • 承载节点
 (function()
    {
        var start = Date.now();
        var str = '', li;
        var ul = document.getElementById('ul');
        var fragment = document.createDocumentFragment();
        for(var i=0; i<p>【相关推荐:<a href="https://www.php.cn/course/list/17.html" target="_blank" textvalue="javascript视频教程">javascript视频教程</a>、<a href="https://www.php.cn/course/list/1.html" target="_blank">web前端</a>】</p>

위 내용은 JavaScript 지식 포인트 수집: 요소 및 노드 획득의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
이 기사는 CSDN에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

20+道必知必会的Vue面试题(附答案解析)20+道必知必会的Vue面试题(附答案解析)Apr 06, 2021 am 09:41 AM

本篇文章整理了20+Vue面试题分享给大家,同时附上答案解析。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

See all articles

핫 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를 무료로 생성하십시오.

뜨거운 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.