js笔记15
DOM2动态创建节点
1.生成节点的方法
document.createElement("div")
2.插入节点的方法
父元素.appendChild(新节点)
在父节点的子节点后面插入新的节点
3.在指定的位置插入新的节点
父元素.innerBefore(新节点,谁的前面) 将新的节点插入指定的元素前面
4.删除元素节点
父元素.removeChild()
5.案例分析
仿留言板

兼容性
元素没有子节点,ie低版本会读取不到,而标准浏览器会
因为标准浏览器会把文本节点当做子节点,而ie6-8不会
6.超链接a的属性href分析
<a href=""> 点击会刷新新的页面,相当于向后台发送一次请求
<a href="#s"> 描点跳转,跳转到某一个id叫s的位置上
<a href="javascript:;">取消刷新新页面的功能
7.拓展
字符串的拼接和DOM创建都是渲染的方式
字符串的拼接
优点:简单,层次感强,可以处理大量数据
缺点:字符串拼接会影响到原有的子元素的事件
DOM创建
优点:是一个独立的整体,不会影响到原来的元素
缺点:处理数据量过大会比较麻烦,会造成DOM回流
DOM回流
页面渲染的时候,我么对html结构简单的增删查改时,浏览器会对所有的dom进行重新排列,这就是DOM回流,严重影响浏览器的性能
js笔记15的更多相关文章
- [JS]笔记15之客户端存储cookie
-->本地存储发展情况 -->什么是cookie -->cookie优缺点 -->cookie的设置.读取.删除 -->cookie应用 本地存储发展情况 一.什么是co ...
- Ext.Net学习笔记15:Ext.Net GridPanel 汇总(Summary)用法
Ext.Net学习笔记15:Ext.Net GridPanel 汇总(Summary)用法 Summary的用法和Group一样简单,分为两步: 启用Summary功能 在Feature标签内,添加如 ...
- 斯坦福ML公开课笔记15—隐含语义索引、神秘值分解、独立成分分析
斯坦福ML公开课笔记15 我们在上一篇笔记中讲到了PCA(主成分分析). PCA是一种直接的降维方法.通过求解特征值与特征向量,并选取特征值较大的一些特征向量来达到降维的效果. 本文继续PCA的话题, ...
- [Aaronyang] 写给自己的WPF4.5 笔记15[AyArc诞生-WPF版本绚丽的环状图,Ay制作,AyWindow强势预览]
原文:[Aaronyang] 写给自己的WPF4.5 笔记15[AyArc诞生-WPF版本绚丽的环状图,Ay制作,AyWindow强势预览] 我的文章一定要做到对读者负责,否则就是失败的文章 -- ...
- SQL反模式学习笔记15 分组
目标:查询得到每组的max(或者min等其他聚合函数)值,并且得到这个行的其他字段 反模式:引用非分组列 单值规则:跟在Select之后的选择列表中的每一列,对于每个分组来说都必须返回且仅返回一直值. ...
- JAVA自学笔记15
JAVA自学笔记15 @例题1:共有5个学生,请把五个学生的信息存储到数组中,并遍历数组,并获取每个学生的信息 Students[] students=new Student[5]; Student ...
- 并发编程学习笔记(15)----Executor框架的使用
Executor执行已提交的 Runnable 任务的对象.此接口提供一种将任务提交与每个任务将如何运行的机制(包括线程使用的细节.调度等)分离开来的方法.通常使用 Executor 而不是显式地创建 ...
- js课程 1-5 js如何测试变量的数据类型
js课程 1-5 js如何测试变量的数据类型 一.总结 一句话总结:用typeof()方法. 1.js如何判断变量的数据类型? 用typeof()方法. 13 v=10; 14 15 if(typeo ...
- Data Visualization and D3.js 笔记(1)
课程地址: https://classroom.udacity.com/courses/ud507 什么是数据可视化? 高效传达一个故事/概念,探索数据的pattern 通过颜色.尺寸.形式在视觉上表 ...
随机推荐
- [CSS属性设置,盒子模型,网页布局]
[CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...
- shell中的 “.”和source export
在shell脚本里面export的环境变量,在set里面竟然看不到.为什么在shell脚本里面用export设置环境变量之后,当shell执行完了,用set命令看不到呢?但是你如果直接在终端里expo ...
- [Linux] Shell 脚本实例(超实用)
文件操作 为文件(test.sh)增加执行权限 chmod +x test.sh 列出当前文件夹下所有文件(每行输出一个) 1 #!/bin/bash 2 dir=`ls ./` 3 for i in ...
- [设计模式] 读懂UML图
类之间关系(由强到弱) realize(继承):三角+实线(指向类),继承类(SUV是一种汽车) generalization(实现):三角+虚线(指向接口),实现接口(汽车是一种车) composi ...
- [刷题] 203 Remove Linked List Elements
要求 在链表中删除值为val的所有节点 示例 如 1->2->3->4->5->6->NULL,要求删除值为6的节点 返回1->2->3->4-& ...
- Unix下 压缩和解压缩命令
范例: .tar 解包:tar -xvf FileName.tar 打包:tar -cvf FileName.tar DirName (注:tar是打包,不是压缩!) ---------------- ...
- python从hello world开始(3)
"""# !usr/bin/env python# -*- coding:utf-8 _*-""""""@Au ...
- Python基础之变量、输入、输出
一.Hello World程序 在Windows终端执行python C:\Users\renyz02>python Python 3.7.3 (v3.7.3:ef4ec6ed12, Mar 2 ...
- STM32 KEIL 下的 printf 函数
1 //加入以下代码,支持printf函数,而不需要选择use MicroLIB 2 #if 1 3 #pragma import(__use_no_semihosting) 4 //标准库需要的支持 ...
- ExpressionHelp2
public static class ExpressionHelp { private static Expression<T> Combine<T>(this Expres ...