1. dom>documentElement>body>tagname

2.我们常用的节点标签。

  元素节点(标签)

  文本节点

  属性节点(标签里的属性)

3.document有个属性nodeType返回的是数字

1.代表元素节点  2.代表属性节点  3.代表文本节点

4.节点的获取

元素节点获取有很多方法

Document.getElementById()

Document.getElementsByClassName()

Document.getElementsByTagName()

Document.querySelector()

Document.querySelectorAll()

属性节点的获取

元素.attributes 获取元素身上所有属性构成的集合

元素.setAttribute(“属性名”,“属性值”)给元素设置属性和属性值

元素.getAttribute(“属性名”)获取属性值的方法

元素.removerAttribute("属性")删除属性

文本节点

没有获取的方法,没有意思

5.获取元素的子节点

元素.childNodes 这个属性有兼容性 标准浏览器会获取文本节点

而低版本浏览器不会。所以建议使用 children这个属性

获取单个子节点

获取第一个子节点

标准下   元素.firstElementChild

非标准下   元素.firstChild

兼容写法

    var list=document.getElementById("list")

    var fist=listElementChild||list.fistChild

    console.log(fist)

获取最后一个子节点

  元素.lastElementChild  元素.lastChild

获取是一个兄弟节点

  元素.previousSibling  元素.prevElementSibling

获取下一个兄弟节点

  元素.nextSibling  元素.nextElementSibling

6.获取父节点

元素.parentNode 没有兼容性

元素.parentNode.parentNode

区分 offsetparent和parentNode

DOM2创建节点

1.生成节点的方法  document。createElement(“div”)

2.插入节点的方法  父节点.appendChild(新节点)

  在父节点子节点的后面插入新的节点

3.在指定位置插入新的节点

  (1)父元素.insetBefore(新节点,谁的前面) 将新节点插入指定元素前面

4.  删除元素节点  父元素.removerChild()

案例分析

  防留言板

 

兼容性

元素没有子节点,ie低版本读取不到,而标准浏览器会

因为标准浏览器会把文本节点当作子节点,而ie6-8不会

超链接a的属性href 分析

<a href="">点击会刷新页面,相当于向后台发送一个请求。

<a href="#s">锚点跳转,跳转到某一个id叫s的位置上

<a href="javascript">取消刷新页面的功能

拓展

  字符串拼接和DOM创建都是渲染方式

字符串拼接

  优点:简单,层次感强,可以处理大量数据

  缺点:字符串拼接会影响到原有子元素事件

DOM创建

  优点:每个都是独立的,不会影响原子元素事件

  缺点:处理大量数据会比较麻烦,会造成DOM回流·

什么是DOM回流?

  页面渲染时,我们对HTML结构简单的增删查改时,浏览器会对所有的dom进行重新排序,这就i是DOM回流,严重影响浏览器性能

补充:

    提升页面性能优化

      1.多采用雪碧图

      2.防止超链接默认行为

      3.减少DOM回流

      4.减少向服务器发送请求次数  

                              发表人:晋飞翔

                               QQ:318080891

