nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。

nodeName 属性含有某个节点的名称。

元素节点的 nodeName 是标签名称

属性节点的 nodeName 是属性名称

文本节点的 nodeName 永远是 #text

文档节点的 nodeName 永远是 #document

注释:nodeName 所包含的 XML 元素的标签名称永远是大写的

nodeValue

对于文本节点,nodeValue 属性包含文本。

对于属性节点,nodeValue 属性包含属性值。

nodeValue 属性对于文档节点和元素节点是不可用的。

nodeType

nodeType 属性可返回节点的类型。

最重要的节点类型是:

补充:

值-元素类型

1-ELEMENT

2-ATTRIBUTE

3-TEXT

4-CDATA

5-ENTITY REFERENCE

6-ENTITY

7-PI (processing instruction)

8-COMMENT

9-DOCUMENT

10-DOCUMENT TYPE

11-DOCUMENT FRAGMENT

12-NOTATION

HTML文件:

代码如下:

DOM标准

An HTML Document

This is a W3C HTML DOM document.

JS:

代码如下:function showElement(){

var element=document.getElementById("h1");//h1是一个

标签

alert('nodetype:'+element.nodeType);//nodeType=1

alert('nodeName:'+element.nodeName);

alert('nodeValue:'+element.nodeValue); //null

alert('element:'+element);

}

function showText(){

var element=document.getElementById("h1");

var text=element.childNodes[0];

alert('nodeType:'+text.nodeType); //nodeType=3

alert('nodeValue:'+text.nodeValue); //文本节点的nodeValue是其文本内容

text.nodeValue=text.nodeValue+"abc"; //文本内容添加修改删除等等。

alert('nodeName:'+text.nodeName);

alert(text.data); //data同样是其内容,这个属性下同样可以增删改。

}

function showDocument(){

alert('nodeType:'+document.nodeType); //9

alert('nodeName:'+document.nodeName);

alert(document);

}

function showAttr(){

var btnShowAttr=document.getElementById("btnShowAttr"); //演示按钮,有很多属性

var attrs=btnShowAttr.attributes;

for(var i=0;i

var attr=attrs[i];

alert('nodeType:'+attr.nodeType); //attribute 的nodeType=2

alert('attr:'+attr);

alert('attr.name:'+attr.name+'='+attr.value);

}

}

function demo(){

var btnDemo1=document.getElementById("btnDemo1");

btnDemo1.οnclick=showElement; //按钮1取节点nodetype值

var btnDemo2=document.getElementById("btnDemo2");

btnDemo2.οnclick=showText;

var btnDemo3=document.getElementById("btnDemo3");

btnDemo3.οnclick=showDocument;

var btnShowAttr=document.getElementById("btnShowAttr");

btnShowAttr.οnclick=showAttr;

}

window.οnlοad=demo;

更多HTML DOM的nodeType值介绍相关文章请关注PHP中文网!

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

