回顾：
1、值类型与引用类型的特征 a) 值类型与引用类型的赋值（赋给另一个）：值类型两个数据，引用类型两个变量一个数据 b) 内存结构（画图） c) 参数传递：值类型：函数内外两不同，引用类型函数内外：变量不同，同对象 2、深拷贝浅拷贝 a) Var o = p{}；//不叫拷贝；var o[k] = p [ k ];对象内的对象怎么对待，是否完全独立 b) 实现：o[k] = { } ； o[k][key] = p[k][key] c) 让每一个对象都提供一个deepCopy的方法 d) 注意：1、什么是深浅拷贝2、代码实现的方式 3、对象的动态特性 a) 如果对象想要属性，就加上即可 b) 如果对象想要方法，就加上即可 c) 如果对象想移除方法或属性，delete即可 d) Var o = {};//不叫赋值，赋值方式：点语句赋值，关联数组 4、构造函数的执行过程 a) 按照构造方法的执行过程一一说明其步骤 5、异常处理 a) 什么是异常：程序运行过程中出现的错误 b) 分类：1、运行环境的多样性 2、语句错误 c) 处理办法try-catch-finally d) 如何抛出：throw + 对象（比如别人没有给你正确的返回，这是可以用抛出） 6、DOM操作 a) 绘制DOM树childNodes，attributes b) 从一个中心节点访问其所有的直系亲属元素
访问父节点：parentNode 访问上一个兄弟节点：previousSibling 访问下一个兄弟节点：nextSibling 访问第一个属性节点：attributes[1]
访问最后一个子节点：lastChild 或 childNodes[childNodes.length-1]
补充：
构造函数的执行过程
1、new 创建对象，然后传递给构造函数的this
2、在构造函数内部使用对象的动态特性为对象添加成员
#DOM操作
访问树关系（节点）
方法与功能
核心内容就是利用 增删查改
查询（获取元素）
1、标准DOM API
a) document.getElementById
b) Doucment.getElementsByTagName
c) Document.getElementsByName
d) Document.getElementsByClassName
e) Document.querySelectorAll
2、亲属访问
a) 增加
创建
Document.createElement 创建元素节点
Docement.createTextNode 创建文本节
b) 加入
appendChild 追加到结尾处
innerHTML
insertBefort 将元素查到某一元素的前面
（父元素insertBefore（新元素，旧元素））//将新元素插到旧元素前面
c）其他
Style 的操作
setAttribute（属性名，属性值）
3、属性获取
a) getAttribute //获取属性的值
b) getAttributeNode//获取属性节点
删除
1、删除元素
removeChild（）
removeAttributeNode
修改
修改节点（删除节点在加入）
修改样式
Style.Xxx = vvv
setAttribute
修改文本
innerHTML
innerText
节点操作
nodeValue
修改属性
.Xxx=vvv
setAttribute代码实践
常见的结点属性
//nodeValue节点的值， 所有节点都有一般文本节点才使用 //var txt = document.body.lastChild.nodeValue //alert("|" + txt + "|"); //将body中的文本修改为：‘我是唯一的文本’ // var e = document.body.lastChild.nodeValue = "我是唯一的文本"; // alert(e); //nodeName 表示节点的名字，虽然所有的节点都有属性，但是一般节点属性才使用 //元素节点打印的元素名均为大写字母 //alert(document.body.nodeName); // var div = document.createElement('div'); // alert(div.nodeName); //属性节点与文本节点使用该属性得到什么 //attributes //document.body.getAttributeNode('itcast'); //nodeType 节点类型 //1、元素节点 2、属性节点 3、文本节点 //alert( document.nodeType); //alert(document.createDocumentFragment().nodeType); var attr = document.body.getAttributeNode('itcast'); var body = document.body; var txt = document.body.lastChild; alert('属性' + attr.nodeType + ' ' + '标签' + body.nodeType +'/n' +'文本' + txt.nodeType ); 如何操作属性节点 //操作属性节点就是属性的增删改查 var div = document.querySelectorAll('#dv')[0];//选择目标节点，返回数组 //使用setAttribute 添加属性 //添加自定义，非标准属性 div.setAttribute('itcast','汆水开后加啊'); //使用。xxx = vvv 添加属性 //添加的标准属性 （HTML-DOM） div.className = 'v'; //第三种（了解即可）使用DOM节点方法 var attr = document.createAttribute('text'); attr.nodeValue = 'text'; div.setAttributeNode(attr); //删除 1 var ck = document.querySelectorAll('#ck')[0]; ck.removeAttribute('checked'); 2 var attr = ck.getAttributeNode('checked'); ck.removeAttributeNode(attr); 3一定使用true 或 false效率高 var ck = document.querySelectorAll('#ck')[0]; ck.checked = false;
节点操作
注意点：节点操作时报错 Uncaught TypeError: Cannot read property 'appendChild' of null 。
查找原因最终发现是由于获取不到插入的节点，js从上往下加载页面，获取节点时，节点还没加载。因此，js写在head里面，取body里面的某一节点，这时候是取不到的。解决方法是把js代码放到</body>后面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body >
你好我是一个文本节点
<div id="dv"></div>
</body>
<script >
// 需求，创建一个4*3 的一个表格table
// function c(tagName) {
// return document.createElement(tagName);
// }
// var table1 = c('table');
// var tbody = c('tbody');
// table1.appendChild( tbody);
// for ( var i = 0;i<4; i++) {
// var tr = c('tr');
// for (var j =0; j<3;j++) {
// var td = c('td');
// //在td中放置文本
// var txt = document.createTextNode(' ');
// td.appendChild(txt);
// tr.appendChild(td);
// td.width =200;
// td.height = 50;
// }
// tbody.appendChild(tr);
// }
// table1.setAttribute('border','1');
// document.body.appendChild(table1);
</script>
</html>
面试题
1、js是什么语言
a) 基于对象：没有对象什么都做不了
b) 脚本语言：写出来解释执行。编译型：c、c++、java
c) 基于原型：和继承有关
2、出现undefined
a) 访问数组超出范围或对象不存在的成员
b) 定义变量为赋值
c) 函数没有返回值，或return后没有数据
3、对数组元素去重（*）
a) 利用一个新数组存数据
b) 遍历旧数组，然后在新数组中找是否已存在该数据
indexOf ！= -1
4、DOM操作
a) 先获取元素，设置或修改属性或子节点