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