【前端入门】DOM操作基础,先来聊聊Node 接口基本用法哦~

141 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第30天,点击查看活动详情

前言:终于更文三十天啦!感谢大家的支持!我会继续努力坚持学习!养成了好习惯,每天必定会抽出时间多多少少学习前端知识,JavaScript教程和知识点基本上也学习完了!接下来会看些进阶的内容,我们一起加油吧!

今天我们一起来看看:所有 DOM 节点对象都继承了 Node 接口,如果希望学会操作DOM,可以来一起看看Node接口有哪些属性和方法~

nodeType属性返回一个整数值,表示节点的类型

例如:

document.nodeType // 9

属性值和对应的常量:

  • 文档节点(document):9,对应常量Node.DOCUMENT_NODE
  • 元素节点(element):1,对应常量Node.ELEMENT_NODE
  • 属性节点(attr):2,对应常量Node.ATTRIBUTE_NODE
  • 文本节点(text):3,对应常量Node.TEXT_NODE
  • 注释节点(Comment):8,对应常量Node.COMMENT_NODE

如何获得节点名称

nodeName属性返回节点的名称

var div = document.getElementById('d1');
div.nodeName // "DIV"

属性值如下:

  • 文档节点(document):#document
  • 元素节点(element):大写标签名
  • 属性节点(attr):属性名
  • 文本节点(text):#text
  • 文档片断节点(DocumentFragment):#document-fragment
  • 文档类型节点(DocumentType):文档类型
  • 注释节点(Comment):#comment

如何获得节点文本值

nodeValue属性返回一个字符串,表示当前节点本身的文本值

特别注意:只有文本节点(text)、注释节点(comment)和属性节点(attr)有文本值,其他节点都会返回null哟~

// <div id="d1">hello world</div>
var div = document.getElementById('d1');
div.nodeValue // null
div.firstChild.nodeValue // "hello world"

如何获得网页绝对路径

baseURI属性返回一个字符串,表示当前网页的绝对路径;一般由当前网址 URL(window.location属性)决定的

例如:

// 当前网页的网址为http://www.xxx.com/index.html
document.baseURI

// 返回:"http://www.xxx.com/index.html"

//如果无法读到网页的 URL,`baseURI`属性返回`null`

终于更文三十天啦!感谢大家的支持!我会继续努力坚持学习!

写在最后,终于更文三十天啦!感谢大家的支持!我会继续努力坚持学习!养成了好习惯,每天必定会抽出时间多多少少学习前端知识

以上习题&笔记从大佬们的论坛学习而来,特感谢大佬们的知识分享~ (学习技术知识,果然要看大佬们的技术博客,大家有好的推荐也欢迎指引我这个小白哈,感恩!)

附上学习链接,感谢这些大佬出题和解答:wangdoc.com/javascript/…