欢迎光临
我的个人博客网站

JavaScript连载29-元素类型获取、节点CD


一、元素类型分类

常量名 常量值 节点类型 描述
Node.ELEMENT_NODE 1 Element 代表元素
Node.ATTRIBUTE_NODE 2 Attr 代表属性
Node.TEXT_NODE 3 Text 代表元素或者属性中的文本内容
Node.CDATA_SECTION_NODE 4 CDATASection 代表文档中的CDATA部(不会由解析器解析的文本)
Node.ENTITY_PEFERENCE_NODE 5 EntityReference 代实体引用
Node.ENTITY_NODE 6 Entity 代表实体
Node.PROCESSING_INSTRUCTION_NODE 7 Processinginstruction 代表处理指令
Node.COMMENT_NODE 8 Comment 代表注释
Node.DOCUMENT_NODE 9 Document 代表整个文档(DOM树的根节点)
Node.DOCUMENT_TYPE_NODE 10 DocumentType 向为文档定义的实体提供接口
Node.DOCUMENT_FRAGMENT_NODE 11 DocumentFragment 代表轻量级的Document对象(文档的某个部分)
Node.NOTATION_NODE 12 Notation 代表DTD中的声明符号
  • 下面我们举个例子,取出一些元素标签
<body> <div id="box">     <button class="btn">按钮</button>     <span id="span">         <a href="#">一个链接</a>     </span>     <p class="lk">我是段落标签</p>     <div>哈哈哈</div> </div> <script>     window.onload = function (ev) {         //1.获取标签         var box = document.getElementById("box");         //2.获取标签内部的所有节点         var allNodeLists = box.childNodes;         //3.过滤元素节点         var newListArr = [];         allNodeLists.forEach(function (value,key,parent) {             // console.log(value);             console.log(value.nodeType);             if(value.nodeType === 1){//这里的意思就是把元素标签拿出来                 newListArr.push(value);             }          });         console.log(newListArr);     } </script> </body> 

JavaScript连载29-元素类型获取、节点CD

二、节点CD

  • 文档加载过程补充讲解:
  • (1)onload:
window.onload = function(){ 	//当页面加载完成执行 	//当也买你完全加载所有的内容(包括图像、脚本文件、CSS文件等)执行 
  • (2)onunload:
window.onunload = function(){ 	//当用户退出页面时候执行 } 

三、DOM

  • 节点操作
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>D29_1_TagCD</title> </head> <body>     <div class = "box">         <p id="word">xiaoming</p>         <button id="btn">点我</button>     </div> <script>     window.onload = function (ev) {         //CRUD操作         var box = document.getElementsByClassName("box")[0];         //1.创建节点         var img = document.createElement("img")//创建了一个img标签         img.src = "img/img_01.png";         box.appendChild(img);         var btn = document.getElementsByTagName("button")[0];         box.insertBefore(img,btn);     } </script> </body> </html> 

JavaScript连载29-元素类型获取、节点CD

三、源码:

  • D28_1_GetAPI.html
  • D29_1_TagCD.html
  • 地址:https://github.com/ruigege66/JavaScript/blob/master/D28_1_GetAPI.html
  • https://github.com/ruigege66/JavaScript/blob/master/D29_1_TagCD.html
  • 博客园:https://www.cnblogs.com/ruigege0000/
  • CSDN:https://blog.csdn.net/weixin_44630050?t=1
  • 欢迎关注微信
赞(0) 打赏
未经允许不得转载:张拓的天空 » JavaScript连载29-元素类型获取、节点CD
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