JavaScript學習筆記010-DOM節點的運用
標簽：
JavaScript
Author：Mr.柳上原
付出不亚于任何的努力
愿我们所有的努力，都不会被生活辜负
不忘初心，方得始终
不常用的东西很快就找不到了
不常写的方法很快就忘记了
字符串和数组的方法
大家还记的几个
<!DOCTYPE html> <!-- 文档类型：标准html文档 --><html lang='en'> <!-- html根标签 翻译文字：英文 --><head> <!-- 网页头部 --><meat charset='UTF-8'/> <!-- 网页字符编码 --><meat name='Keywords' content='关键词1,关键词2'/><meat name='Description' content='网站说明'/><meat name='Author' content='作者'/><title>前端59期学员作业</title> <!-- 网页标题 --><link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 --><style type='text/css'> /*内部样式表*/</style></head><body> <!-- 网页主干：可视化区域 --><div id="box"><div id="b1"> // 属性节点
content // 文本节点<!-- 注释 --> // 注释节点</div><p></p></div><script>/*
DOM：
Document Object Model
*/const box = document.getElementById("box");// childNodes兼容性：在低版本IE下只返回元素节点console.log(box.childNodes); // box的所有子节点（包括注释，文本）// children 返回元素节点console.log(box.children); // box的所有子元素节点// nodeType 返回节点类型：元素节点type值为1，文本节点type值为3// nodeName 返回节点名字（大写）console.log(box.children[0].nodeName.toLowerCase() === "div"); // box的第一个元素节点的名字// tagName 返回元素节点名字（大写）// getAttributeNode 返回元素的属性节点console.log(box.getAttributeNode("id")); // box的id属性节点// setAttributeNode 设置元素的属性节点const cls = document.createAttribute("class"); // 创建class属性box.setAttributeNode(cls); // 给box增加class属性console.log(box);// setAttribute 给元素设置属性box.setAttribute("fengyu", "123");console.log(box);// getAttribute 获取元素属性的值console.log(box.getAttribute("fengyu")); // box元素中fengyu属性的值// removeAttribute 删除元素的属性console.log(box.removeAttribute("fengyu")); // 删除box元素中的fengyu属性// firstChild 等价于childNode[0]// firstElementChild 返回第一个元素节点，只兼容主流浏览器// lastChild 跟firstChild类似，返回最后一个元素节点// lastElementChild 返回最后一个元素节点// nextSibling 返回下一个兄弟节点// nextElementSibling 返回下一个兄弟元素节点// previousSibling 返回前一个兄弟节点// previousElementSibling 返回前一个兄弟元素节点// parentNode 返回父节点// offsetParent 返回定位父级// childElementCount 返回子元素节点个数// 创建节点document.createElement(" ");
box.appendChild(" ");// removeChild 删除节点（只能删除子级）// 创建节点片段（仓库）const a = document.createDocumentFragment( );
box.appendChild(" ");
box.appendChild(" ");
box.appendChild(a); // 一次渲染多个对象</script></body></html>
作者：Mr柳上原
链接：https://www.jianshu.com/p/e5343235c836
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