web后端工程师必知前端知识。

　　web后端工程师必知前端知识

　　

　　web后端工程师虽然大部分工作都是在跟服务器和数据库打交道，但有时也需要写一些前端代码。伴随着前后端分离式开发技术越演愈烈，可能对于前端知识的要求逐渐降低，但是为了能够和前端小伙伴更好的交流，打造和谐的团队，掌握一些基本的前端知识还是很有必要的。本系列教程主要包括三个部分html+css+javascript，内容针对后端初学开发者，各种前段大大请绕道，不喜勿喷。

　　

　　本篇讲述JavaScript操作DOM内容

　　

　　文档对象模型

　　

　　通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

　　

　　当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

　　

　　获取文档对象

　　

　　document.getElementById()

　　

　　document.getElementsByTagName()

　　

　　document.getElementsByName()

　　

　　document.getElementsByClassName()

　　

　　操作DOM对象内容

　　

　　innerText

　　

　　innerHTML

　　

　　操作DOM对象的属性

　　

　　DOM对象.属性名称

　　

　　DOM对象[属性名称]

　　

　　getAttribute(属性名称)、setAttribute(属性名称,属性值)

　　

　　removeAttribute(属性名称)

　　

　　document.getElementById(“box”).value = 10

　　

　　document.getElementById(“box”)[“name”] =“ZZY”

　　

　　document.getElementById(“box”).setAttribute(“value”,“ZZY”)

　　

　　document.getElementsByTagName("p")

　　

　　操作DOM对象样式

　　

　　获取样式的值（有单位）

　　

　　标签对象.style.样式名称

　　

　　获取样式的数值（无单位，数字）

　　

　　注意内部样式表和外部样式表中的样式获取需要使用到

　　

　　getComputedStyle(对象).width

　　

　　52

　　

　　操作DOM节点

　　

　　节点创建删除

　　

　　createElement（）：创建元素节点

　　

　　appendChild（）：末尾追加方式插入节点

　　

　　insertBefore（新元素,参考元素）：在指定节点前插入新节点

　　

　　remove() ：删除指定节点

　　

　　removeChild（）:删除子节点

　　

　　相关节点获取

　　

　　parentElement父元素

　　

　　children 所有的子元素

　　

　　firstElementChild第一个子元素

　　

　　lastElementChild最后一个子元素

　　

　　previousElementSibling前一个

　　

　　nextElementSibling后一个

　　

　　操作DOM对象事件

　　

　　Js事件分为鼠标和键盘事件、窗口个事件

　　

　　常见的鼠标事件：onclick、ondblclick等

　　

　　常见的键盘事件：onmousedown、onmouseup、onmousepress、onmousemove、onmouseenter、onmouseleave、onmouseover、onmo

　　

　　useout

　　

　　常见窗口事件：onload、onscroll、onresize、

　　

　　所有的事件处理函数都会都有两个部分组成，on + 事件名称，例如click事件的事件处理函数就是：onclick