## Jquery basis (c)

Jquery basis -DOM

## a, DOM is the interface operation JavaScript page, called "Document Object Model" (Document Object Model). It is the role of the web page into a JavaScript object, which can perform various operations (such as add or delete content) script.

According browser DOM model, structured documents (such as HTML and XML) parsing into a series of nodes, and then a tree structure (DOM Tree) from these nodes. All the nodes and the final tree, has standardized external interfaces.

　　## 1, node type

　　## smallest constituent unit 1.1DOM called nodes (node). Tree structure (DOM tree) of the document, that is the various types of nodes. Each node can be seen as a leaf document tree.

　　Type 1.2 nodes ## there are seven:

Document: Top node of the entire document tree
DocumentType: doctypeLabel (for example <!DOCTYPE html>)
Element: Web of various HTML tags (for example <body>, <a>etc.)
Attribute: Properties page elements (such as class="right")
Text: The text of the labels or tags comprising
Comment: Notes
DocumentFragment: Fragments of the document

　　Note: The browser provides a native node object Node, above the seven nodes are inherited Node, so it has some common properties and methods.

　　## 1.3 How to determine the node type:

　　NodeHas a property nodeTyperepresented by Nodethe type, different nodes of nodeTypeattribute values and the corresponding constants as follows

- - 　　　　Document node (document): 9, the corresponding constantsNode.DOCUMENT_NODE
  - 　　　　Element node (element): 1, the corresponding constantsNode.ELEMENT_NODE
  - 　　　　Node attributes (attr): 2, the corresponding constantsNode.ATTRIBUTE_NODE
  - 　　　　Text node (text): 3, the corresponding constantsNode.TEXT_NODE
  - 　　　　Document fragment node (DocumentFragment): 11, corresponding to the constantNode.DOCUMENT_FRAGMENT_NODE
  - 　　　　Document Type node (DocumentType): 10, the corresponding constantsNode.DOCUMENT_TYPE_NODE
  - 　　　　Comment node (Comment): 8, the corresponding constantsNode.COMMENT_NODE

　　When determining the node type ## 1.4, using the nodeTypeproperty is a common method.

　　　　　　var node = document.documentElement.firstChild;
　　　　　　if (node.nodeType === Node.ELEMENT_NODE) { 　　　　　　 console.log('该节点是元素节点'); 　　　　　　}

　　These Nodetypes, the most common is we document, element, attributeseveral types.

　　Reference: https://wangdoc.com/javascript/dom/node.html

## Second, create elements

　　createElement

