Preface
As Xiaobai, I have been groping slowly on the way of learning the web. I didn't know how to write a blog before. But, no, the first blog suddenly decided to start writing in an afternoon. Recently, I am learning about dom. I will probably summarize it.
What is DOM?
DOM is the w3c standard, its full name is Document Object Model, which translates to Document Object Model. The DOM defines the methods needed to represent and modify documents. The DOM object, which is the host object, is defined by the browser manufacturer and is a collection of objects used to manipulate HTML and XML functions. Some people call the DOM a standard programming interface for HTML and XML.
Basic operation of DOM
For objects and arrays, our basic operations are addition, deletion, modification, and insertion, and the same is true for DOM.
increase
There are three basic additions to the DOM:
1.document.createElement();
//这个方法是创建一个元素节点，即标签，但是生成的标签在js里面，不会在页面生成，我们平时用的较多，建议重点掌握。
2.document.createTextNode();//创建文本节点
3，document.createComment();//创建注释节点
//DOM的增操作一般和插入操作一起
delete
There are two types of DOM deletion: murder and suicide.
1.parent.removeChild(要被删除的标签);
//相当于父杀子的谋杀，但实际上可以等同于剪切，被删除的值会被保留
ep:
var div = document.getElementsbyTagName('div')[0];//取出div标签
var span = document.getElementsbyTagName('span')[0];
var strong = document.createElement('strong');//创建strong标签
var i = document.creatElement('i');
div.insertBefore(strong,span);//把strong插入到span前面
div.insertBefore(i,strong);
div.removeChild(i); //删除i
//运行结果为--> <i> <i>
2.child.remove();
//可以理解为一个人不想存在，然后抹杀了自己的存在，即自杀，删除了就不在存在
strong.remove();//strong的自我删除
modify
In the DOM, change is to replace
Methods as below:
parentNode.replaceChild(new，origin);
//用新的去替换旧的，原先旧的会被剪切出来
insert
The DOM insertion operation is very frequent for us, so we must master it! There are two methods:
1.appendChild(标签名);
//剪切操作，通过这个方法我们可以把一个创建好的标签插入到另外一个标签，可以理解为.push
ep：
var div = document.getElementsbyTagName('div')[0];//取出div标签
var span = document.getElementsbyTagName('span')[0];
var strong = document.createElement('strong');//创建strong标签
var i = document.creatElement('i');
div.appendChild(span);//把span放到div里面
2.insertBefore(a,b);
//这个方法的意思为在父级元素里面插入一个值，即在b之前插入a，insert a,before b。
div.insertBefore(strong,span);//在span前面插入strong
结果应该为：
<div>
<strong> <strong>
<span> <span>
<div>
Inquire
DOM query should be the object we focus on, and the method is as follows:
1.document.getElementById();
//通过id标签去选出元素，注意：选出的是单个元素
2.document.getelementsByTagName();
//通过标签名来选出一组元素
例如：
var div = document.getElementsByTagName('div')[0];
//我们这时选出的是第一个div标签
3.document.getElementsByClassName();
//通过类名来选出，但是IE8及以下不兼容
4.document.getElementsName();
//只对部分标签生效（表单，表单元素，img，iframe），IE浏览器不支持
5.document.querySelector();//css选择器，只能选出来一个，IE7及以下没有这个方法
6.document.querySelectorAll();//同样是css选择器，可以选出来一组，IE7及以下没有这个方法。
//注意，最后两种方法还有一个缺点：被选出来的元素不是实时的。
The basic concept of dom node
According to the dom standard of w3c, all the content in the document is a node, and the node is the smallest unit of dom. The browser will parse the document into a series of nodes according to the dom model. Because all nodes ultimately inherit from the Node node class, the dom node can also be called a Node node.
dom node type
The types of DOM nodes are:
元素节点 1
属性节点 2
文本节点 3
注释节点 8
Document 9
DocumentFragment 11 //文档碎片
Basic attributes of dom
There are four common ones. Let’s briefly introduce these four attribute values today.
The basic properties of DOM nodes:
1.nodeName //标签名，大写表示，只读
2.nodeValue //只有文本、注释节点有，可读写
3.nodeType //节点类型，只读,它返回的就是相对的数值
4.attributes //Element节点集合的属性
//通过这个属性我们可以改变相应属性的属性值，不能改变属性名，但是我们一般不用这种方法，我们一般用 getAttribute 和 setAttribute 去取
Here, we also introduce a method to see if this node has children.
hasChildNodes(); //The return value is true or false.
Some properties and methods of Element node
Two attributes of the Element node:
1.innerHTML();//改变HTML里面的内容
如果我们要改变一个div标签的值，代码如下：
div.innerHTML = "";
//在""里放入你要修改的内容
2.innerTEXT();//可以直接取出标签的文本内容，也可以赋值
//该属性火狐不兼容，但是可以使用textConent(老版IE不可用）
Two methods of Element node:
1.getAttribute();//Set an interline attribute, the front is the attribute name, and the back is the attribute value. If we want to set an interline attribute for the div, we can use this method: div.getAttribute('class',' demo');
2.setAttribute();//Take the value of the attribute between the lines
在开发中我们可以使用getAttribute()方法来取data-log的值.
//如果我们要取出a的data-log
<div>
<a href = "#" data-log = "0">点我吧 <a>
<div>
js:
var div = document.getElementsByTagName('div')[0];
var a = document.getElementsByTagName('a')[0];
a.onclink = function() {
console.log(this.getAttribute('data-log'));
}
Non-method operation of DOM
Through some non-method operations, we can also query the nodes
Number of nodes to traverse
1.parentNode；
//父节点，只有一个。遍历节点数，最顶端的parentNode是#document
ep:strong.parentNode;
2.childNodes;//子节点们
ep:div.childNodes;
3.firstChild;//第一个子节点
ep:div.firstChild;
4.lastChild;//最后一个子节点
ep:div.lastChild;
5.nextSibling;//下一个兄弟节点
ep:span.nextSibling;
6.previousSibling;//上一个兄弟节点
ep:span.previousSibling;
Traversal based on element node tree
1.parentElement;//返回当前元素的父元素节点
ep:div.parentElement;
2.children;//元素子节点
3.firstElementChild;//第一个元素节点
4.lastElementChild;//最后一个元素节点
5.nextElementSibling;//返回后一个兄弟元素节点
6.previousElementsibling；//返回前一个兄弟元素节点
//这6个除了children，其他的IE9及以下都不兼容
(Thanks to my friend Mark for his great encouragement and support for my study)