js节点的类型的更多相关文章

  1. js节点解析

    在JS中,每一个节点都有一个nodeType 属性,用于表明节点的类型.节点类型由在Node 类型中定义的下列12个数值常量来表示,任何节点类型必居其一: Node.ELEMENT_NODE(1); ...

  2. JS nodeType返回类型

    JS nodeType返回类型 前几天朋友正好问道 这个 js的nodeType是个什么概念(做浏览器底层的)正好遇到这篇文章可以向大家解释下 将HTML DOM中几个容易常用的属性做下记录: nod ...

  3. 关于snowflake算法生成的ID转换为JS的数字类型由于过大导致JS精度丢失的问题

    JS的数字类型目前支持的最大值为:9007199254740992,一旦数字超过这个值,JS将会丢失精度,导致前后端的值出现不一致. JAVA的Long类型的       最大值为:922337203 ...

  4. cocos2dx 如何获得节点的类型

    1. 需求:在所有子节点中得到是ui::Text类型的节点,并对其进行操作. 2. 解决方案:在根节点Node中有一个如下的函数: /** * Gets the description string. ...

  5. js节点操作实例

    写了一个简单的小例子来引用js实例 1. 初步节点操作: 2.兼容性节点操作: 3.节点的类型,名字: 4.使用setAttribute设置属性 5.节点复制操作: 6.删除和替换节点 如有错误,还望 ...

  6. js判断undefined类型

    js判断undefined类型 if (reValue== undefined){    alert("undefined");    }  发现判断不出来,最后查了下资料要用ty ...

  7. js DOM Node类型

    DOM(文档对象模型)是针对HTML和XML文档的一个API. DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的.以特定节点为根节点的树形结构.节点分为12种不同的类型,每种类型分别表示 ...

  8. js 的强制 类型 转换cast, 伪对象?

    拼音输入法简单快捷, 但是重码多, 所以要看清了再选择, 不然会影响输入正确性和 心情的! js的类型 隐式 转换? 是指, 根据 表达式的操作符号 如if(), + , && , j ...

  9. js 节点 document html css 表单节点操作

    js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...

随机推荐

  1. [翻译][架构设计]The Clean Architecture

    原文地址:The Clean Architecture The Clean Architecture Over the last several years we've seen a whole ra ...

  2. 7.侧滑、ViewDragHelper、属性动画

    实现这样的效果: ## 侧滑面板(对ViewGroup的自定义)* 应用场景: 扩展主面板的功能* 功能实现: > 1. ViewDragHelper: Google2013年IO大会提出的, ...

  3. Kali学习笔记33:Linux系统缓冲区溢出实验

    之前做过一个Windows应用SLmail的缓冲区溢出的实验 这次来做一个Linux平台的缓冲区溢出实验: 缓冲区溢出是什么? 学过汇编的应该知道,当缓冲区边界限制不严格时,由于变量传入畸形数据或程序 ...

  4. 远程桌面连接:出现身份验证错误,要求的函数不受支持,可能是由于CredSSP加密Oracle修正的解决方法

    在做app时需要连接服务器来进行数据交互,但是在阿里云页面里连接服务器太不好用,所以使用windows自带的远程连接来进行. 一.但是连接的过程中出现了以下问题: 二.最初是有点迷茫的,不知道从哪里下 ...

  5. python中os.path.isdir()等函数的作用和用法

    一 用法和概念: Python中的os模块用于和系统进行交互,其中: 1 os.listdir()用于返回一个由文件名和目录名组成的列表,需要注意的是它接收的参数需要是一个绝对的路径. 2 os.pa ...

  6. 线性插值法的原理和python代码实现

    假设我们已知坐标 (x0, y0) 与 (x1, y1),要得到 [x0, x1] 区间内某一位置 x 在直线上的值.根据图中所示,我们得到 由于 x 值已知,所以可以从公式得到 y 的值 已知 y  ...

  7. C语言数组一种巧妙的使用方式

    作为计算机一种比较古老的语言,它并没有随着岁月老去,而是仍旧在整个领域发挥出耀眼的光芒,就像写作,有很多光芒万丈的句子值得我们去珍藏,今天就遇到了个比较巧妙的数组使用方法,做个记录,以供后续使用. # ...

  8. netty入坑第一步:了解netty和编写简单的Echo服务器和客户端

    早期java API通过原生socket产生所谓的"blocking",大致过程是这样 这种的特点是每次只能处理一个请求,如果要实现多个请求并行,就还要分配一个新的线程来给每个客户 ...

  9. 剑指offer例题分享--4

    前言:搁置许久的更新要继续开始了!前一段时间一直在忙项目和C++的学习,所以搁置了!要改变注意了,要用C++进行编写了,因为要不断练习C++! 面试题15: 书中要求只能遍历链表一次,所以代码如下: ...

  10. ArcMap中属性字段计算器(Field Calculator)的使用技巧

           很多时候,我们在使用ArcGIS进行属性数据编辑时,需要批量修改某些字段值,这时候ArcGIS提供的属性字段计算器(Field Calculator)就是一把利器.下面我就Field C ...