您现在所在的位置:首页 >常见问题 > 课程问题 > web后端工程师必知前端知识

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

来源:奇酷教育 发表于:

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