what is html dom-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

what is html dom

王林

Mar 05, 2021 pm 01:59 PM

domhtml

what is html dom

1. Introduction to DOM

DOM refers to the document object model, which is a document object specifically suitable for HTML/XHTML Model. If you are a software developer, then you can think of it as the API of a web page. DOM treats each element in the web page as an object, so that the elements in the web page can also be obtained or edited by computer language. For example, JavaScript can use DOM to dynamically modify the web page.

1.2. Classification of DOM according to operation objects

According to different operation objects, it can be divided into Core DOM, XML DOM and HTML DOM.

Core Dom: Core Dom, the standard model for any structured document.

XML DOM: Standard model for XML documents, operating on XML elements.

HTML DOM: Standard model for HTML documents, operating on HTML elements.

1.3. DOM functions

① Query an element

② Query the ancestors, brothers and descendants of an element

③ Obtain and modify elements Attributes

④ Obtain and modify the content of elements

⑤ Create, insert and delete elements

2. DOM nodes

All contents in the document are It can be represented as a node. For example, in HTML, the entire document, each tag, the attributes and text of each tag can be used as a node.

2.1. Node classification

① Document node (Document): the entire XML and HTML document

② Element node (Element): each XML and HTML element

③ Attribute node (Attr): Attributes of each XML and HTML element

④ Text node (Text): Text within each XML and HTML element

⑤ Comment node ( Comment): Each comment

Note: The Document node here is a general term, which can be divided into XMLDocument and HTMLDocument. Similarly, Element can also be divided into XMLElement and HTMLElement.

2.2. HTML DOM node hierarchy

Nodes have hierarchical relationships with each other: parent node, sibling node, child node, etc.

(1) Example:

Convert HTML document to HTML DOM node tree

what is html dom

(2) Example graph analysis

1) The parent node of the

element and the element is the element.

2) The

element and the element are sibling nodes.

3) The

