dom操作

document代表整个文档

var div = document.getElementById(‘id名’);//返回是一个,不是数组 var div = document.getElementsByTagName(‘标签名’);//返回数组 (实时) var div = document.getElementsByClassName(‘class名’);//(带s的都是数组) var div = document.getElementsByName(‘name’);//name名 var div = quarySelector();//css选择器 选择一个 里面放’id’,‘class’… var div - quarySelectorAll();//css选择器 选择一个(静态的,不实时。用途受局限)

遍历节点数

parentNode–>父节点(最顶端的父节点为#document) childNodes–>子节点们(文本节点,注释节点,元素节点) firstChild–>第一个子节点 nextSibling–>后一个兄弟节点 previousSibling–>前一个兄弟节点

基于元素节点数的遍历

parentElement–>返回当前元素的父元素节点(ie不兼容)最顶端为html children–>只返回当前元素的元素子节点 node.childElementCount===node.children.length 当前元素节点的子元素个数 firstElementChild–>返回的是第一个元素节点(ie不兼容) lastElementChild–>返回的是最后一个元素节点(ie不兼容) nextElementSibling/previousElementSibling–>返回后一个/前一个兄弟元素节点

节点的四个属性

nodeName 元素的标签名,以大写形式表示,只读 nodeValue Text节点或Comment节点的文本内容,可读写 attributes Element节点的属性集合 节点的一个方法 Node.hasChildNodes();

节点类型 元素节点–1 属性节点–2 文本节点–3 注释节点–8 document-9 DocumentFragment–11

dom基本操作(元素)

增 document.createElement(’’); document.cteateTextNode(’’); document.createComment(’’);//创建注释节点(感觉用处不大) document.createDocumentFragment(’’);

删 parent.removeChild(); child.remove(); 插 parentnode.appendChild();(任何元素节点都有,剪切操作) parentnode.insertBefore(newElement,targetElement); 替换 parent.replaceChild(new,origin);

dom操作(属性)

ELement节点的一些属性 innerHTML (覆盖掉原先的)想追加用+= innerText(火狐不兼容)/textContent(老版本ie不好使) Element节点的一些方法 element.setAttribute(“属性名”,“属性值”);//设置属性 element.getAttribute(“属性名”);//获取属性值 修改样式 节点.style.样式=value; 克隆节点 cloneNode();

表格操作

获取表格的行和列 行 列表对象.rows 列 行.cells 新增行 列表对象.insertRow(); 新增列 行.insertCell(); 删除行 deleteRow(); 删除列 deleteCell();

计时器

setInterval(函数名,间隔时间); setTimeout(函数名,延时时间); 清空定时器 clearInterval(计时器); clearTimeout(计时器);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券