html dom的nodetype值介绍,HTML DOM的nodeType值介绍相关推荐

  1. html dom的nodetype值介绍,HTML DOM nodeType用法及代码示例

    DOM nodeType属性用于查找我们要引用的节点的类型.特定节点的类型以数字形式返回. DOM nodeType属性是一个只读属性. 返回值:它根据节点的类型返回一个数值. 1:如果node是元素 ...

  2. html dom概念,js学习之HTML DOM的一些基础概念

    经过近一个星期,总算把w3chool上的HTML DOM的实例差不多看了一遍,因为本身对其中的很多都用过,所以看起来也很快,现在就再系统的回顾下HTML DOM的一些概念和基础的东西,大部分都是从w3 ...

  3. python中dom是什么意思_python--BOM和DOM

    一. 介绍 什么是BOM和DOM? 简要答案:BOM是浏览器对象模型,用来获取或设置浏览器的属性.行为,例如:新建窗口.获取屏幕分辨率.浏览器版本号等. DOM是文档对象模型,用来获取或设置文档中标签 ...

  4. html中dom多会有影响吗,DOM操作造成的页面卡顿问题及解决

    相关目录 以下为我总结的其他性能优化点,欢迎参考,指点及吐槽 前言 界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现 的.尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很 ...

  5. android log 如何获取double类型后小数点的值_【ES6基础】Symbol介绍:独一无二的值...

    开篇 ES6之前我们都清楚JS有六种数据类型:Undefined.Null.布尔值(Boolean).字符串(String).数值(Number).对象(Object),今天笔者讲的Symbol类型是 ...

  6. DOM算法系列002-寻找指定DOM节点的上一个或下一个节点

    DOM操作算法002-寻找指定DOM节点的上一个或下一个节点-- getDomNode 当我们需要寻找指定DOM节点的上一个节点或下一个节点时,我们可能第一时间会想到下面两个API: node.pre ...

  7. virtual DOM和真实DOM的区别_让虚拟DOM和DOMdiff不再成为你的绊脚石

    来源 | https://juejin.im/post/5c8e5e4951882545c109ae9c Keep Moving 时至今日,前端对于知识的考量是越来越有水平了,逼格高大上了 各类框架大 ...

  8. Patch:虚拟DOM最核心的部分--如何对比虚拟DOM树,以及如果生成真实DOM

    虚拟DOM最核心的部分是patch,它可以将vnode渲染成真实DOM. patch也可以叫做patching算法,通过它渲染真实DOM时,并不会暴力覆盖原有DOM.而是比对新旧俩个vnode之间有哪 ...

  9. 【JS笔记】JS中的DOM对象以及通过JS获取DOM结点,操作DOM属性、DOM增删改查

    这篇文章,主要介绍JS中的DOM对象以及通过JS获取DOM结点,操作DOM属性.DOM增删改查​​​​​​​. 目录 一.JS中的DOM 1.1.什么是DOM 1.2.获取DOM结点 (1)获取htm ...

  10. DOM(一)概述、dom树、查找元素

    目录 一.DOM 概述 二.DOM树 二.查找元素 1. 无需查找的元素 2. 按节点间关系查找 3. 按 HTML 特征查找 三.案例:通过DOM实现购物车效果 一.DOM 概述 DOM全称 Doc ...

最新文章

  1. Docker 入门系列(5)- Docker 端口映射(映射所有IP地址、映射到指定地址和指定端口、映射指定地址任意端口、查看映射端口配置)
  2. 网络广告投放四大技巧有哪些?怎么样投放效果最好?
  3. 我的 Windows Vista 上安装的工具
  4. 从一则笑话里分析项目需求的缺陷
  5. 三十二、R语言基本语法(下篇)
  6. 获得邮件列表失败_新手在批发交易中会失败的5个领域
  7. 访问 Neutron 外部网络 - 每天5分钟玩转 OpenStack(143)
  8. 在mysql中插入日期
  9. mysql 1031错误_为什么我的mysql语句一直报错,找不到错误,望各位大佬指点一番...
  10. String类的equals()与==的区别
  11. 开源运维管理软件排名_企业运维监控平台架构设计与实现(ganglia篇)
  12. 网卡是如何将包转换成电信号并发送到网线中的
  13. 2018/12/06 L1-022 L1-022 奇偶分家 Java
  14. RabbitMQ 集群原理和完善
  15. Oracle redo解析之-1、oracle redo log结构计算
  16. 电信光猫超级密码破解
  17. 使用记账软件 记录日常收支并将数据导出表格保存
  18. Git LFS报错“Git LFS is not installed”
  19. 计算机报名上传图片需要flash,公务员报名上传照片时需要的flash控件是什么
  20. 读易[2]·该出手时就出手(乾卦)

热门文章

  1. Linux运行webdriver,linux - 在chrome中运行Selenium WebDriver python绑定
  2. 2021-05-19Leetcode238.除自身以外数组的乘积
  3. ArcGIS API for Flex 调用天地图、e都市瓦片地图
  4. DOM(三)-01-(示例-邮件列表)
  5. Cisco路由器基本操作
  6. ORA-28112: 无法执行策略函数 问题解决
  7. EasyRecovery15非常好用的电脑数据恢复软件
  8. 微信小程序启动出现初始化失败
  9. 利用X64Dbg解决jlink.exe提示The connected J-Link is defective. Proper opera..._
  10. Android实现 曲线路径动画