HTML 속성과 DOM 속성의 차이점은 무엇입니까?

HTML 속성과 DOM 속성의 차이점은 무엇인가요? 이 기사에서는 HTML 속성과 DOM 속성의 차이점을 소개합니다. 필요한 참조 값이 있습니다. DOM 속성과 HTML 요소 속성을 구별하는 것이 도움이 되기를 바랍니다. ; 요소.

마지막으로 브라우저는 HTML을 구문 분석하고 DOM 모델을 구축합니다. 이는 브라우저가 HTML 요소를 DOM 요소로 구문 분석한다는 의미입니다. 자바스크립트에서 얻는 것은 HTML 요소가 아닌 DOM 요소입니다.

HTML 요소 속성과 DOM 속성의 이름과 값은 대부분 동일하므로,

둘이 동일하다고 잘못 생각하는 사람들이 너무 많습니다.

HTML 요소 속성과 DOM 속성을 구별하는 것은 경험과 기억의 테스트였습니다. 이제 jQuery의 속성 조작 함수 attr()은 이러한 차이점을 잊을 수 있습니다.

javascript를 사용하여 DOM 속성을 조작합니다

javascript를 사용하여 DOM 속성을 조작한다는 것은 javascript 객체의 속성을 조작하는 것입니다. JavaScript 개체의 속성은 선언할 필요가 없습니다. 속성에 액세스하는 방법은 다음과 같이 다양합니다.

myImg.src = "xxxxxx" //使用“.”运算符
myImg["src"] = "xxxxxx" // 使用属性访问器
var propName = "src";
myImg[propName] = "xxxxxx" //属性访问器支持变量

속성 접근자가 제공되므로 다음과 같은 방법으로 DOM 객체의 모든 속성을 탐색할 수 있습니다.

var result = "";
for (var p in myImg)
{
result += "属性名：" + p + "，属性值：" + myImg[p] + "\n";
}

이벤트나 함수도 객체의 속성이라는 점에 유의하세요. 객체가 DOM 객체인 경우 기본적으로 많은 속성을 갖습니다.

javascript를 사용하여 HTML 요소 속성을 조작합니다.

javascript에서 getAttribute 및 setAttribute를 사용하여 HTML 요소 속성을 조작합니다. 예:

alert(myImg.getAttribute("class"));
myImg.setAttribute("class","myclass2");

HTML 속성 클래스를 변경하면 해당 DOM 요소의 className 속성이 변경됩니다. 그러나 모든 HTML 요소에 해당 DOM 속성이 있는 것은 아닙니다. 예를 들어 사용자 정의 HTML 요소 속성은 DOM 속성으로 변환할 수 없습니다. 또 다른 예는 "className"이라는 요소 속성입니다. 이는 className이 HTML 클래스에 해당하기 때문에 HTML 속성과 DOM 속성의 차이점이 무엇입니까?

브라우저 엔진에는 "HTML 태그"라는 것이 없습니다. 그 본질은

DOM 노드 객체

입니다. "HTML 문서"라는 것은 없습니다. 그 본질은

DOM 노드 개체

로 구성된 문서 트리입니다. 브라우저 엔진은 실제로 DOM 노드 개체

를 저장하고 렌더링하는 "큰 형제"입니다. 단지 브라우저 엔진을 직접 작동할 수 없기 때문에 이러한 본질을 잘 알지 못할 뿐입니다(사실 익숙할 필요는 없지만 알아야 합니다).

DOM 노드 개체는 고유하지만 DOM 노드 개체의 데이터를 조작하는 방법은 여러 가지가 있습니다. 예를 들어, 이미지 너비의 경우: HTML은 의 너비 속성을 통해 정의할 수 있습니다.

JavaScript는

Don'을 통해 읽고 수정할 수 있습니다. CSS를 잊지 마세요. CSS는 width 속성을 통해 수정될 수도 있습니다.
• HTML 속성

  및

  JavaScript DOM 객체 속성
은 본질적으로
• DOM 노드 객체 데이터에 영향을 미치는 많은 이유 중 하나

  입니다.

여러 가지 이유가 동일한 DOM 노드의 실제 데이터에 영향을 미칩니다

(다대일), 이 필수 이유를 꼭 기억하세요. 자세히:

HTML은 문서 트리와 노드 개체의 설명 방법일 뿐입니다.

브라우저의 parser 부분은 DOM 문서 트리를 HTML 기반의 브라우저 엔진으로 직접 전송합니다.

DOM 객체는 JSX와 같은 다른 방법을 사용하여 설명할 수도 있습니다. (물론 DOM 객체를 기술하기 위해 다른 방법을 사용하는 경우 DOM 문서 트리를 생성하는 프로세스는 그에 따라 반드시 수정됩니다.)

• JavaScript의 DOM 객체는 브라우저 엔진에서 DOM 객체를 작동하기 위한 인터페이스일 뿐입니다 .

• JavaScript의 DOM 객체와 브라우저 엔진에 저장된 DOM 노드는 본질적으로 동일하지 않습니다.

사용자는 실제로 JavaScript에서 제공되는 DOM 개체를 조작할 수 있는 권한만 갖습니다.

JS 엔진과 브라우저 엔진은 협력하여 JavaScript DOM 객체가 엔진에 있는 DOM 노드의
• 원래 매핑

  인지 확인합니다.

• 이렇게 하면 사용자는 JavaScript DOM 개체를 작동하여 엔진에 저장된 DOM 노드를 투명하게 수정할 수 있습니다.

• 기본적으로 브라우저 엔진은 DOM 트리가 업데이트될 때 다시 렌더링하는 역할만 담당하며 실제로 JS의 존재 여부에는 관심이 없습니다.

• 你如果用其他办法修改了引擎使用的DOM树，也能更新文档结构。（当然这种办法基本上不存在…）

至于HTML属性名和JavaScript DOM对象的属性名大多相似或等同，这仅仅是人为的方便。我如果喜欢我也可以设计成这样嘛：

// <img  src="/static/imghwm/default1.png" data-src="http://localhost/1.png" class="lazy" alt="HTML 속성과 DOM 속성의 차이점은 무엇입니까?" >
node.DataSource = "http://localhost/1.png";
node.AlternativeText = "alt text";
node.Dimension.Width = 640;
node.Dimension.Height = 480;

虽然这样就真的没法记了。

JavaScript DOM对象属性名和HTML属性名的近似，是JavaScript给Web开发者的恩惠。选择只记忆HTML属性名，然后记忆（或者是踩坑了再反查）JavaScript属性名中少量和HTML不同名的差异点，这是很自然的。

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程，jQuery视频教程，bootstrap教程！

위 내용은 HTML 속성과 DOM 속성의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!