element is a child node of the element. 3. HTML DOM node attributes Introduces HTML DOM node attributes, such as: innerHTML, innerText, nodeName, nodeValue and nodeType, etc. 3.1. innerHTML: Get or set the content of the node in HTML code format Description: When assigned to the innerHTML attribute in HTML format, it will be presented in the form of HTML. For example: node.innerHTML="<input type="button" value="button">" will display a button. Example: <pre class='brush:php;toolbar:false;'>document.getElementById('div').innerHTML="<input type='button' value='按钮' />"; // 设置div元素的innerHTML为一个按钮 document.getElementById('div').innerHTML; // => <input type='button' value='按钮' /> ：以HTML格式返回节点的内容</pre><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/185/366/825/1614922873401934.png?x-oss-process=image/resize,p_40" class="lazy" title="1614922873401934.png" alt="what is html dom">##3.2, innerText: Get or set the text content of the nodeDescription: Get it in the form of a text string Or set the content of the node. Example 1:Assigning HTML format content<input type="button" value="button"> will be displayed as a string "<input type="button" value="button">". <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/147/718/117/1614922892424910.png?x-oss-process=image/resize,p_40" class="lazy" title="1614922892424910.png" alt="what is html dom">Example 2: When obtaining content, only the text content will be obtained. <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/656/335/273/1614922907497246.png?x-oss-process=image/resize,p_40" class="lazy" title="1614922907497246.png" alt="what is html dom"><pre class='brush:php;toolbar:false;'>document.getElementById('div').innerText; // => "文本1 文本2"</pre>3.3. nodeName: Get the node name, read-only attribute Description: <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/968/503/489/1614922955410584.png?x-oss-process=image/resize,p_40" class="lazy" title="1614922955410584.png" alt="what is html dom"> (Learning video sharing: html video tutorial<a href="https://www.php.cn/course/list/11.html" target="_blank">) </a>Example: <pre class='brush:php;toolbar:false;'>console.log( document.nodeName ); // => #document：文档节点 console.log( document.body.nodeName ); // => BODY：元素节点 console.log( document.getElementById('div').nodeName ); // => DIV：元素节点 console.log( document.getElementById('div').attributes.style.nodeName ); // => style：属性节点</pre>3.4, nodeValue: Get or set the value of the nodeDescription: Document node , element node this property returns null and is read-only. <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/889/837/785/1614922986842486.png?x-oss-process=image/resize,p_40" class="lazy" title="1614922986842486.png" alt="what is html dom">Example: <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/855/781/612/1614923003313786.png?x-oss-process=image/resize,p_40" class="lazy" title="1614923003313786.png" alt="what is html dom"><pre class='brush:php;toolbar:false;'>console.log( document.nodeValue ); // => null：文档节点 console.log( document.body.nodeValue ); // => null：元素节点 console.log( document.getElementById('div').nodeValue ); // => null：元素节点 console.log( document.getElementById('div').attributes.style.nodeValue ); // => width:200px;height:100px;border:1px solid black;：style属性的值 document.getElementById('div').attributes.style.nodeValue = ' width:200px;height:200px'; // 设置style属性的值</pre>3.5, nodeType: Returns the node type, read-only attribute Description: <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/117/632/190/1614923031276269.png?x-oss-process=image/resize,p_40" class="lazy" title="1614923031276269.png" alt="what is html dom">Example:<pre class='brush:php;toolbar:false;'>console.log( document.nodeType ); // => 9：文档节点 console.log( document.body.nodeType ); // => 1：元素节点 console.log( document.getElementById('div').nodeType ); // => 1：元素节点 console.log( document.getElementById('div').attributes.style.nodeType ); // => 2：属性节点</pre>4. Get HTML element node method 文档节点(document)、元素节点可以通过getElementById、getElementsByName、getElementsByClassName以及getElementsByTagName方法获取元素节点。 4.1、getElementById(id) ：获取指定ID的元素 参数： ①id {string} ：元素ID。 返回值： {HtmlElement} 元素节点对象。若没有找到，返回null。 注意： ① HTML元素ID是区分大小写的。 ② 若没有找到指定ID的元素，返回null。 ③ 若一个父节点下面有多个相同ID元素时，默认选取第一个(而不是层级最高的)。 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/438/858/582/1614923065888648.png?x-oss-process=image/resize,p_40" class="lazy" title="1614923065888648.png" alt="what is html dom"> 示例：<pre class='brush:php;toolbar:false;'>document.getElementById('div'); // => 获取ID为div的元素</pre>4.2、getElementsByName(name) ：返回一个包含指定name名称的的元素数组 参数： ① name {string} ：name名称。 返回值： {Array} 符合条件的元素数组。若没有找到符合条件的，返回空数组。 示例：<pre class='brush:php;toolbar:false;'>document.getElementsByName('Btn'); // 返回一个name为btn的元素数组</pre>4.3、getElementsByClassName(className) ：返回一个包含指定class名称的的元素数组 参数： ① className {string} ：class名称。 返回值： {Array} 符合条件的元素数组。若没有找到符合条件的，返回空数组。 示例：<pre class='brush:php;toolbar:false;'>document.getElementsByClassName('show'); // 返回一个class包含show的元素数组</pre>4.4、getElementsByTagName(elementName) ：返回一个指定标签名称的的元素数组 参数： ① elementName {string} ：标签名称。如：div、a等等 返回值： {Array} 符合条件的元素数组。若没有找到符合条件的，返回空数组。 示例：<pre class='brush:php;toolbar:false;'>document.getElementsByTagName('div'); // 返回一个标签为div的元素数组</pre>相关推荐：<a href="https://www.php.cn/div-tutorial.html" target="_blank">html教程</a> 原文链接：<a href="https://www.cnblogs.com/polk6/p/4718684.html" target="_blank">https://www.cnblogs.com/polk6/p/4718684.html</a>

The above is the detailed content of what is html dom. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:博客园. If there is any infringement, please contact admin@php.cn delete

The Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AM

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

HTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AM

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

Understanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

See all articles