1:节点:nodeType,nodeValue,nodeName

getAttributeNode() 方法从当前元素中通过名称获取属性节点。

元素节点nodeValue是null,属性节点nodeValue是名值

<h1 id="a">123456</h1>
<script>
var oH1 = document.getElementById("a"); //元素节点1
var oTxt = oH1.firstChild; //文本节点3
var oId = oH1.getAttributeNode("id"); //属性节点2
//1,3,2
console.log("nodeType: "+oH1.nodeType+","+oTxt.nodeType+","+oId.nodeType);
//null,123456,a
console.log("nodeValue: "+oH1.nodeValue+","+oTxt.nodeValue+","+oId.nodeValue);
//H1,#text,id
console.log("nodeName: "+oH1.nodeName+","+oTxt.nodeName+","+oId.nodeName);
</script> 

2:children和childNodes区别
chilren返回元素列表(不包含空格,非标准属性但兼容好):console.log(oDiv.children)


childNodes返回节点列表(不包含空格标准属性HTML DOM):console.log(oDiv.childNodes)


<div id="aa">
<h1>123456</h1>
<p>qwrert</p>
</div>
3:nextElementSibling和nextSibling区别
node.nextSibling/node.nextElementSibling
nextSibling:找下一个节点,以Node对象返回,包含空格(HTML DOM) 找不到返回Null
nextElementSilbing: 找下一个元素节点,不包含空格,但IE8及以下不支持。

SW:HTML DOM的更多相关文章

  1. HTML DOM(一):认识DOM

     分类: HTML/JavaScript/CSS(10)  版权声明:本文为博主原创文章,转载请注明出处http://blog.csdn.net/ghsau. 什么是DOM?       通过 Jav ...

  2. JavaScript 是如何工作:Shadow DOM 的内部结构 + 如何编写独立的组件!

    这是专门探索 JavaScript 及其所构建的组件的系列文章的第 17 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...

  3. 小tips:HTML DOM中的children和childNodes属性

    childNodes 属性 标准的,childNodes 属性返回节点的子节点集合,以 NodeList 对象.包括HTML节点,所有属性,文本.可以通过nodeType来判断是哪种类型的节点,只有当 ...

  4. 走进DOM:HTML DOM

    DOM(Document Object Model)即文档对象模型.针对HTML和XML 文档的API(应用程序接口). DOM描绘了一个层次化的节点树,执行开发者加入.移除和改动页面的某一部分.当然 ...

  5. Qt 学习之路 2(60):使用 DOM 处理 XML

    Qt 学习之路 2(60):使用 DOM 处理 XML  豆子  2013年8月3日  Qt 学习之路 2  9条评论 DOM 是由 W3C 提出的一种处理 XML 文档的标准接口.Qt 实现了 DO ...

  6. AngularJS:HTML DOM

    ylbtech-AngularJS:HTML DOM 1.返回顶部 1. AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-d ...

  7. virtual DOM的作用:将DOM的维护工作由系统维护转交给virtual DOM维护

    virtual DOM的作用:将DOM的维护工作由系统维护转交给virtual DOM维护 两个方面:对应用端 & 对DOM端(渲染准备的计算) 1.将DOM状态的维护工作由系统维护转交给vi ...

  8. 浏览器端-W3School-HTML:HTML DOM Video 对象

    ylbtech-浏览器端-W3School-HTML:HTML DOM Video 对象 1.返回顶部 1. HTML DOM Video 对象 Video 对象 Video 对象是 HTML5 中的 ...

  9. 浏览器端-W3School-HTML:HTML DOM Textarea 对象

    ylbtech-浏览器端-W3School-HTML:HTML DOM Textarea 对象 1.返回顶部 1. HTML DOM Textarea 对象 Textarea 对象 Textarea ...

随机推荐

  1. 工作中遇到的一些linux常用命令总结

    零.查看历史命令,linux中可按“↑” “↓”查找之前输入的命令,亦可用 history 命令查看之前的输入,linux中的亦有“Tab”键可联想输入 一.root权限: 1.su 之后输入root ...

  2. Migrating Brokers in a Cluster

    Brokers can be moved to a new host in a Kafka cluster. This might be needed in the case of catastrop ...

  3. ansible_playbook 一键搭建集群架构

    目录 基础优化 SSH.Ansible,批量管理服务项目 剧本开始-----.10分钟左右 mail.yaml base.yaml rsync.yaml nfs.yaml web.yaml tweb. ...

  4. 使用axios 的post请求下载文件,

    axios({ method: 'post', data: param, responseType:'blob', url: _urls + '/Downloaddata' }).then(data= ...

  5. 记录使用nodejs时,未正确使用import导致的错误

    2019/04/08 今天看了es6入门,才发现以前碰到的关于import的错误,是因为使用了import,但nodejs默认不支持导致的. 如果想要使用es6的module功能,需要把整个文件的导入 ...

  6. NodeJs之服务搭建与数据库连接

    NodeJs之服务搭建与数据库连接 一,介绍与需求分析 1.1,介绍 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻 ...

  7. asp.net core 2.2 中的过滤器/筛选器(上)

    ASP.NET Core中的过滤器/筛选器 通过使用 ASP.NET Core MVC 中的筛选器,可在请求处理管道中的特定阶段之前或之后运行代码. 注意:本主题不适用于 Razor 页面. ASP. ...

  8. Spring AOP 前置通知

    我们使用AspectJ对Spring进行AOP操作,有两种方式,注解和XML配置方式,先在pom.xml中声明jar包 <dependencies> <dependency> ...

  9. Linux调整日期时间

    Linux日期不准确,要更改 Linux 系统整个系统范围的时区可以使用如下命令: sudo rm -f /etc/localtime sudo ln -s /usr/share/zoneinfo/A ...

  10. css居中flex

    css利用flex实现居中(子元素可以不必管宽高):