JavaScript의 DOM 기초 학습 노트 2.4_javascript 기술-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JavaScript의 DOM 기초 학습 노트 2.4_javascript 기술

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:45 PM

DOM의 발전은 WEB 표준화의 일반적인 추세와 밀접한 관련이 있습니다. 올바른 의미론적 논리를 바탕으로만 DOM이 올바르게 작동할 수 있습니다. 요즘에는 올바른 의미 구조, 표현과 콘텐츠의 분리 등의 요구 사항이 웹 디자인의 기본 요구 사항이 되었습니다. 따라서 웹 프런트엔드 개발에서 DOM의 존재는 의심할 여지 없이 프리젠테이션 계층, 동작 계층, 심지어 콘텐츠 수준의 연결을 위한 탁월한 API를 제공하며 널리 사용되는 Ajax 애플리케이션에서 없어서는 안 될 부분이 되었습니다.

1. 부드러운 분해

1. 컨셉

JavaScript가 사용되기 전 초기에는 웹페이지의 콘텐츠가 정상적으로 표시될 수 있었고 사용자는 주변기기(예: 마우스)를 통해 관련 콘텐츠를 탐색할 수 있었습니다. 이러한 탐색 경험은 사용자에게 이상적이지 않을 수 있습니다. .

이러한 요구에 따라 콘텐츠 제공업체는 합리적인 목표를 가지고 있습니다. 즉, JavaScript를 사용하여 콘텐츠 표시에 영향을 주지 않으면서 사용자 경험을 개선하고 사용자 지속성을 높이는 것입니다.

이 제목에는 콘텐츠의 정상적인 표시에 영향을 미칠 수 없다는 매우 분명한 조건이 있습니다. 즉, 사용자의 브라우저가 JavaScript를 지원하지 않더라도 사용자는 여전히 정상적으로 탐색할 수 있습니다.

2. 방법

①HTML에서 JavaScript를 분리

이것이 가장 먼저 생각되어야 할 사항입니다. 이 둘을 분리하면 HTML은 JavaScript를 사용하기 전의 초기 상태로 돌아가는 것과 같으며 여전히 원활할 것입니다.

예를 들어 element.onClick과 같은 이벤트 처리 함수를 JavaScript로 작성하고 이를 특정 함수에 바인딩합니다.

②JavaScript에서 메소드 감지

getElementById와 같이 앞서 언급한 일부 메소드는 해당 메소드가 지원되는지 여부를 확인해야 합니다.

<script>
if(! document.getElementById) return false;
</script>

if 문을 사용하여 메서드가 지원되는지 여부를 확인하세요. 지원되지 않으면 false를 직접 반환하므로 시간을 낭비할 필요도 없습니다. 성능 최적화의 역할.

2. 바인딩 온로드 이벤트

1. 제본 이유

페이지를 효과적으로 실행하려면 일부 기능을 완전히 로드해야 합니다. 함수를 window.onload 이벤트에 바인딩해야 합니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筱雨生 - 博客园</title>
<script>
function tagAttribute(){
var ali = document.getElementsByTagName('li'); 
for(var i = 0; i < ali.length; i++){
  if(ali[i].firstChild.nodeType == 3){
    alert(ali[i].childNodes[0].nodeValue);
  }
}
}
window.onload = tagAttribute;
</script>
</head>
<body>
<h1 id="筱雨生">筱雨生</h1>
<p>時光飛逝，莫讓網絡蹉跎了歲月</p>
<div id="myBlog">
<ul>
<li title="JavaScript">JavaScript</li>
<li title="HTML">HTML</li>
<li title="CSS">CSS</li>
<li title="我的随笔">我的随笔</li>
<li></li>
</ul>
</div>
</body>
</html>

위의 예에서 window.onload가 바인딩되지 않은 경우 tagAttribute 함수 실행은 의미가 없습니다.

또 주목해야 할 점은 함수의 값이 아닌 함수가 바인딩되어 있기 때문에 뒤에 괄호가 없다는 점입니다.

2. 결속방법

함수만 바인딩하면 위의 방법으로 쉽게 목적을 달성할 수 있습니다.

window.onload = myFunction;

여러 개의 함수가 있는 경우 하나씩 바인딩할 수 있지만 결과적으로는 마지막 함수만 효과적으로 실행됩니다. 이는 실제로 매우 이해하기 쉽습니다.

