元素节点的树状图

document>documentElement>body>tagName

offsetLeft/offsetTop 结合运动

滚动轮播

  1.DOM 全称:document object model

    (1) 节点树状图

    document>documentElement>body>tagname

  2.我们常用的节点类型

    元素节点(标签)

    文本节点(文本节点)

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

    

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

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

4.节点的获取

  元素节点获取有很多方法

  document.getElementById()

  document.getElementsByClassName()

  document.getElementsByTagName()

  document.querySelector()

  document.querySelectorAll()

  属性节点的获取

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

  得到里面的值 元素.attributes[1].value

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

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

  元素.removeAttribute(“属性”)  删除属性

  文本节点

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

5.获取元素的子节点

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

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

  获取单个子节点

  获取第一个孩子

  标准下 元素.firstElementChild

  非标准下 元素.firstChild

  兼容下写法

    var list=document.getElementById("list")

    var fist=list.firstElementChild||list.firstChild

    console.log(fist)

  获取最后一个子节点

  元素.lastElementChild     元素.lastchild

  获取上一个兄弟节点

  元素.previousSibling

  元素.previousElementSibling

  获取下一个兄弟节点

  元素.nextSibling

  元素.nextElementSibling

6.获取父节点

  元素.parentNode  没有兼容性

  元素.parentNode.parentNode

  区分offsetParent和parentNode的区别

DOM2 动态创建节点

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

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

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

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

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

4,删除元素节点  父元素.removeChild()

案例分析

  仿留言板

  

  兼容性

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

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

超链接a的属性href分析

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

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

  <a href=”javascript:;”> 取消刷新页面的功能

拓展

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

字符串拼接

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

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

Dom创建

优点:是一个独立的个体,不会影响到原有的元素

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

Dom回流

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

补充

提升页面性能优化

  1. 多采用雪碧图
  2. 阻止超链接的默认行为
  3. 减少Dom回流
  4. 减少向服务器请求的次数

JS(JavaScript)的进一步了解8(更新中···)的更多相关文章

  1. 百度前端学院js课堂作业合集+分析(更新中...)

    第一课:简陋的登录框 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  2. JS基础知识再整理..........不断更新中

    1.JS的五种基本数据类型:字符串.数值.布尔.null.underfined. 2.在JS中,字符串.数值.布尔三种数据类型,有其属性和方法: 3.字符串的三种常用方法[.indexof()..su ...

  3. JS - 二叉树算法实现与遍历 (更新中...)

    一.关于二叉树: 截图来自:https://segmentfault.com/a/1190000000740261 温馨提示:学习以及使用二叉树概念,心中永远有这么一个图,对于理解和接受二叉树有很大的 ...

  4. html的进一步了解(更新中···)

    (接上一次) 属性:表示事物的一些特征 属性又可分为两种: 标签属性和样式属性 两者的区别: 位置不一样 样式属性写在style中 标签属性写在标签内 写法不一样 样式属性是属性:属性值 标签属性是属 ...

  5. 常用JS、jquery 命令(不断更新中)

    设置用户粘贴板中的文本信息:window.clipboardData.setData('Text', location.href); 获取用户粘贴板中的文本信息: window.clipboardDa ...

  6. CSS的进一步深入(更新中···)

    在之前我们学了6种选择器和三种CSS样式的引入,学习选择器就是为了更好的选择文本,学习CSS的引入是为了使文本增加各种样式和属性, 下面我们简单来学习一下为文本加样式和一些属性和属性值: 1.文本的样 ...

  7. js坑爹笔试题目汇总(持续更新中)

    把你的面试官问倒,你就是一个合格的面试者了,以下总结一些易错的js笔试题目,会持续更新中.欢迎关注 1,考察this var length = 10 function fn(){ alert(this ...

  8. 【前端】Util.js-ES6实现的常用100多个javaScript简短函数封装合集(持续更新中)

    Util.js (持续更新中...) 项目地址: https://github.com/dragonir/Util.js 项目描述 Util.js 是对常用函数的封装,方便在实际项目中使用,主要内容包 ...

  9. JavaScript资源收集分享,持续更新中。。。

    平时收集的一些JavaScript资源,分享给大家 jQuery UI jEasyUI Extensions http://jqext.sinaapp.com 布局做的挺不错,有比较复杂的菜单导航.P ...

  10. gulpfile.js不断更新中...

    Gulp压缩合并js/css文件,压缩图片,以及热更新教程 var gulp = require('gulp');var concat = require('gulp-concat');//- 多个文 ...

随机推荐

  1. Hibernate→ 《Hibernate程序开发》教材大纲

    Hibernate ORM 概览 Hibernate 简介 Hibernate 架构 Hibernate 环境 Hibernate 配置 Hibernate 会话 Hibernate 持久化类 Hib ...

  2. TCPThree_C杯 Day2

    T1 我已经被拉格朗日插值蒙蔽了双眼,变得智障无比. 第一反应就是拉格朗日插值,然后就先放下了它. 模数那么小,指数那么大,这是一套noip模拟题,拉格朗日,你脑袋秀逗了? 无脑暴力20分贼开心. 正 ...

  3. X-editable 不能二次初始化的问题解决方案

    最近用到了 X-editable 可编辑表格插件,发现了一个头疼的问题,X-editable 不能对同一个 <a> 元素二次初始化. 如下代码举例:在页面加载完成时,用“数组1”填充一个下 ...

  4. 开通了第一个博客,mark一下!

    今日上网查询了不同的博客,包括csdn.掘金等,最终决定选择博客园.打算待前端学完后,自己建立一个博客,这段时间内先用博客园记录学习过程.经常总结.更新,相信坚持学习一定可以找到好工作!

  5. Flask第一篇

    一. Python 现阶段三大主流Web框架 Django Tornado Flask 对比 1.Django 主要特点是大而全,集成了很多组件,例如: Models Admin Form 等等, 不 ...

  6. docker下载容器镜像

    下载镜像的命令非常简单,使用docker pull命令即可. 在docker的镜像索引网站上面,镜像都是按照用户名/镜像名的方式来存储的. 有一组比较特殊的镜像,比如ubuntu这类基础镜像,经过官方 ...

  7. React Native-组件的引用

    之前文章中,我们使用了许多React Native组件,也定义了一些组件.但是我们都没有定义组件的标识,我们都是通过回调方法处理组件对应的事件,这种情况能满足绝大多数需求,有些情况我们需要对组件进行操 ...

  8. Git 进阶:10大技巧让你迅速提升

    1.Git自动补全 假使你使用命令行工具运行Git命令,那么每次手动输入各种命令是一件很令人厌烦的事情. 命令: cd ~ curl https://raw.github.com/git/git/ma ...

  9. SDUT-2132_数据结构实验之栈与队列二:一般算术表达式转换成后缀式

    数据结构实验之栈与队列二:一般算术表达式转换成后缀式 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 对于一个基于二元运 ...

  10. @gym - 101190B@ Binary Code

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 我们称一组字符串是 "前缀码",当且仅当不存 ...