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>&nbsp <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编程)的更多相关文章

  1. 高性能JS笔记3——DOM编程

    一.访问与修改DOM DOM和JS 相当于两个岛屿,访问操作的次数越多,要交的过路费越多,对性能产生很大影响. 减少访问DOM的次数,把运算尽量留在JS端操作. 二.innerHTML 对比 DOM ...

  2. 读JS高性能总结——DOM编程(一)

    DOM是一个与语言无关的API,它在浏览器中的借口却是用JS来实现的. 浏览器通常会把DOM和JS独立实现. 在IE中,JS的实现名是JScript,位于jscript.dll文件中,DOM实现则是m ...

  3. 前端开发工程师 - 03.DOM编程艺术 - 第1章.基础篇(下)

    第1章.基础篇(下) Abstract: 数据通信.数据存储.动画.音频与视频.canvas.BOM.表单操作.列表操作 数据通信(HTTP协议) HTTP事务: 客户端向服务器端发送HTTP请求报文 ...

  4. 前端开发工程师 - 03.DOM编程艺术 - 第1章.基础篇(上)

    第1章.基础篇(上) Abstract:文档树.节点操作.属性操作.样式操作.事件 DOM (Document Object Model) - 文档对象模型 以对象的方式来表示对应的html,它有一系 ...

  5. JS性能优化——DOM编程

    浏览器中的DOM  天生就慢 DOM是个与语言无关的API,它在浏览器中的接口却是用JavaScript实现的.客户端脚本编程大多数时候是在个底层文档打交道,DOM就成为现在JavaScript编码中 ...

  6. [js笔记整理]DOM 篇

    一.节点类型 1.元素节点:HTML元素 2.文本节点:元素标签中的内容 3.属性节点:元素的属性 (检测节点类型:node.nodeType //元素=1,属性=2,文本=3) 二.使用DOM获取元 ...

  7. 前端开发工程师 - 03.DOM编程艺术 - 期末考试

    期末考试客观题 返回    倒计时: 01:24 1 单选(2分) 以下选项中不是节点类型的是 A. COMMENT_NODE B. DOCUMENT_NODE C. BODY_NODE D. E ...

  8. JS笔记03

    JS图片库 标记 需求效果: 网页中的图片链接显示在网页中的图片框内部而不是打开新的页面 //html部分 <!DOCTYPE html> <html> <head> ...

  9. Node.js 笔记03

    一.buffer(缓存区) Node里面的buffer,是一个二进制数据容器,数据结构类似与数组,专门用于Node中数据的存放 ​ 1. buffer的基本使用 历史上的使用方式:const buf1 ...

随机推荐

  1. C语言编程练习

    1.编程序实现求1-1000之间的所有奇数的和并输出. 解法1: int sum=0; for(int i=1;i<=1000;i++){ sum+=i%2?i:0; } printf(&quo ...

  2. spark on yarn任务提交缓慢解决

    1.为什么要让运行时Jar可以从yarn端访问spark2以后,原有lib目录下的大JAR包被分散成多个小JAR包,原来的spark-assembly-*.jar已经不存在 每一次我们运行的时候,如果 ...

  3. 远程访问对象java实现

    服务端: 定义远程接口: package com.my.rmi; import java.rmi.Remote; import java.rmi.RemoteException; public int ...

  4. Angular1和Aangular4剖析

    字面解析: 1.Angular1又名angularJs,从angular2,angular4都不带JS 2.变化:angular2跳转到angular4 架构: 1.angular1是基于MVC 2. ...

  5. JMeter登录总是提示用户名不能为空的解决

    已传入参数了呀,还是提示用户名不能为空 解决: 将url拼接上参数 --

  6. node微信公众号开发---自动回复

    微信开发的特点:1.post请求 (一定要注意,这里和配置域名的时候不一样,配置域名是get请求)2.数据包是xml格式的3.你给微信返回的数据也是xml格式的 var parseString = r ...

  7. Maven - “Could not calculate build plan”问题

    解决方法如下: 1.将C:\User\.m2\repository\org\apache\maven\plugins\maven-deploy-plugin目录下的文件夹删除. 2.然后右击项目Mav ...

  8. Hadoop2.6的DataNode启动不了

    2016-05-04 18:14:51,990 INFO org.apache.hadoop.ipc.Server: IPC Server Responder: starting 2016-05-04 ...

  9. Boost学习-Linuxidc上的很好的学习资料

    来自 http://www.linuxidc.com/Linux/2011-07/39215.htm,拷贝第一页如下 Boost学习系列 简介及基本用法 [日期:2011-07-25] 来源:Linu ...

  10. python中参数传递之位置传递、关键字传递、包裹传递与解包裹

    原文地址https://blog.csdn.net/love666666shen/article/details/77131487 1.位置与关键字传递 (1)位置传递:先用形式参数定义,然后在调用时 ...