百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

任务中用到的几种DOM方法及相关方法总结

作者张冰瑜课程任务四:基础JavaScript练习(一)2276次浏览132017-03-04 13:46

appendChild

node.appendChild(newnode);

在父节点node下添加一个子节点newnode, 添加位置在原有子节点的末尾, 返回新添加的节点;

insertBefore

node.insertBefore(newnode, existingchild);

在父节点node下, 已存在的子节点existingchild前添加一个子节点newnode, 返回插入的节点;

将新建子节点置于父节点下首位:
(父节点下需至少含有一个子节点)

parent.insertBefore(new, parent.firstChild);

将新建子节点置于父节点下末尾:
(相当于appendChild)

parent.insertBefore(new, null);

nodeType

var type = node.nodeType;

节点类型, 用数字标识, 共有12种节点类型, 其中Element(元素)的nodeType为1, Attr(属性) = 2, Text(文本) = 3.

childNodes

var kids = node.childNodes;

获取父节点node的第一层所有类型的子节点集合, 返回的是NodeList, 并非数组, 如果要转化成数组需要用Array.from()或者...(spread operator).

children

var children = node.children;

获取父节点node下的所有第一层元素子节点.

firstChild

var child = node.firstChild;

获取父节点node的第一层第一个子节点, 若不存在则返回null.

firstElementChild

var element = node.firstElementChild;

获取父节点node的第一层第一个元素子节点.

lastElementChild

var element = node.lastElementChild;

获取父节点node的第一层最后一个元素子节点.

childElementCount

var count = node.childElementCount;

获取父节点node的第一层元素子节点个数, 相当于 node.children.length

removeChild

node.removeChild(oldnode);

从父节点node中移除某个子节点oldnode, 返回被移除的节点.

replaceChild

node.replaceChild(newchild, existingchild);

在父节点node下用newchild替换已存在子节点existingchild, 返回被移除的节点;

createElement

document.createElement([tagname]);

在document下创建元素;

createTextNode

document.createTextNode('some text');

在document下创建一个内容为'some text'的文字节点;

用法:

var element = document.createElement('h1');

element.appendChild(document.createTextNode('some text'));

// 结果: <h1>some text</h1>

参考资料:

DOM Core

0条评论