JS笔记—03(DOM编程)
1. 动态体现:HTML代码加载到浏览器,代码运行后改变文档(DOM树)增删改查节点。
例如:ajax(不是新技术,是几个技术的合体js+http后台操作)就是这样的原理
2.js对象(浏览器对象、脚本对象、HTML对象)
3.添加文本方法
a.第一种创建文本节点
创建元素节点:createElement()
创建文本节点:createTextNode():也可以加空格用
添加节点用appendChild();
得值用:innerHTML
b.第二种直接赋值
innerHTML="":直接赋值
得值用:NodeValue
4.给元素对象设置属性
a.第一种方法
object.属性=""
b.第二种方法
setAttribute("属性", "值");
5.设置链接属性
.href="#";
.onclick = function() {}
this.代表当前对象,parentNode:父节点
6.加空格
opra.innerHTML="<a href="#" onclick='upda(this)'>更新</a>  <a href
= "#" onclick='dela(this)'>删除</a>
7.元素a.innerHTML会重写元素标记内容(覆盖)
要显示则用a.innerHTML+="html代码";
8.三大重点元素:document. element. node
9最后一个省市联动:IE和火狐不兼容,建议使用document.createElement();方法,
而不使用new Option();因为代码会冗余。
二、代码中遇到的问题:
第一个例子:给节点赋值时,底层用文本节点:var txtNode = createTextNode()
也可以:父节点.innerHTML直接赋值
从节点取值时,用innerHTML直接取值,
也可以:txtNode.nodeValue直接取值;
第二个例子:ul列表输出 nodeType.nodeName.nodeValue
特注:++++++老师说当nodeType=1时是类型,=2时是名字,=3时是值++++。
a. 可以用for(var i = 0;i < arr.length; i++)循环
b. 也可以用for(x in arr) {
if(x >= 0) {
arr[x].nodeType
}
}
第三个例子:给div标签里添加超链接
注意使用innerHTML直接给div赋值时会发生超链接标签覆盖HTML内容的问题
解决方法:mydiv.innerHTML += "超链接代码";
有三个方法加<a href>:
a.innerHTML直接赋值div标签
b.创建a标签,设置属性,设置内容,再依次添加div标签
c.创建a标签,创建文本节点,设置属性,再依次添加
标注:++++++老师说的是用appendChild():必须加的是对象而不是文本++++。
details:详情
estimate/evaluate:评价
第四个例子:变幻面板:点击链接,改变下边的面板的内容(用div来操控)
div属性:style = "display:none/block"
none:不显示div内容
block:显示div的
注+++如果是超链接,则不能用window.onload = function() {}
因为按钮是只点击一次,而超链接要多次变幻。
第五个例子:省市联动
<select>标签事件onchange():事件会在域的内容改变时发生。
清空列表:length = 1;(只有一个请选择)
JS笔记—03(DOM编程)的更多相关文章
- 高性能JS笔记3——DOM编程
一.访问与修改DOM DOM和JS 相当于两个岛屿,访问操作的次数越多,要交的过路费越多,对性能产生很大影响. 减少访问DOM的次数,把运算尽量留在JS端操作. 二.innerHTML 对比 DOM ...
- 读JS高性能总结——DOM编程(一)
DOM是一个与语言无关的API,它在浏览器中的借口却是用JS来实现的. 浏览器通常会把DOM和JS独立实现. 在IE中,JS的实现名是JScript,位于jscript.dll文件中,DOM实现则是m ...
- 前端开发工程师 - 03.DOM编程艺术 - 第1章.基础篇(下)
第1章.基础篇(下) Abstract: 数据通信.数据存储.动画.音频与视频.canvas.BOM.表单操作.列表操作 数据通信(HTTP协议) HTTP事务: 客户端向服务器端发送HTTP请求报文 ...
- 前端开发工程师 - 03.DOM编程艺术 - 第1章.基础篇(上)
第1章.基础篇(上) Abstract:文档树.节点操作.属性操作.样式操作.事件 DOM (Document Object Model) - 文档对象模型 以对象的方式来表示对应的html,它有一系 ...
- JS性能优化——DOM编程
浏览器中的DOM 天生就慢 DOM是个与语言无关的API,它在浏览器中的接口却是用JavaScript实现的.客户端脚本编程大多数时候是在个底层文档打交道,DOM就成为现在JavaScript编码中 ...
- [js笔记整理]DOM 篇
一.节点类型 1.元素节点:HTML元素 2.文本节点:元素标签中的内容 3.属性节点:元素的属性 (检测节点类型:node.nodeType //元素=1,属性=2,文本=3) 二.使用DOM获取元 ...
- 前端开发工程师 - 03.DOM编程艺术 - 期末考试
期末考试客观题 返回 倒计时: 01:24 1 单选(2分) 以下选项中不是节点类型的是 A. COMMENT_NODE B. DOCUMENT_NODE C. BODY_NODE D. E ...
- JS笔记03
JS图片库 标记 需求效果: 网页中的图片链接显示在网页中的图片框内部而不是打开新的页面 //html部分 <!DOCTYPE html> <html> <head> ...
- Node.js 笔记03
一.buffer(缓存区) Node里面的buffer,是一个二进制数据容器,数据结构类似与数组,专门用于Node中数据的存放 1. buffer的基本使用 历史上的使用方式:const buf1 ...
随机推荐
- SAP 从数据库中查询数据,带有where 条件。
数据库表 代码 *& Report ZSELECT_DATA_FROM_ZMAST_CUST *&------------------------------------------- ...
- 71A
#include <iostream> #include <string> using namespace std; int main() { string word; int ...
- (转)区块链共识机制分析——论PoW,PoS,DPos和DAG的优缺点
近期,随着区块链技术在社区中的声音越来越大,业界已经开始从技术角度对区块链进行全方位的解读.作为第一批区块链技术的实现,传统比特币与以太坊在共识机制.存储机制.智能合约机制.跨链通讯机制等领域并没有非 ...
- js并归排序的思路
并归排序,就是分而治之,将长的数组分解为短的数组,一直分到最后,单个单个数组,我们就认为,只有一个元素的数组是有序的.然后再逐个的合并 1.拆分: 很容易 例如数组 [ 2,4,3,5,1,6,8, ...
- MSSqlServer 主从同步复制原理(发布/订阅)
基本模型 1.发布类型: 快照发布:用于为事务复制和合并复制提供初始数据集:在适合数据完全刷新时也可以使用快照复制.利用这三种复制,SQL Server 提供功能强大且灵活的系统,以便使企业范围内的数 ...
- iOS 聊天表情键盘
具体思路 通过UIKeyboardWillChangeFrameNotification通知,监听键盘的改变,同时可以得到键盘的Frame和动画的持续时间, 新建键盘顶部工具条YSComposeToo ...
- android studio 编译sdk版降低报错解决方法
解决办法如下: 步骤1:在gradle中修改 compile sdk 版本,比如 8. 步骤2:在gradle中删除v7包的依赖 步骤3:在manifest中修改theme,supportsRtl.t ...
- cocos2d 利用cocosStudio制作合图(plist与png)
- MACD各分时背离所对应的时间
MACD各分时背离所对应的时间 5分钟背离结构——2小时. 15分钟背离结构——一天半(6小时). 30分钟背离结构——3天(12小时). ...
- Unity shader学习之阴影,衰减统一处理
使用unity AutoLight.cginc文件里的内置函数 UNITY_LIGHT_ATTENUATION shader如下: // Upgrade NOTE: replaced 'mul(UNI ...