//事件绑定方法:格式: 标签对象.on事件=function(){}
//绑定一个标签:
// var ele=document.getElementById('p1');
// ele.onclick=function () {
// console.log(this);
// this.style.color='green';
// };
//绑定多个标签;
// var eles_p=document .getElementsByTagName('p');
// for (var i=0;i<eles_p.length;i++){
// eles_p[i].onclick=function () {
// alert('123');
// }
// }
//触发事件标签:this
var eles_p=document.getElementsByTagName('p')
for (var i=0;i<eles_p.length;i++){
eles_p[i].onclick=function () {
console.log(this);
this.style.color='red';
}
}
######
var ele=document.getElementById('c1');
//取值操作
// console.log(ele.innerHTML);//<p>hello</p> ,标签和文本都可以得到
// console.log(ele.innerText);//hello不认标签,只认文本
//赋值操作
// ele.innerText='helllooooo';
// ele.innerHTML='ggggggg';
// ele.innerText='<a>heell</a>';//把a标签当做文本处理
ele.innerHTML='<a href="#">heell</a>';//把a标签当做标签本意处理
####
<style>
*{
margin:0;
padding:0;
}
.box{
width:100%;
height:400px;
background-color: wheat;
}
</style>
</head>
<body>
<div class="box">
<h4>增加节点</h4>
<!--以前插入图片是通过img标签插入,现在通过按钮动作来添加-->
</div>
<button>add</button>
<!--//增加标签-->
<button>remove</button>
<!--//删除标签-->
<button>replace</button>
<!--替换标签-->
<script>
var ele=document.getElementsByTagName('button')[0];
var ele_remove=document.getElementsByTagName('button')[1];
var ele_replace=document.getElementsByTagName('button')[2];
var ele_box=document.getElementsByClassName('box')[0];//创建父节点ele_box插入图片
ele.onclick=function () {
var ele_img=document.createElement('img');//创建img标签
ele_img.src='12.jpg';
//添加标签 appendchild : 只能通过父节点添加子节点
ele_box.appendChild(ele_img);//在box下添加子节点
}
//删除节点
ele_remove.onclick=function () {
var ele_h4=document.getElementsByTagName('h4')[0];//获取h4标签对象
//remove.child 父节点删除子节点
ele_box.removeChild(ele_h4);
}
//修改标签 replace ,替换
ele_replace.onclick=function () {
var ele_img=document.createElement('img');
ele_img.src='12.jpg';
var ele_h4=document.getElementsByTagName('h4')[0];
ele_box.replaceChild(ele_img,ele_h4)//在父节点里用ele_img替换掉ele_h4
}
</script>
<!--//查找节点方法:-->
<!--document.getElementById('idname')-->
<!--document.getElementByTagName('tagname')-->
<!--document.getElementByName('name')-->
<!--document.getElementByClassName('name')-->
<!--//导航节点属性-->
<!--parentElement//父元素标签-->
<!--children//所有子元素标签-->
<!--firstElementchild-->
<!--lastElementchild-->
<!--nextElementsibling//下一个兄弟标签-->
<!--previousElementsibling/上一个兄弟标签-->
=================
var eles_button=document.getElementsByTagName('button');//获取2个button按钮
//要绑定不同的事件
for (var i=0;i<eles_button.length;i++){
eles_button[i].onclick=function () {
if (this.innerText=='click'){
// 先获取2个标签的对象,通过父亲的兄弟,获取唯一的标签
var ele_shade=this.parentElement.nextElementSibling;
var ele_model=ele_shade.nextElementSibling;
//把隐藏的显示出来
ele_shade.classList.remove('hide');
ele_model.classList.remove('hide');
}else if (this.innerText=='submit'){
var ele_
}
else if (this.innerText=='cancel'){
//不写也可以
// else是指cancel标签
var ele_model2= this.parentElement; //this 是cancel标签
//获取到cancel的父标签
var ele_shade2=ele_model2.previousElementSibling;
ele_model2.classList.add('hide');
ele_shade2.classList.add('hide');
}
}
}
#菜单隐藏
*{
margin:0;
padding:0;
}
.outer{
width:100%;
height:auto;
}
.left-menu{
float: left;
width:20%;
height:500px;
background-color:gainsboro;
}
.right-content{
float:left;
width:80%;
height:500px;
background-color: grey;
}
.item{
height:auto;
margin-top: 10px;
text-align: center;
}
.title{
background-color: #ffcccc;
}
.active{
background-color: #336699;
}
.hide{
display:none;
}
</style>
</head>
<body>
<div class="outer">
<div class="left-menu">
<div class="item">
<div class="title active">菜单1 </div>
<ul class="con">
<li>11</li>
<li>11</li>
<li>11</li>
</ul>
</div>
<div class="item">
<div class="title">菜单2 </div>
<ul class="con hide">
<li>22</li>
<li>22</li>
<li>22</li>
</ul>
</div>
<div class="item">
<div class="title">菜单3</div>
<ul class="con hide">
<li>33</li>
<li>33</li>
<li>33</li>
</ul>
</div>
</div>
<div class="right-content"></div>
</div>
<script>
//查找标签
var eles_title=document.getElementsByClassName('title');//找到title标签
for (var i=0;i<eles_title.length;i++){
eles_title[i].onclick=function () {
//将菜单下的con显示出来
this.nextElementSibling.classList.remove('hide');//删除隐藏属性
//将其他菜单con隐藏
var ele_parent=this.parentElement;//找到父标签
var eles_children=ele_parent.parentElement.children;//父标签的子标签
for (var j=0;j<eles_children.length;j++){
if (eles_children[j]!=ele_parent){//判断点击标签是不是当前标签
eles_children[j].children[1].classList.add('hide');
}
}
}
}
</script>
<style>
*{
margin:0;
padding:0;
}
.box{
width:100%;
height:400px;
background-color: wheat;
}
</style>
</head>
<body>
<div class="box">
<h4>增加节点</h4>
<!--以前插入图片是通过img标签插入,现在通过按钮动作来添加-->
</div>
<button>add</button>
<!--//增加标签-->
<button>remove</button>
<!--//删除标签-->
<button>replace</button>
<!--替换标签-->
<script>
var ele=document.getElementsByTagName('button')[0];
var ele_remove=document.getElementsByTagName('button')[1];
var ele_replace=document.getElementsByTagName('button')[2];
var ele_box=document.getElementsByClassName('box')[0];//创建父节点ele_box插入图片
ele.onclick=function () {
var ele_img=document.createElement('img');//创建img标签
ele_img.src='12.jpg';
//添加标签 appendchild : 只能通过父节点添加子节点
ele_box.appendChild(ele_img);//在box下添加子节点
}
//删除节点
ele_remove.onclick=function () {
var ele_h4=document.getElementsByTagName('h4')[0];//获取h4标签对象
//remove.child 父节点删除子节点
ele_box.removeChild(ele_h4);
}
//修改标签 replace ,替换
ele_replace.onclick=function () {
var ele_img=document.createElement('img');
ele_img.src='12.jpg';
var ele_h4=document.getElementsByTagName('h4')[0];
ele_box.replaceChild(ele_img,ele_h4)//在父节点里用ele_img替换掉ele_h4
}
</script>
<!--//查找节点方法:-->
<!--document.getElementById('idname')-->
<!--document.getElementByTagName('tagname')-->
<!--document.getElementByName('name')-->
<!--document.getElementByClassName('name')-->
<!--//导航节点属性-->
<!--parentElement//父元素标签-->
<!--children//所有子元素标签-->
<!--firstElementchild-->
<!--lastElementchild-->
<!--nextElementsibling//下一个兄弟标签-->
<!--previousElementsibling/上一个兄弟标签-->