우리의 목표는 페이지가 로드될 때 얼마나 많은 함수가 실행되더라도 이러한 함수가 효과적으로 실행될 수 있도록 하는 것입니다. 즉, 이러한 함수는 window.onload 이벤트에 성공적으로 바인딩됩니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筱雨生 - 博客园</title>
<script>
function addOnLoadEvent(func){
  var oldonload = window.onload; // 把现有的window.onload事件处理函数的值存储到变量oldonload
  if(typeof window.onload != 'function'){ // 如果这个处理函数上还没有绑定任何函数
    window.onload = func; // 将这个函数绑定到window.onload事件
  }else{
    window.onload = function(){ // 如果这个处理函数已经绑定了函数，就把这个函数追加到指令的末尾
      oldonload();
      func();
    }
}
}
//自定义函数 tagAttribute 
//功能：获取li标签中的title值
function tagAttribute(){
var ali = document.getElementsByTagName('li'); 
for(var i = 0; i < ali.length; i++){
  if(ali[i].childNodes[0].nodeType == 3){
    alert(ali[i].childNodes[0].nodeValue);
  }
}
}
addOnLoadEvent(tagAttribute); // 为tagAttribute函数绑定到window.onload事件
</script>
</head>
<body>
<h1 id="筱雨生">筱雨生</h1>
<p>時光飛逝，莫讓網絡蹉跎了歲月</p>
<div id="myBlog">
<ul>
<li title="JavaScript">JavaScript</li>
<li title="HTML">HTML</li>
<li title="CSS">CSS</li>
<li title="我的随笔">我的随笔</li>
<li></li>
</ul>
</div>
</body>
</html>

javascript学习笔记 Dom知识点总结

JavaScript的window对象对应着浏览器窗口本身，因此这个对象的属性和方法统称为BOM（浏览器对象模型），如window.open(),window.location等。

JavaScript的document对象是指文档对象模型，主要是处理网页内容。DOM（Document Object Model）即文档对象模型，是针对 HTML 和 XML 文档的 API 。字母D指document（文档），字母O指object（对象），字母指Model（模型）。DOM 描绘了一个层次化的节点树。节点表示一个连接点，文档是由节点构成的集合，DOM的节点主要分为三类：元素节点、文本节点（不是文本内容）、属性节点。

获取节点的名称和类型

1.nodeName属性用来获取节点的名称，文本节点返回#text,元素节点返回标签名称（此时等价于tagName）。语法：目标节点.nodeName
2.nodeType属性用来获取节点的类型，元素节点：1，属性节点：2，文本节点：3。语法：目标节点.nodeType
3.nodeValue属性用来获取和设置节点的值。元素节点返回 null 。语法：目标节点.nodeValue

获取元素节点的方式

1. document.getElementById

通过ID查找，返回唯一元素节点

2. document.getElementsByName

通过name属性查找，返回元素节点数组

3. document.getElementsByTagName

通过标签名称查找，返回元素节点数组

以下三种方法属于HTML5 DOM，并非所有浏览器支持（如某些低版本IE就不支持），属于高级方法

4. document.getElementsByClassName

通过class属性的类名查找，返回元素节点数组

5. document.querySelector

通过selector条件获取元素节点，只返回符合条件的第一个元素节点

6. document.querySelectorAll

通过selector条件获取元素节点，返回所有符合条件的元素节点数组，多条件使用逗号分隔，表示要查找的元素必须符合所有逗号分隔的条件，如果一个元素只符合逗号分隔的条件中的一个，则不会被返回

小结： getElementById和querySelector只返回一个元素节点，而getElementsByName、getElementsByTagName、getElementsByClassName、querySelectorAll返回的是元素节点数组

节点指针

1.childNodes属性用来获取元素节点的子节点，返回节点数组。语法：父节点.childNodes;

2.children属性可以用来获取忽略了空白节点的有效节点（在某些浏览器上，空白符或换行符也是一个文本节点）。语法：父节点.children;

3.firstChild属性可以用来获取元素的第一个子节点，等价于 childNodes[0]。语法：父节点.firstChild;

3.lastChild属性可以用来获取元素的最后一个子节点，等价于 childNodes[childNodes.length-1]。语法：父节点.lastChild;

4.previousSibling属性用来获取目标节点的前一个兄弟节点。语法：目标节点.previousSibling;

5.nextSibling属性用来获取目标节点的后一个兄弟节点。语法：目标节点.nextSibling;

6.parentNode属性用来获取已知节点的父节点。语法：子节点.parentNode;

7.ownerDocument属性用来当前节点所在文档的根节点，等价于document。语法：目标节点.ownerDocument;

节点的操作

1.createElement方法用来创建元素节点。语法：document.createElement('元素标签名称');

2.createAttribute方法用来创建属性节点。语法：document.createAttribute('属性名称');

3.createTextNode方法用来创建文本节点。语法：document.createTextNode('文本内容');

4.appendChild方法用来在目标节点的子节点的末尾添加一个子节点（可以是createElement创建的元素节点，也可以是createTextNode创建的文本节点）。语法：parent.appendChild(要插入的节点);

5.insertBefore方法用来在目标元素的前面插入一个新元素节点，此时的指针在目标元素的父级上。语法：parent.insertBefore(newElement,targetElement);

6.DOM中没有insertAfter这个方法，但是可以通过以下方法来模拟insertAfter;

/*
 * newElement : 要插入的新元素
 * targetElement : 目标元素 
 */
