JavaScript-dom3 json_str dom元素控制 模拟百度搜索
访问关系-封装代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>访问关系封装</title>
<style>
li{
width: 100px;
height: 100px;
background-color: pink;
margin: 5px;
list-style: none;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li id="box"></li>
<li></li>
<li></li>
</ul>
<script src="tools.js"></script>
<script>
//获取box改为red
var box = getEle("box");
box.style.backgroundColor="red";
//获取第一个和最后一个子节点
var parent = box.parentNode;
getFirstNode(parent).style.backgroundColor="yellow";
getLastNode(parent).style.backgroundColor="yellow";
//获取上一个下一个兄弟节点
getNextNode(box).style.backgroundColor="blue";
getPrevNode(box).style.backgroundColor="blue";
//指定兄弟节点
getEleOfIndex(box,0).style.backgroundColor="green";
getEleOfIndex(box,1).style.backgroundColor="green";
//获取所有的兄弟节点
var arr = getAllSiblings(box);
for(var i=0;i<arr.length;i++){
arr[i].style.backgroundColor = "black";
}
// //父节点
// div.parentNode;
//
// //兄弟节点
// div.previousSibling;
// div.previousElementSibling;
// div.nextSibling;
// div.nextElementSibling;
//
// //单个子节点
// div.firstChild;
// div.firstElementChild;
// div.lastChild;
// div.lastElementChild;
//
// //所有子节点
// div.childNodes;
// div.children;
//
// //获取指定的兄弟节点
// div.parentNode.children[index];
//
// //获取所有的兄弟节点
// function fn(ele) {
// var newArr = [];
// var arr = ele.parentNode.children;
// for (var i = 0; i < arr.length; i++) {
// //如果不是ele元素本身，添加到新数组，老数组里面包含的ele
// if (ele !== arr[i]) {
// newArr.push(arr[i]);
// }
// }
// }
</script>
</body>
</html>
tool.js
function getEle(id) {
return document.getElementById(id)
}
/**
* 功能：给指定元素查找它的第一个元素子节点，并返回
* @param ele
* @returns {Element | (() => Node) | ActiveX.IXMLDOMNode | Node | SVGElementInstance}
*/
function getFirstNode(ele) {
var node = ele.firstElementChild || ele.firstChild;
return node;
}
/**
* 功能：给指定元素查找它的最后一个元素子节点，并返回
* @param ele
* @returns {Element | ActiveX.IXMLDOMNode | Node | SVGElementInstance | (() => Node)}
*/
function getLastNode(ele) {
return ele.lastElementChild || ele.lastChild;
}
/**
* 功能：给定元素查找他的下一个元素兄弟节点，并返回
* @param ele
* @returns {Element | null | Node | SVGElementInstance | ActiveX.IXMLDOMNode | (() => Node)}
*/
function getNextNode(ele) {
return ele.nextElementSibling || ele.nextSibling;
}
/**
* 功能：给定元素查找他的上一个元素兄弟节点，并返回
* @param ele
* @returns {Element | null | Node | SVGElementInstance | ActiveX.IXMLDOMNode | (() => Node)}
*/
function getPrevNode(ele) {
return ele.previousElementSibling || ele.previousSibling;
}
/**
* 功能：给定元素和索引值查找指定索引值的兄弟节点，并返回
* @param ele
* @param index
* @returns {Element}
*/
function getEleOfIndex(ele,index) {
return ele.parentNode.children[index];
}
/**
* 功能：给定元素查找它的所用兄弟元素，并返回数组
* @param ele
*/
function getAllSiblings(ele) {
var newArr = [];
var arr = ele.parentNode.children;
for (var i = 0; i < arr.length; i++) {
//如果不是ele元素本身，添加到新数组，老数组里面包含的ele
if (ele !== arr[i]) {
newArr.push(arr[i]);
}
}
return newArr;
}
style属性特点
1、样式少的时候使用
2、style是对象
3、值是字符串，没有设置值是""
4、命名规则，驼峰命名和css不一祥
5、设置了类样式不能获取（只和行内式交互，和内嵌式外链式无关）
6、box.style.cssText="字符串形式的样式"（可以赋值多个属性）
案例-文本焦点高亮显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本焦点高亮显示</title>
<style>
input {
display: block;
}
</style>
</head>
<body>
<ul>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<button>设置</button>
</ul>
<script>
var inpArr = document.getElementsByTagName("input");
var button = inpArr[inpArr.length - 1].nextElementSibling;
button.onclick = function () {
for (var i = 0; i < inpArr.length; i++) {
//当button被点击，所有input绑定事件onfocus
inpArr[i].onfocus = function () {
this.style.border = "2px solid red";
this.style.backgroundColor = "#ccc";
};
//绑定onblur事件，取消样式
inpArr[i].onblur = function () {
this.style.border = "";
this.style.backgroundColor = "";
}
}
}
</script>
</body>
</html>
案例-百度皮肤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度皮肤</title>
<style>
*{
padding: 0;
margin:0;
}
body{
background: url(image/3.png) no-repeat;
}
.box{
height: 200px;
padding-top: 30px;
text-align: center;
background: rgba(255,255,255,0.3);
}
img{
cursor: pointer;
margin: 0 10px;
}
</style>
</head>
<body>
<div class="box">
<img src="image/1.png" alt="" width="200px"/>
<img src="image/2.png" alt="" width="200px"/>
<img src="image/3.png" alt="" width="200px"/>
<img src="image/4.png" alt="" width="200px"/>
<img src="image/5.png" alt="" width="200px"/>
</div>
<script>
//点击图片修改背景图片
var box=document.getElementsByTagName("div")[0];
//body js内部已优化
var body=document.body;
var imgArr=box.children;
for(var i=0;i<imgArr.length;i++){
imgArr[i].index=i;
imgArr[i].onclick = function () {
// body.style.backgroundImage = "url(image/"+(this.index+1)+".png)"
// body.style.background = "url(image/"+(this.index+1)+".png) no-repeat "
//url("http://localhost:63343/dom3/image/2.png")
body.style.backgroundImage = "url("+this.src+")";
}
}
</script>
</body>
</html>
dom元素的创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom元素的创建</title>
</head>
<body>
<button>创建</button>
<ul>
aaa
</ul>
<script>
//1、 document.write创建；会覆盖原来内容
document.write("<li>我是document.write创建的</li>");
var btn=document.getElementsByTagName("button")[0];
var ul=document.getElementsByTagName("ul")[0];
// btn.onclick = function () {
// document.write("<li>我是document.write创建的</li>");
// }
//2、直接利用元素innerHTML方法。（innerText方法不识别标签,会覆盖原来内容用+=就行）
ul.innerHTML += "<li id='li1'>我是innerHTML创建的</li>"
//3、利用dom的api创建元素
var newli=document.createElement("li");
newli.innerHTML="我是createElement创建的";
//在赋元素的最后添加元素
// ul.appendChild(newli);
//指定位置添加(放在li1之前)
var li1=document.getElementById("li1");
ul.insertBefore(newli,li1)
</script>
</body>
</html>
dom元素的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的操作</title>
</head>
<body>
<ul>
<li id="li1">参照标签</li>
</ul>
<script>
// document.write()不常用容易覆盖原来的页面
// innerHTML;用的比较多，绑定属性和内容比较方便
//document.createElement；用的比较多，指定数量的时候一般用它
var ul=document.getElementsByTagName("ul")[0];
var li1=document.getElementById('li1');
//创建，添加()
var li2=document.createElement("li");
li2.innerText= "我是createElment创建的标签，用的是appendChild的方法";
ul.appendChild(li2);
var li3=document.createElement("li");
// li3.id="test";
li3.innerText= "我是createElment创建的标签，insertBefore添加";
//父节点.inserBefore(新节点，参照节点)
ul.insertBefore(li3,li1);
//删除，替换
ul.removeChild(li3);
// 父节点.replaceChild(newNode,oldNode)
// var li4=document.createElement("li");
// li4.innerText="test";
ul.replaceChild(li3,li2)
//克隆 cloneNode(true)，true是深层复制
for(var i=0;i<=3;i++){
var newLi = li3.cloneNode(true);
ul.appendChild(newLi);
}
</script>
</body>
</html>
案例-选择水果
1、简单版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择水果</title>
<style>
select{
width: 170px;
height: 200px;
font-size: 16px;
background-color: #a4ff43;
}
</style>
</head>
<body>
<select name="" id="sel1" size="10" multiple>
<option value="">香蕉</option>
<option value="">苹果</option>
<option value="">鸭梨</option>
<option value="">葡萄</option>
</select>
<input type="button" value=">>>"/>
<input type="button" value="<<<"/>
<input type="button" value=">"/>
<input type="button" value="<"/>
<select name="" id="sel2" size="10" multiple>
</select>
<script>
//点击>>>和<<<两个按钮
var sel1=document.getElementById("sel1");
var sel2=document.getElementById("sel2");
var inpArr=document.getElementsByTagName("input");
inpArr[0].onclick = function () {
//获取所有子元素，整体添加到另一个标签中
var arr = sel1.children;
for(var i=arr.length-1;i>=0;i--){
//放入select2，不能用push要用appendChild
sel2.appendChild(arr[0]);
}
//也可以在for循环外面定义一个变量
// var arrLen=arr.length-1;
// for(var i=0;i<=arrLen;i++){
// //放入select2，不能用push要用appendChild
// console.log(i);
// // console.log(i);
// sel2.appendChild(arr[0]);
// }
};
inpArr[1].onclick = function () {
//获取所有子元素，整体添加到另一个标签中
var arr = sel2.children;
for(var i=arr.length-1;i>=0;i--){
//放入select2，不能用push要用appendChild
sel1.appendChild(arr[0]);
}
};
//被选定的子元素跑到对面
// inpArr[2].onclick = function () {
// //获取所有子元素，整体添加到另一个标签中
// var arr = sel1.children;
// for(var i=arr.length-1;i>=0;i--){
// //放入select2，不能用push要用appendChild
// if(arr[i].selected === true){
// sel2.appendChild(arr[i]);
// }
// }
// };
inpArr[2].onclick = function () {
var arr=sel1.children;
//遍历判断数组中的元素selected属性为true，添加到相反的select标签中
for(var i=arr.length-1;i>=0;i--){
if(arr[i].selected === true){
sel2.appendChild(arr[i]);
}
}
};
inpArr[3].onclick = function () {
var arr=sel2.children;
//遍历判断数组中的元素selected属性为true，添加到相反的select标签中
for(var i=arr.length-1;i>=0;i--){
if(arr[i].selected === true){
sel1.appendChild(arr[i]);
}
}
}
</script>
</body>
</html>
2、封装版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择水果</title>
<style>
select{
width: 170px;
height: 200px;
font-size: 16px;
background-color: #a4ff43;
}
</style>
</head>
<body>
<select name="" id="sel1" size="10" multiple>
<option value="">香蕉</option>
<option value="">苹果</option>
<option value="">鸭梨</option>
<option value="">葡萄</option>
</select>
<input type="button" value=">>>"/>
<input type="button" value="<<<"/>
<input type="button" value=">"/>
<input type="button" value="<"/>
<select name="" id="sel2" size="10" multiple>
</select>
<script>
//点击>>>和<<<两个按钮
var sel1=document.getElementById("sel1");
var sel2=document.getElementById("sel2");
var inpArr=document.getElementsByTagName("input");
inpArr[0].onclick = function () {
fn1(sel1,sel2)
};
inpArr[1].onclick = function () {
fn1(sel2,sel1)
};
inpArr[2].onclick = function () {
fn2(sel1,sel2)
};
inpArr[3].onclick = function () {
fn2(sel2,sel1)
};
function fn1(ele1,ele2) {
//获取所有子元素，整体添加到另一个标签中
var arr = ele1.children;
for(var i=arr.length-1;i>=0;i--){
//放入select2，不能用push要用appendChild
ele2.appendChild(arr[0]);
}
}
function fn2(ele1,ele2) {
var arr=ele1.children;
//遍历判断数组中的元素selected属性为true，添加到相反的select标签中
for(var i=arr.length-1;i>=0;i--){
if(arr[i].selected === true){
ele2.appendChild(arr[i]);
}
}
};
</script>
</body>
</html>
案例-高级隔行变色json_str
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级隔行变色</title>
<style>
*{
padding: 0;
margin: 0;
text-align: center;
}
.wrap{
width: 500px;
margin: 100px auto 0;
}
table{
/*separate在分隔模式下，相邻的单元格都拥有独立的边框。collapse在合并模式下，相邻单元格共享边框。*/
border-collapse: collapse;
border-spacing:0;
border: 1px solid #c0c0c0;
width: 500px;
}
th,td{
/*border: 1px solid #d0d0d0;*/
color: #404060;
padding: 10px;
}
th{
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td{
font: 14px "微软雅黑";
}
tbody tr{
background-color: #f0f0f0;
cursor: pointer;
}
.current{
background-color: red!important;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>课程</th>
<th>成绩</th>
</tr>
</thead>
<tbody id="target">
</tbody>
</table>
</div>
<script>
var json_str = [
{"id":"1","name":"张三","kecheng":"英语","fenshu":"100"},
{"id":"2","name":"李四","kecheng":"英语","fenshu":"100"},
{"id":"3","name":"王二","kecheng":"英语","fenshu":"100"},
{"id":"4","name":"孙悟空","kecheng":"英语","fenshu":"100"},
{"id":"5","name":"金角大王","kecheng":"英语","fenshu":"100"},
{"id":"6","name":"金角大王","kecheng":"英语","fenshu":"100"},
{"id":"7","name":"金角大王","kecheng":"英语","fenshu":"100"},
{"id":"8","name":"金角大王","kecheng":"英语","fenshu":"100"},
{"id":"9","name":"金角大王","kecheng":"英语","fenshu":"100"},
];
var tbody=document.getElementById("target");
for(var i=0;i<json_str.length;i++){
console.log(json_str[i]);
tbody.innerHTML += "<tr>\n" +
"<td>"+json_str[i].id+"</td>\n" +
"<td>"+json_str[i].name+"</td>\n" +
"<td>"+json_str[i].kecheng+"</td>\n" +
"<td>"+json_str[i].fenshu+"</td>\n" +
"</tr>"
}
//通过document.createElement
// for(var i=0;i<json_str.length;i++){
// tr=document.createElement("tr");
// td1=document.createElement("td");
// td2=document.createElement("td");
// td3=document.createElement("td");
// td4=document.createElement("td");
// td1.innerText =json_str[i].id;
// td2.innerText =json_str[i].name;
// td3.innerText =json_str[i].kecheng;
// td4.innerText =json_str[i].fenshu;
// tbody.appendChild(tr);
// tr.appendChild(td1);
// tr.appendChild(td2);
// tr.appendChild(td3);
// tr.appendChild(td4);
// tbody.innerHTML += "<tr>\n" +
// "<td>"+json_str[i].id+"</td>\n" +
// "<td>"+json_str[i].name+"</td>\n" +
// "<td>"+json_str[i].kecheng+"</td>\n" +
// "<td>"+json_str[i].fenshu+"</td>\n" +
// "</tr>"
// }
// var tbody=document.getElementById("target");
var trArr=tbody.children;
//循环判断并隔行赋值背景色
for(var i=0;i<trArr.length;i++){
if(i%2!==0){
trArr[i].style.backgroundColor = "#a3a3a3";
}else{
trArr[i].style.backgroundColor = "#ccc";
}
//鼠标经过高亮显示
//难点，鼠标移开恢复原本颜色
//计数器(进入tr立刻记录颜色，移开使用记录好的颜色)
var color="";
trArr[i].onmouseover = function () {
//赋值颜色之前记录颜色
color=this.style.backgroundColor;
this.style.backgroundColor = "#fff";
};
trArr[i].onmouseout = function () {
this.style.backgroundColor = color;
}
}
</script>
</body>
</html>
案例-模拟百度搜索
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟百度搜索</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
margin: 200px auto;
}
ul{
width: 392px;
padding: 5px;
list-style: none;
border: 1px solid red;
}
li:hover{
background-color: red;
}
input{
width: 400px;
}
button{
width: 70px;
}
</style>
</head>
<body>
<div class="box">
<input type="text"/>
<button>搜索</button>
<!--<ul>-->
<!--<li>aaa</li>-->
<!--<li>bbb</li>-->
<!--<li>ccc</li>-->
<!--</ul>-->
<script>
//需求：输入内容(输入事件，键盘弹起事件)
var arr = ["a","ab","abc","abcd","baa","aab"];
var box = document.getElementsByTagName("div")[0];
var inp = box.children[0];
//绑定事件
inp.onkeyup = function () {
var newArr=[];
//创建一个字符串，里面添加满了li和对应的内容
//遍历老数组，那项是以input内容为开头的
for(var i=0;i<arr.length;i++){
//是否以input内容为开头的
var val=this.value;
if(arr[i].indexOf(val)===0){
newArr.push("<li>"+arr[i]+"</li>");
}
}
//把创建好的内容添加到ul
var str=newArr.join("");
// var aa = document.getElementsByTagName("ul")[0];
//1 如果ul存在，删除
if(box.children[2]){
//只要存在那么就是object类型
box.removeChild(box.children[2]);
}
//2 内容为空那么不能生成ul
//3 如果数组中没有input字符开头的元素，切断函数
//换个说法，newArr长度为0
if(this.value.length===0 || newArr.length === 0){
//切换函数
return;
}
var ul = document.createElement("ul");
ul.innerHTML = str;
box.appendChild(ul)
}
</script>
</div>
</body>
</html>
