Home >Web Front-end >JS Tutorial >Learn DOM knowledge in javascript

Learn DOM knowledge in javascript

coldplay.xixiforward: 2021-02-23 10:30:032327browse

Free learning recommendation: javascript video tutorial

1 , DOM, abbreviation of Document/Object/Modul, document object model, which is a DOM element node tree. Different elements form a DOM element node tree according to certain subordinate relationships.
Learn DOM knowledge in javascript
2. About meta

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/> <!--告诉浏览器底下内容按UTF-8解析 -->
    <!--以下给搜索引擎爬虫识别文档内容，不设定不影响使用但影响网页传播涉及SEO-->
    <meta name="keywords" content="Javascript,HTML,css,XML,XHTML"/>
    <meta name="description" content="Javascript学习">
    <meta name="author" content="Hehongchang">

3.css
3.1 Inline style uses the style attribute in the element, with the highest priority;

<style type="text/css">
        p {
            color: blue;
        }
    </style>
</head>
<body>
<p style="color:red;">内联样式</p>//显示红色

The second is The id is higher than the class, and the class is higher than the element. Among them, p.ysb is higher than .ysb. Writing method
Learn DOM knowledge in javascript

3.2 Internal styles are used in the HTML header

<style type="text/css">
        #p{
            width: 20px;
            height: 20px;
            position: relative;
            background: red;
        }
    </style> -->

3.3 External reference, external reference to css file
Create a new css file, put the css part into the file, and call it in the original HTML. The call must be in the head
Learn DOM knowledge in javascript
4. Chrome can be used as a powerful css debugger
You can check and modify it directly in Style

5.Document object
Understand document operation DOM elements
Document is a function under window. The instance hung on HTMLDocument uses the functions under document to select and operate DOM elements.

console.log(window.document);

//This function is not case-sensitive in IE8 and below browsers, but chrome is case-sensitive, and matches the function under the name
Learn DOM knowledge in javascript
document object

getElementById (string) (note that element does not have s) returns a unique id, getElementsByClassName (string), getElementsByTagName (string), getElementsByName (string) returns a class array.

var ps2 = document.getElementsByClassName(&#39;cls1&#39;);
console.log(ps2);

Learn DOM knowledge in javascript
document.getElementsByTagName('') returns a class array of all tags
The getElementsByName name attribute is only valid for some elements, form, img, iframe, Form elements

Learn DOM knowledge in javascript

## 6.querySelector(string) returns the specified first element

document.querySelector(&#39;.cls1&#39;).style.color= &#39;red&#39;;//js中凡是涉及CSS或HTML的属性值及属性均需要加 ‘’；
document.querySelector(&#39;.cls1&#39;)指获得.cls1元素

Learn DOM knowledge in javascript
document.querySelector('form input').style.color= 'red'; Get the first element of form input;

7.querySelectorAll() returns a Array all

var all = document.querySelectorAll(&#39;form input&#39;);
console.log(all);
all[0].style.color=&#39;red&#39;;
all[2].style.color=&#39;green&#39;;

Learn DOM knowledge in javascript 8.DOM Node Deepen the understanding of the entire DOM tree
Nodes include elements and non-elements, elements are only part of the node, which are not limited to: Commonly used

Exercise: Traverse the DOM tree
Under any Node node, there is a childNodes (including all the child node arrays of the node) and children (only elements), nested layer by layer, and the elements can have attributes. (array attribute value pairs).
node includes nodeType, nodeName, nodeValue. The previous serial number indicates the node type, element 1, attribute 2, text 3, comment 8, Document 9, Document Type 10

function goThrough(node,x){
    if(node.childNodes!= undefined){
        for(var i = 0; i < node.childNodes.length; i++){//node.childNotes数组
            var a = node.childNodes[i];
            var s = a.nodeType + &#39;-&#39; + a.nodeName + &#39;-&#39; + a.nodeValue + &#39;-&#39;;//加‘-’让回车原形毕露，回车也是一个文字节点。
            console.log(x + s);
            var attri =&#39;{attri:&#39;;
            if(a.attributes != undefined && a.attributes.length != 0){
                for(var j = 0; j < a.attributes.length;j++){
                var b = a.attributes[j];
                attri += b.nodeType + &#39;-&#39; + b.nodeName + &#39;-&#39; + b.nodeValue;
                
                }
                attri +=&#39;}&#39;;
                console.log(x + attri);
            }
            goThrough(a, x + &#39;\t&#39;);
        }
        
    }
}
goThrough(document,&#39;\t&#39;);

Learn DOM knowledge in javascript
注意：从处开始以后每一个回车都是一个文字节点 3-#text- -，

开头没有
练习过滤body里所有的元素

function getChildrens(element){
    var Childrens = [];
    if(element.childNodes != undefined){
        for(var i = 0; i < element.childNodes.length; i++){
            var a = element.childNodes[i];
            if(a.nodeType == 1){
                Childrens.push(a);
            }
        }
    }
    return Childrens;
}

console.log(getChildrens(document.body));

Learn DOM knowledge in javascript

相关免费学习推荐：javascript（视频）

The above is the detailed content of Learn DOM knowledge in javascript. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css chrome html String Object class 对象 dom input

Statement：

This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete

Previous article：Detailed explanation of queryString module in nodejsNext article：Detailed explanation of queryString module in nodejs

See more

Learn DOM knowledge in javascript

Related articles