function insertAfter(newElement,targetElement){
 var parent = targetElement.parentNode;
 if(parent.lastChild == targetElement){
 /*
  如果目标元素是parent的最后一个子元素，则把新元素追加到parent元素上，
  也就是在parent的子元素的末尾位置添加新元素 
 */
 parent.appendChild(newElement);
 }else{
 /*
  否则，就把新元素添加到目标元素和目标元素的下一个兄弟元素之间 
 */
 parent.insertBefore(newElement,targetElement.nextSibling);
 }
}

7.replaceChild方法用来替换一个元素节点，此时的指针在目标元素的父级上。语法：parent.replaceChild(replaceElement,targetElement);

8.cloneChild方法用来克隆一个元素节点，传递一个布尔参数，参数为true时表示复制当前节点及其所有子节点，参数为false时表示支付至当前节点。语法：目标元素.cloneChild(true|false);

9.removeChild方法用来删除一个指定节点。语法：removeChild(要删除的节点);

10.getAttribute方法用来获取一个属性的值。语法：目标元素.getAttribute(元素属性名称);

11.setAttribute方法用来设置一个属性的值，没有该属性则创建。语法：目标元素.setAttribute(元素属性名称,属性值);

12.removeAttribute方法用来删除一个属性节点。语法：目标元素.removeAttribute(要删除的属性名称);

DOM操作内容

1.innerHTML属性用来获取和设置HTML内容。语法：元素节点.innerHTML 或者元素节点.innerHTML = 'HTML字符串';

2.innerText|textContent属性用来获取和设置文本内容。fireFox使用textContent来获取和设置（注意兼容性）。语法：元素节点.innerText 或者元素节点.innerText = 'HTML字符串';

DOM操作样式

1.style属性用来获取和设置元素的行内样式。语法：element.style;style属性只能获取和设置行内样式，对于如font-size这种样式属性，应该去掉 - 并且将 - 后面的第一个字母大写，驼峰法来获取和设置如：element.style.fontSize , element.style.backgroundColor

2.getComputedStyle全局方法用来获取计算后的样式，第一个参数是元素节点，第二个参数是类型，如:hover,:active等伪类，默认情况下传 null ,某些IE版本使用currentStyle属性来获取 box.currentStyle。语法：window.getComputedStyle(元素，类型)

3.className属性用来获取和设置元素的样式名称。语法：element.className

4.自定义的 addClass() | hasClass() | removeClass() 方法

//元素是否含有某样式
function hasClass(element,className){
 return !!element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'));
}
//向元素添加新样式
function addClass(element,className){
 if(hasClass(element,className) == false){
  element.className += ' '+className;
  }
 }
//移除元素的指定样式
function removeClass(element,className){
 var currentClass = element.className;
 if(hasClass(element,className)){
   currentClass = currentClass.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),' ');
      //去除空格
   currentClass = currentClass.replace(/(^\s*)|(\s*$)/g,'');
   element.className = currentClass;
 }
}

DOM操作位置和大小

1.clientWidth属性用来获取元素的实际宽度，该值受滚动条和内边距影响，外边距和border不会影响。语法：

element.clientWidth;

2.clientHeight属性用来获取元素的实际高度，该值受滚动条和内边距影响，外边距和border不会影响。语法：

element.clientHeight;

3.offsetWidth属性用来获取元素的实际宽度，该值受边框和内边距影响，外边距和滚动条不会影响。语法：

element.offsetWidth;

4.offsetHeight属性用来获取元素的实际高度，该值受边框和内边距影响，外边距和滚动条不会影响。语法：

element.offsetHeight;

5.offsetTop和offsetLeft属性用来获取元素相对于父级的位置。该值受外边距影响。语法：element.offsetTop ||

element.offsetLeft;

6.scrollTop和scrollLeft属性用来获取滚动条被隐藏的区域大小，也可设置定位到该区域（比如返回顶部）。语法：

element.scrollTop || element.scrollLeft || element.scrollTop = 0;

常用到的简洁快速的document属性和方法

document.title 用来获取文档标题

document.domain 用来获取当前域名

document.URL 用来获取当前url路径

document.forms 获取表单集合

document.images 获取图片集合

document.body 获取body元素节点

document.compatMode 识别文档模式

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AM

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AM

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

Demystifying JavaScript : 그것이하는 일과 중요한 이유Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

Python 또는 JavaScript가 더 좋습니까?Apr 06, 2025 am 12:14 AM

Python은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.

JavaScript를 어떻게 설치합니까?Apr 05, 2025 am 12:16 AM

JavaScript는 이미 최신 브라우저에 내장되어 있기 때문에 설치가 필요하지 않습니다. 시작하려면 텍스트 편집기와 브라우저 만 있으면됩니다. 1) 브라우저 환경에서 태그를 통해 HTML 파일을 포함하여 실행하십시오. 2) Node.js 환경에서 Node.js를 다운로드하고 설치 한 후 명령 줄을 통해 JavaScript 파일을 실행하십시오.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

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

뜨거운 도구

Atom Editor Mac 버전 다운로드

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

SecList

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

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는