前端开发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总结》
» 本文链接地址:https://www.rokub.com/7964.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!