复习
//点击按钮,将输入框的值添加到ul
~~~
<input type="text" id="txt"><button id="btn">btn</button>
<ul id="parent">
</ul>
<script>
var parent = document.getElementById("parent");
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
btn.onclick = function(){
let value = txt.value;
let li = document.createElement("li");
li.innerHTML = value;
parent.appendChild(li);
}
</script>
~~~
# 拓展DOM
### 1.父节点parentNode(亲爹)
- parentElement
~~~
<div>
<p id="child">hello world</p>
</div>
<script>
let child = document.getElementById("child");
console.log(child.parentNode)
</script>
~~~
例子
~~~
<li>苹果<a href="#">删除</a></li>
<li>小米<a href="#">删除</a></li>
<li>华为<a href="#">删除</a></li>
<script>
var childs = document.getElementsByTagName("a");
for(let i =0;i<childs.length;i++){
childs[i].onclick = function(){
this.parentNode.style.display = "none";
return false;
}
}
</script>
~~~
### 2.子节点childNodes和children的区别
~~~
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var childs = document.getElementsByTagName("ul")[0].childNodes;
console.log(childs.length)
//输出7,将空格也算作节点
</script>
~~~
- childNodes是获取所有类型的子节点
- children只会获取元素节点
eg:将子节点的背景色变为粉色
~~~
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var childs = document.getElementsByTagName("ul")[0].childNodes;
for(let i=0;i<childs.length;i++){
if(childs[i].nodeType == 1){
childs[i].style.color = "red";
}
}
</script>
~~~
- firstChild //包含所有类型的节点
- firstElementChild //IE9以下不兼容
- lastChild //所有类型的节点
- lastElementChild //IE9以下不支持
兼容问题的解决
//firstElementChild在ie9以上是一个对象，9以下undefined
~~~
<ul id="parent">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var parent = document.getElementById("parent");
var first = parent.firstElementChild;
if(first){
first.style.color = "red";
}else{
parent.firstChild.style.color="green"
}
</script>
~~~
### 3.兄弟节点
nextSibling
nextElementSibling //IE9以下不支持
previousSibling
previousElementSibling //IE9以下不支持
### 4.
offsetParent //获取给了定位元素的父级
offsetLeft //返回元素的相对[定位父元素]()水平偏移位置。 返回number
offsetTop //返回元素的相对[定位父元素]()水平垂直偏移位置。
offsetWidth //返回元素的宽度 -- 包含[width,padding,border]()
offsetHeight //返回元素的高度
~~~
//获取元素距离顶部的距离
function getTop(element){
var realTop = element.offsetTop;
var parent = element.offsetParent;
while(parent !==null){
realTop+=parent.offsetTop;
parent = parent.offsetParent;
}
return realTop;
}
~~~
~~~
//jquery的实现
$(element).offset().top;
~~~
### 5.操作元素的属性
~~~
oDiv.style.display = "none";
oDiv.style["display"]="none";
oDiv.setAttribute("style","display:none");
~~~
~~~
<input type="text" id="txt">
<button id="btn">btn</button>
<script>
var btn = document.getElementById("btn");
var txt = document.getElementById("txt");
btn.onclick = function(){
// txt.value = "hello world"
txt.setAttribute("value","hello world")
}
</script>
~~~
获取,设置,删除
getAttribute(AttrName);
setAttribute(AttrName,AttrValue);
removeAttribute(AttrName);
demo:动态给div添加title属性
~~~
<div id="test">hello world</div>
<script>
let test = document.getElementById("test");
test.onclick = function(){
test.setAttribute("title","setAttr")
}
</script>
~~~
### 6.浏览器窗口可视区域的大小
一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：
~~~
• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度
~~~
二、对于 Internet Explorer 8、7、6、5：
~~~
• document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。
• document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。
~~~
//没有DOCTYPE的IE中,浏览器显示窗口可以通过以下获取
Document对象的body属性对应HTML文档的<body>标签
~~~
• document.body.clientHeight
• document.body.clientWidth
~~~
~~~
// 获取可视区域的width
var vw = document.body.clientWidth || document.documentElement.clientWidth;
//设备的宽度
var dw = window.screen.availWidth;
console.log(vw);
~~~
### 7获取网页内容的宽高
~~~
document.documentElement.scrollHeight
document.documentElement.scrollWidth
~~~
### 8文档碎片
- 文档碎片可以提高DOM操作性能
- document.createDocumentFragment()
- 原理:将dom暂存在fragment上，之后一次性添加到dom
<ul id="parent">
</ul>
<script>
var parent = document.getElementById("parent");
var oFrag = document.createDocumentFragment();
for(var i=0;i<10;i++){
var li = document.createElement("li");
oFrag.appendChild(li);
}
parent.appendChild(oFrag);
</script>
### 9表格应用
- 获取
tBodies,tHead,rows,cells
- 隔行变色
- 添加
~~~
//css
table,th,td{
border:1px solid #333;
width:500px;
line-height:50px;
text-align: center;
}
table{
border-collapse: collapse;
}
//html
<table>
<thead>
<tr><th>商城</th><th>手机</th></tr>
</thead>
<tbody>
<tr>
<td>天猫</td><td>小米</td>
</tr>
<tr>
<td>天猫</td><td>小米</td>
</tr>
<tr>
<td>天猫</td><td>小米</td>
</tr>
<tr>
<td>天猫</td><td>小米</td>
</tr>
<tr>
<td>天猫</td><td>小米</td>
</tr>
</tbody>
</table>
~~~
~~~
//JS
<script>
let table = document.getElementById("table");
let tHead = table.tHead;
let tRows = table.tBodies[0].rows;
tHead.style.backgroundColor = "#ff2d51";
for(let i=0;i<tRows.length;i++){
if(i%2 ==0 ){
tRows[i].style.backgroundColor = "#eee";
}else{
tRows[i].style.backgroundColor = "#44cef6"
}
}
</script>
~~~
动态添加表格
~~~
<h4>动态添加表格</h4>
<div>
<input type="text" id="shop">
<input type="text" id="cellPhone">
<button id="add">add</button>
</div>
<table id="table">
<thead>
<tr><th>商城</th><th>手机</th></tr>
</thead>
<tbody>
<tr>
<td>天猫</td><td>小米</td>
</tr>
</tbody>
</table>
<script>
let table = document.getElementById("table");
let tHead = table.tHead;
let tBody = table.tBodies[0];
let shop = document.getElementById("shop");
let cellPhone = document.getElementById("cellPhone");
let add = document.getElementById("add");
add.onclick = function(){
let tr = document.createElement("tr");
let td1 = document.createElement("td");
td1.innerHTML = shop.value;
tr.appendChild(td1);
let td2 = document.createElement("td");
td2.innerHTML = cellPhone.value;
tr.appendChild(td2);
tBody.appendChild(tr);
}
</script>
~~~
- JS入门教程
- 第1章 JS基本语法
- 练习
- 1.1 补充教程
- 第一节 拓展
- 第2章 控制语句DOM,BOM,事件
- 第一节 错误机制
- 第二节 拓展
- 第三节 事件
- 1-1 事件流
- 1-2 事件处理程序
- 1-2-1 事件获取form-input的值
- 1-2-2DOM0 级事件处理程序
- 1-2-3 DOM2级事件处理程序
- 第四节 if-else
- 第3章 DOM拓展
- 第一节 DOM
- 1.1 补充
- 第二节 DOM02
- 第三节 总结
- 1.节点层次
- 第4章 函数
- 第一节 函数就是值
- 第二节 函数的参数
- 第三节 对象的方法
- 第四节 改变this
- 第5章 数组
- 第一节 数组的方法
- 1.1 创建数数组
- 1.2增删改查的方法
- 1.3数组检查
- 1.4二维数组
- 1.5获取数组中最大的值
- 第二节 数组拓展
- 1.1数组constructor 属性
- 1.2prototype属性
- 1.3获取数组中最大值的方法
- 1.4补充展开语法
- 1.5from对数组迭代
- 1.6遍历
- 1.7 数组下标集合,值的下标
- 第三节 拓展
- 第四节 瀑布流代码实现
- 第6章 基本类型和引用类型的区别
- 第7章 字符串
- 第8章 JS内置对象
- 第9章 动画
- 第10章 正则
- 第一节 创建正则表达式
- 第二节 string中支持正则的api
- 第三节 正则对象的属性
- 拓展学习资料
- 第四节 语法
- 第五节 例子
- 5-1 获取一串字符串中的数字
- 第11章 ajax
- 第一节 原生ajax
- 第二节 http,get,post
- 第三节 跨域
- 3-1 http-server跨域
- 3-2 koa-跨域
- 第四节 jquery-ajax
- 4-1 $.ajax
- 第五节 axios
- 第12章 面向对象
- 第一节 原型
- 第二节 原型链,继承
- 第三节 多态
- 第四节 ajax-http
- 4-1 静态方法http
- 第13章 cookie,LocalStorage,sessionStorage
- 13-1
- 第14章 erros
- 第15章 koa-router
- 第16章 模板化
- JS拓展教程
- 第一章 JS基础
- 第三章 高级语法
- 2-1 闭包
- JS工具
- 第一章 百度地图
- js框架
- mock.js
- JS特效
- 1.简书点击div,滚动到顶部
- 2.jquery 点击a缓慢跳转到对应ID
- 3.获取滚动条距离顶部的高度
- 第二阶段项目
- 2-1.豆瓣数据到mongDB