Web前端开发工程师是一个很新的职业，是从事Web前端开发工作的工程师。主要进行网站开发，优化，完善的工作。网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
给你学习路线，html-css-js-ajax-jq-html5-css3-bootstrap-vue.js-node.js-react.jd
DOM节点
DOM使用对象的表示方式来表示对应文档的结构和属性。
DOM节点分为元素节点、文本节点、注释节点等。
获取DOM节点
方法一：通过getElementByID获取节点，例如获取文档中id为yiguo的节点并将其保存在变量yiguo中，可以使用的语句为var yiguo=document.getElementByID（‘yiguo’）；得到的是唯一的一个标签对象，因为文档中的ID是唯一的。
方法二：通过getElementByTagName获取节点，获取指定标签名的元素或元素集合。document.getElementByTagName（‘p’）可以得到文档中所有的p标签，使用document.getElementByTagName（‘p’）[i],可以逐一访问获取到的p标签。
方法三：通过getElementByClassName获取节点，获取文档中指定class名的标签。例如document.getElementByClassName（‘yiguo’）可以获取到文档中所有的class=yiguo的标签。
方法四：通过querySelector/querySelectorAll获取节点，获取到的是符合传入css选择器的第一个元素或者全部元素。
小编推荐一个学Web前端的学习裙【 五四七，三零二，三八三 】，无论你是大牛还是小白，是想转行还是想入行都可以来了解一起进步一起学习！裙内有开发工具，很多干货和技术资料分享！
DOM节点遍历
获取到一个唯一的节点时，可以通过节点间的直接关系，来遍历DOM树。
var yiguo=document.getElementByID（‘yiguo’）；
yiguo.parentNode；//获取父节点
yiguo.firstChild/yiguo.lastChild；//获取第一个或者最后一个子节点
yiguo.child Nodes/ yiguo.children；//获取所有的子节点/所有的子（元素节点）
yiguo.previousSibling/ yiguo.nextSibling；//获取前一个/后一个兄弟节点
yiguo.previousElement Sibling/yiguo.nextElementSibling；//获取前一个/后一个兄弟元素节点
创建DOM节点
yiguo=document.creatElement（tagname）；//创建指定标签名称的节点
修改DOM节点
textContent获取节点及其后代节点的文本内容。
yiguo.textContent；//一锅
yiguo.textContent=“大锅”；//将一锅修改为大锅
innerText获取节点及其后代节点的文本内容。使用方法与textContent一样，但是兼容的浏览器不一致。
插入DOM节点
appendChild方法在指定元素后追加一个元素节点。
var h2=document.creatElement（h2）；
h2.innerText=“一锅”；
yiguo.appendChild（h2）；//在id为yiguo的标签下插入一个人h2标签，标签内容为“一锅”。
insretBefore方法在指定的节点前面插入一个节点。
yiguo.insertBefore（ul，h2）//在id为yiguo的标签中，h2标签前插入一个ul标签。
删除DOM节点
removeChild方法删除节点。
小编推荐一个学Web前端的学习裙【 五四七，三零二，三八三 】，无论你是大牛还是小白，是想转行还是想入行都可以来了解一起进步一起学习！裙内有开发工具，很多干货和技术资料分享！
yiguo.removeChild（h2）；//删除h2节点 等价于h2.parentNode.removeChild（h2）；
innerHTML
innerHTML表示节点的HTML内容，可以批量创建节点、插入节点、删除节点。
注意区分方法的大小写，欢迎关注！
网友评论