节点属性 nodeType 返回值为数值
                节点类型(nodeType)    节点名字(nodeName)    节点值(nodeValue)
       元素节点         1                  标签名                 null
       文本节点         3                  #text                 文本
       注释节点         8                 #comment             注释的文字
       文档节点         9                 #document              null
       属性节点         2                  属性名                属性值
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div class="box" a="10" b=20 id="cont" title="这是一个div">hello<!--这是一个注释-->></div>

</body>

<script>

    var obox = document.querySelector(".box")//通过元素属性操作

    console.log(obox.attributes);//显示元素的内置属性

    console.log(obox.attributes[0].class); //undefined

    console.log(obox.attributes[1].a);  //undefined

    console.log(obox.attributes[2]);  //b="20"

    console.log(obox.attributes[3]);   //id="cont"

    console.log(typeof obox.attributes[3]);  object

     console.log(obox.attributes[2]);  //b="20"

     console.log(obox.attributes[2].nodeName); //b

     console.log(obox.attributes[2].nodeValue); //20

     console.log(obox.attributes[2].nodeType);//2

     console.log(obox.nodeName)

     console.log(obox.nodeValue)

     console.log(obox.nodeType)

     console.log(typeof obox.childNodes[0])

     console.log(obox.childNodes[0])

     console.log(obox.childNodes[0].nodeName)

     console.log(obox.childNodes[0].nodeValue)

     console.log(obox.childNodes[0].nodeType)

     console.log(obox.childNodes[1])

     console.log(obox.childNodes[1].nodeName)

     console.log(obox.childNodes[1].nodeValue)

     console.log(obox.childNodes[1].nodeType)

     console.log(document)

     console.log(document.nodeName)

     console.log(document.nodeValue)

     console.log(document.nodeType)

//     伪数组：假数组，可以使用索引和长度遍历

//     但是不能使用数组的方法

//     所有的DOM选择器，返回的数组，都是伪数组

//     arguments

//

//     真数组：既能通过索引和长度遍历，也可以使用数组的方法

</script>

</html>

DOM属性节点加其他节点的操作的更多相关文章

  1. jQuery 源码分析(十三) 数据操作模块 DOM属性 详解

    jQuery的属性操作模块总共有4个部分,本篇说一下第2个部分:DOM属性部分,用于修改DOM元素的属性的(属性和特性是不一样的,一般将property翻译为属性,attribute翻译为特性) DO ...

  2. JavaScript 节点操作Dom属性和方法(转)

    JavaScript 节点操作Dom属性和方法   一些常用的dom属性和方法,列出来作为手册用. 属性:   1.Attributes 存储节点的属性列表(只读)   2.childNodes 存储 ...

  3. JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}

    前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...

  4. jacascript DOM节点——元素节点、属性节点、文本节点

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! DOM节点的三个种类:元素节点.文本节点.属性节点: 元素节点 元素节点就是 HTML 标签元素,元素节点 ...

  5. DOM属性/节点属性

    DOM属性:DOM(Document Object Model,文档对象模型)一种独立于语言,用于操作xml,html的应用编程接口1:获取节点: document.getElementById(id ...

  6. JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

    JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode    父节点 childNodes     ...

  7. DOM中元素节点、属性节点、文本节点

    DOM中有12中节点,但最常用到的是元素节点,属性节点,文本节点. 元素节点的节点类型(nodeType)是1: 属性节点的节点类型(nodeType)是2: 文本节点的节点类型(nodeType)是 ...

  8. DOM中元素节点、属性节点、文本节点的理解

    DOM中元素节点.属性节点.文本节点的理解 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型)  ...

  9. 使用DOM解析XML文件，、读取xml文件、保存xml、增加节点、修改节点属性、删除节点

    使用的xml文件 <?xml version="1.0" encoding="GB2312" ?> <PhoneInfo> <Br ...

  10. 一波儿networkx 读写edgelist，给节点加attribute的操作

    一波儿networkx 读写edgelist,给节点加attribute的操作 read more: nx official: Reading and writing graphs import nu ...

随机推荐

  1. JAVA框架入门理解

    一:关于java开发的框架我们可以先从java web开发框架的变迁来给大家简单叙述一下: 1 SSH --Struts+Spring+Hibernate 2 Spring +SpringMVC + ...

  2. sscms自己从数据库筛选内容

    where条件除了SiteId和ChannelId之外, 还需要加上IsChecked='True',而不是CheckedLevel

  3. c++项目

    如题, 想搞1-2个c++项目把目前除了进程.线程管理的所有所学都用起来. 在自己设想中.

  4. Spring系列之面向切面编程-15

    目录 AOP 概念 AOP 代理 @AspectJ 支持 启用@AspectJ 支持 使用 Java 配置启用 @AspectJ 支持 通过 XML 配置启用 @AspectJ 支持 声明一个方面 声 ...

  5. Android studio 使用Internet传递信息

    使用Intent在Activity之间传递信息1.首先创建一个新的Activity,在activity_main.xml中设计页面,将android.support.constraint.Constr ...

  6. sat初学入门资料2022-12

    1. GlueMiniSatPPT-nabeshima.pdf A fast SAT solver with an aggressive acquiring strategy of glue clau ...

  7. Linux系列---【设置ssh连接超时时间】

    设置ssh连接超时时间 shell工具总是不断的超时,上个厕所就断开了,很不方便,这里根据自己习惯设置一下. echo "export TMOUT=600" >> /e ...

  8. hexo相对路径图片显示

    说明 hexo的图片默认不支持相对路径.需要配置 post_asset_folder 选项,设置从false改成true之后支持.但是要求图片目录必须和文件名相同. 由于我在typore下的markd ...

  9. asp.net页面button按钮防止重复提交的方法

    网上找了一些实现方案都不行,就自己写了个用,还行. 先放javascript代码: <script type="text/javascript"> var clicks ...

  10. element的el-table使用模板插槽在火狐和IE无法显示tooltip（浏览器兼容）

    el-table中使用show-overflow-tooltip属性,配合tooltip出现的浏览器兼容性问题 el-table中使用show-overflow-tooltip属性内容过长被隐藏时显示 ...