　　Syntax: document.createElement` method for generating the element node, and returns the node.

　　　　var div = document.createElement('div')

　　## 2,1 use createElement to note: the elements created by createElement does not belong to the html document, it just created it, did not add to the html document, such as to call appendChild or insertBefore method to add it to the HTML document tree.

　　createTextNode

　　createTextNode used to create a text node, used as follows

var newDiv = document.createElement('div');
var newContent = document.createTextNode('Hello');
newDiv.appendChild(newContent);
// <div>Hello</div>

　　## 2,2 code above a new divnode and a text node, then the text node into divnodes.

　　这个方法可以确保返回的节点，被浏览器当作文本渲染，而不是当作 HTML 代码渲染。因此，可以用来展示用户的输入，避免 XSS 攻击。

var div = document.createElement('div');
div.appendChild(document.createTextNode('<span>Foo & bar</span>'));
console.log(div.innerHTML)
// &lt;span&gt;Foo &amp; bar&lt;/span&gt;

　　insertAdjacentElement

　　Element.insertAdjacentElement方法在相对于当前元素的指定位置，插入一个新的节点。该方法返回被插入的节点，如果插入失败，返回null。

　element.insertAdjacentElement(position, element);

　　Element.insertAdjacentElement方法一共可以接受两个参数，第一个参数是一个字符串，表示插入的位置，第二个参数是将要插入的节点。第一个参数只可以取如下的值。

beforebegin：当前元素之前
afterbegin：当前元素内部的第一个子节点前面
beforeend：当前元素内部的最后一个子节点后面
afterend：当前元素之后

// HTML 代码：<body><div>some text</div></body>
var body = document.querySelector('body')
var p1 = document.createElement('p')
body.insertAdjacentElement('afterbegin', p1)
// 执行代码之后
// <body><p></p><div>some text</div></body>

　　insertAdjacentHTML, insertAdjacentText

　　Element.insertAdjacentHTML方法用于将一个 HTML 字符串，解析生成 DOM 结构，插入相对于当前节点的指定位置。

　element.insertAdjacentHTML(position, text);

　　##2,3该方法接受两个参数，第一个是一个表示指定位置的字符串，第二个是待解析的 HTML 字符串。position参数的值与 insertAdjacentElement的 position 取值相同

// HTML 代码：<div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
// 执行后的 HTML 代码：
// <div id="one">one</div><div id="two">two</div>

　　##该方法只是在现有的 DOM 结构里面插入节点，这使得它的执行速度比innerHTML方法快得多。

　　注意，该方法不会转义 HTML 字符串，这导致它不能用来插入用户输入的内容，否则会有安全风险。

　　Element.insertAdjacentText方法在相对于当前节点的指定位置，插入一个文本节点，用法与Element.insertAdjacentHTML方法完全一致。

// HTML 代码：<div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentText('afterend', 'two');
// 执行后的 HTML 代码：
// <div id="one">one</div>two

##三、修改元素

　　appendChild

　　appendChild()方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点。

var p = document.createElement('p');
document.body.appendChild(p);

　　insertBefore

　　insertBefore方法用于将某个节点插入父节点内部的指定位置。insertBefore方法接受两个参数，第一个参数是所要插入的节点newNode，第二个参数是父节点parentNode内部的一个子节点referenceNode。newNode将插在referenceNode这个子节点的前面。返回值是插入的新节点newNode。

var p = document.createElement('p');
document.body.insertBefore(p, document.body.firstChild);

// 上面代码中，新建一个<p>节点，插在document.body.firstChild的前面，也就是成为document.body的第一个子节点。

　　removeChild

　　removeChild方法接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点。

var divA = document.getElementById('A');
divA.parentNode.removeChild(divA);

　　replaceChild

　　replaceChild方法用于将一个新的节点，替换当前节点的某一个子节点。replaceChild方法接受两个参数，第一个参数newChild是用来替换的新节点，第二个参数oldChild是将要替换走的子节点。返回值是替换走的那个节点oldChild

var divA = document.getElementById('divA');
var newSpan = document.createElement('span');
newSpan.textContent = 'Hello World!';
divA.parentNode.replaceChild(newSpan, divA);
// 将divA 替换成 newSpan

##四、查询节点

　　##4.1获取单个节点

document.getElementById

根据元素id返回元素，返回值是Element类型，如果不存在该元素，则返回null。
使用这个接口有几点要注意：
（1）元素的Id是大小写敏感的，一定要写对元素的id
（2）HTML文档中可能存在多个id相同的元素，则返回第一个元素
（3）只从文档中进行搜索元素，如果创建了一个元素并指定id，但并没有添加到文档中，则这个元素是不会被查找到的
```
// HTML代码为
// <span id="myspan">Hello</span>
var span = document.getElementById('myspan');
span.id // "myspan"
span.tagName // "SPAN"
```

document.querySelector

Element.querySelector方法接受 CSS 选择器作为参数，返回父元素的第一个匹配的子元素。如果没有找到匹配的子元素，就返回null。

// 查找元素使用 document.querySelector() 函数
// 这个函数的参数是一个选择器(和 CSS 选择器一样)
// 选择器语法和 CSS 选择器一样, 现在只用 3 个基础选择器 // 元素选择器 var body = document.querySelector('body') // class 选择器, 用的是 .类名 var form = document.querySelector('.login-form') // id 选择器, 用的是 #id var loginButton = document.querySelector('#id-button-login') // log 出来看看 // 选择多个元素使用函数 querySelectorAll var buttons = document.querySelectorAll('.radio-button') // 还可以接受任何复杂的 CSS 选择器 document.body.querySelector("style[type='text/css'], style:not([type])"); // 查找到的元素还可以继续用 querySelector var ul = document.querySelector('.ul') ul.querySelector('li')

　　##4.2获取多个节点

document.getElementsByTagName
document.getElementsByClassName
document.getElementsByName
document.querySelectorAll

　　##4.3获取父节

　　parentElement 和 parentNode

　　获取所有的后代节点

　　children属性返回一个HTMLCollection实例，成员是当前节点的所有元素子节点。

　　childNodes属性返回一个类似数组的对象（NodeList集合），成员包括当前节点的所有子节点，注意，除了元素节点，childNodes属性的返回值还包括文本节点和注释节点。

　　children 和 childNodes 最大的区别就是：children 不会把空白节点算进去。

　　##4.4获取兄弟节点

previousSibling，nextSibling，previousElementSibling，nextElementSibling
空白节点的坑，previousSibling，nextSibling会把空白节点算进去

　　##五、操作 CSS

　　　　##5.1style

// 在单个语句中设置多个样式
elt.style.cssText = "color: blue; border: 1px solid black"; // 或者 elt.setAttribute("style", "color:red; border: 1px solid blue;"); // 设置特定样式，同时保持其他内联样式值不变 elt.style.color = "blue";

　　　　##5.2classList

var element = document.querySelector('.active') if (element != null) { // 使用 classList 可以访问一个元素的所有 class // remove 可以删除一个 class element.classList.remove("active") } element.classList.add('active') // 添加 active样式 element.classList.contains('active') //判断是否包含 active 样式 element.classList.toogle('active') // 如果存在 active 样式就删除，否则就添加

　　　　##5.3获取元素的位置

获取 DOM 元素相对于文档的位置，可以直接使用 offsetTop
获取 DOM 元素相对于视口的位置，可以使用 getBoundingClientRect() 获取 SVG 元素或行内元素的 CSS 盒子（比如用来做文本高亮时），可以使用 getClientRects()； 获取绝对定位元素、伪元素的渲染后 CSS 属性，可以使用 getComputedStyle()

参考链接

获取网页的总宽高

document.body.clientWidth
document.body.clientHeight

获取视口（浏览器可见区域）的宽高

document.documentElement.clientWidth
document.documentElement.clientHeight

## 1, node type

## 1.3 How to determine the node type:

## Second, create elements

createElement

createTextNode

insertAdjacentElement

insertAdjacentHTML, insertAdjacentText

##三、修改元素

appendChild

insertBefore

removeChild

replaceChild

##四、查询节点

##4.1获取单个节点

##4.2获取多个节点

##4.3获取父节

获取所有的后代节点

##4.4获取兄弟节点

##五、操作 CSS

##5.1style

##5.2classList

##5.3获取元素的位置

获取网页的总宽高

获取视口（浏览器可见区域）的宽高

Guess you like

　　## 1, node type

　　## 1.3 How to determine the node type:

　　createElement

　　createTextNode

　　insertAdjacentElement

　　insertAdjacentHTML, insertAdjacentText

　　appendChild

　　insertBefore

　　removeChild

　　replaceChild

　　##4.1获取单个节点

　　##4.2获取多个节点

　　##4.3获取父节

　　获取所有的后代节点

　　##4.4获取兄弟节点

　　##五、操作 CSS

　　　　##5.1style

　　　　##5.2classList

　　　　##5.3获取元素的位置