Dom学习

document.createElement(tagname)
创建一个由tagName决定的HTML元素

Node.contains()
查找父元素下是否包含某个子元素

获取元素

Node.parentNode
获取Node节点的父元素

Node.childNodes
返回指定节点的所有子元素的集合。包括`文本节点`等

Node.children
返回指定节点的所有子元素的集合。只包括`元素节点`等

Node.firstChild
返回指定节点的第一个子节点。包括`文本节点`等

Node.firstElementChild
返回指定节点的第一个子`元素节点`。

Node.lastChild
返回指定节点的最后一个子节点。包括`文本节点`等

Node.lastElementChild
返回指定节点的最后一个子`元素节点`。

元素操作

Node.appendChild()
将一个节点添加到指定节点的子节点列表的末尾。

var child = node.appendChild(child)
// node 要插入子节点的父节点
// child 既是参数又是返回值

Node.removeChild()
将一个节点从DOM树中移除。移除后还存在于内存中，还可以继续添加到DOM树中

var oldChild = node.removeChild(child);
// node child的父节点
// child 要移除的子节点
// oldChild 保存对移除子节点child的引用。可以继续将其添加到DOM树中

Node.insertBefore()
在当前节点的某个子节点之前再插入一个子节点。

var insertedElement = parentElement.insertBefore(newElement, referenceElement);
// 如果referenceElement为空，则插入到parentElement的子节点末尾。
// insertedElement 插入的子节点，即newElement
// parentElement 新插入节点的父节点
// newElement 新插入的节点
// referenceElement 在该节点之前插入newElement。可以通过将referenceElement改为referenceElement.nextElementSibling方式让newElement插入到referenceElement之后。实现类似insertAfter方法。

Node.replaceChild()
用指定节点替换当前节点的一个子节点，返回被替换掉的节点。

var replacedChild = parentNode.replaceChild(newChild, oldChild);
// newChild 会替换掉 oldChild。如果newChild已经存在于DOM树中，则会从DOM树中删除
// oldChild 被替换掉的节点。
// replacedChild 等于 oldChild

元素选择

document.querySelector(selectors)
selectors 是一个字符串，包含一个或多个css选择器。返回获取到的元素。

document.querySelectorAll(selectors)
和querySelector用法类似，只是返回值为NodeList对象。

document.getElementById()

document.getElementsByClassname()

属性操作

element.setAttribute(name /*属性名*/, value /*属性值*/)

element.removeAttribute(attrName /*要删除的属性名*/)

element.getAttribute(attrName)

element.hasAttribute(attrName)

事件操作

element.addEventListener(type, listener, [, options])

element.removeEventListener(type, listener, [, options])

事件监听

• 方法1:直接元素标签上绑定事件

<div class="nav-left" id="nav-father" onclick="navLeftOnfocus(this.id)"/>
    
function navLeftOnfocus(id){  
console.log(id)  
const element = document.getElementById("nav-father")  
console.log(element)  
}

• 方法2:在script脚本中获取通过id获取该元素并且给该元素绑定事件

事件委托

// 给⽗层元素绑定事件
document.getElementById('list').addEventListener('click', function (e) {
// 兼容性处理
var event = e || window\.event;
var target = event.target || event.srcElement;
// 判断是否匹配⽬标元素
if (target.nodeName.toLocaleLowerCase === 'li') {
console.log('the content is: ', target.innerHTML);
}
});

Flex布局

flex-direction

决定元素排列的主轴方向 取值：

• row
• row-reverse
• column
• column-reverse
  

row/row-reverse沿横向沿伸，column/column-reverse沿着纵轴沿伸
交叉轴方向：与主轴垂直
起始线和终止线用于界定元素的排列（比如根据不同的书写习惯，在横轴上从左到右，也可以从右到左）

flex-容器

通过设置display:flex/inline-flex,可以使得此时容器中的直系子元素为flex元素，这些元素的所有css属性会有一些初始值

• 元素排列为一行 (flex-direction 属性的初始值是 row)
• 元素从主轴的起始线开始
• 元素不会在主维度方向拉伸，但是可以缩小
• 元素被拉伸来填充交叉轴大小
• flex-basis 属性为 auto
• flex-wrap 属性为 nowrap
  

表现为：元素呈线形排列，并且把自己的大小作为主轴上的大小。如果有太多元素超出容器，它们会溢出而不会换行。如果一些元素比其他元素高，那么元素会沿交叉轴被拉伸来填满它的大小。

flex-wrap

设置flex-wrap:wrap,即当子元素在一行排列不下时，自动换行；如果设置为nowrap则不换行，此时如果元素可缩小则缩小排列，否则会溢出。

flex-flow

flex-flow是flex-direction和flex-wrap的组合，可以指定两个值，第一个值为flex-direction，第二个值为flex-wrap。

flex-flow:row wrap;

flex属性grow shrink basis

一个重要的概念available space：flex容器里除了元素所占的空间以外的富余空间就是可用空间 available space。在 1个500px的容器中，我们有3个100px宽的元素，那么这3个元素需要占 300px 的宽，则此时的available space为200px。在默认情况下，flexbox 的行为会把这 200px 的空间留在最后一个元素的后面。

• flow-basis 该属性决定了元素的所占空间大小，默认为auto。如果元素被设置了尺寸大小，则flex-basis默认为该尺寸大小，如果元素未被设置尺寸大小，则flex-basis的默认值为元素所含内容的大小。也可以直接指定元素的所占空间大小，如flex-basis: 100px。

• flex-grow。当该属性设置为正数时，元素会以flow-basis为基础值，沿主轴方向增长尺寸，增长的空间从可用空间中获取。该属性被设置为0时，则表示元素不会增长尺寸。flex容器会根据各个flex元素的flex-grow的值来按比例分配容器的可用空间。
  如果容器有三个元素，并且flex-grow都设置为1或者其他相同的值，则平均分配可用空间。如果三个元素分别设置了flex-grow：1 2 1，此时表示第二个元素获得可用空间的2/4，第一和第三个元素获得可用空间的1/4.最终可用空间都会全部被元素分配完毕。
• flow-shrink。该属性和flex-grow相反，用于缩小元素。我们的容器中没有足够排列 flex 元素的空间，那么可以把 flex 元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。与flex-grow属性一样，可以赋予不同的值来控制 flex 元素收缩的程度 —— 给flex-shrink属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大。
  

通常flex的这三个属性会一起设置，可以通过设置flex的值同时设置flex-grow shrink basis,如：

flex: 0 1 auto

同时也提供了一些预定义的值

flex:initial;默认值，表示flex: 0 1 auto;
flex:auto;表示flex: 1 1 auto;
flex:none;表示flex: 0 0 auto;

元素对齐和空间分配

justify-content

设置元素在主轴上排列方式

• flex-start
• flex-end
• center
• space-betwteen
• space-around
• stretch

align-item

设置元素在侧轴上排列方式

• flex-start
• flex-end
• center
• stretch