前端开发Javascript操作DOM常用API总结

爱奇艺面试前端开发

前端开发面试题

前端开发技术面试题目

node节点API
node有一个属性nodeType表示node的类型，它是一个整数，其数值分别表示相应的node类型
Node是一个接口，中文叫节点，很多类型的DOM元素都是继承于它，都共享着相同的基本属性和方法。常见的Node有element，text，attribute，comment，document等（所以要注意节点和元素的区别，元素属于节点的一种）
html 代码

Node有一个属性nodeType表示Node的类型，它是一个整数，其数值分别表示相应的Node类型，具体如下：

console.log(document.querySelector(”).nodeType)

{

ELEMENT_NODE: 1, // 元素节点

ATTRIBUTE_NODE: 2, // 属性节点

TEXT_NODE: 3, // 文本节点

DATA_SECTION_NODE: 4,

ENTITY_REFERENCE_NODE: 5,

ENTITY_NODE: 6,

PROCESSING_INSTRUCTION_NODE: 7,

COMMENT_NODE: 8, // 注释节点

DOCUMENT_NODE: 9, // 文档

DOCUMENT_TYPE_NODE: 10,

DOCUMENT_FRAGMENT_NODE: 11, // 文档碎片

NOTATION_NODE: 12,

}

节点创建型api createElement

使用createElement要注意：通过createElement创建的元素并不属于html文档，它只是创建出来，并未添加到html文档中，要调用appendChild或insertBefore等方法将其添加到HTML文档树中。
html 代码

创建一个元素节点

const div = document.createElement(“div”);

创建一个文本节点

const textNode = document.createTextNode(“一个TextNode”);

创建一个属性节点

const attr = document.createAttribute(‘title’);

克隆节点

var parent = document.getElementById(“parentElement”);

var parent2 = parent.cloneNode(true);// 传入true

parent2.id = “parent2”;

添加节点

document.getElementById(“parent”).appendChild(child);

在节点之前添加节点

parentNode.insertBefore(newNode,refNode);

删除子节点

parentNode.removeChild(node);

替换节点

targetNode.parentNode.replaceChild(newElement, targetNode);

判断两个节点是否相等

node.isEqualNode(otherNode) 类型和特性相等，则为true

node.isSameNode(otherNode) 只与自己比较时，才为true

节点名称
html 代码

父节点

parentNode 属性获取父级节点

parentElement 属性获取父级元素

textContent 属性获取该节点下的所有文本

innerText 属性获取该节点下的文本，

兄弟节点

previousSibling：节点的前一个节点

nextSibling：节点的后一个节点

子关系型

childNodes：返回一个即时的NodeList，表示元素的子节点列表，子节点可能会包含文本节点，注释节点等。

children：一个即时的HTMLCollection，子节点都是Element，IE9以下浏览器不支持。

firstNode：第一个子节点

lastNode：最后一个子节点

hasChildNodes方法：可以用来判断是否包含子节点。

元素属性型api
html 代码

setAttribute：根据名称和值修改元素的特性，用法如下。

element.setAttribute(name, value);

getAttribute返回指定的特性名相应的特性值，如果不存在，则返回null或空字符串。

ar val = element.getAttribute(“id”);

元素样式型api

window.getComputedStyle

window.getComputedStyle是用来获取应用到元素后的样式，假设某个元素并未设置高度而是通过其内容将其高度撑开，这时候要获取它的高度就要用到getComputedStyle，用法如下：

var style = window.getComputedStyle(element[, pseudoElt]);

样式相关API
html 代码

elem.style.color = ‘red’;

elem.style.setProperty(‘font-size’, ’16px’);

elem.style.removeProperty(‘color’);

web开发前端面试题及答案

前端开发面试注意事项

前端开发面试京东

前端开发Javascript操作DOM常用API总结

节点创建型api createElement

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

节点创建型api createElement

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发