<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<div class="c1"id="d1">click</div>
<div class="c1"id="d2">click</div>
<script>
var ele=document.getElementsByClassName('c1')[0];
//文本操作
// console.log(ele.innerHTML)//取值操作
//console.log(ele.innerText)//取值操作
// ele.innerText='frank'//赋值操作
// ele.innerHTML='<a href="" >click</a>'//html标签用innerHTML
//
//属性操作
// var ele=document.getElementsByClassName('c1')[0];
// ret=ele.id
// console.log(ret)
// console.log(ele.getAttribute('id'))
// ele.id='hha'
// console.log(ele)
//class属性
console.log(ele.className)
ele.classList.add('hide');//增加一个类名
ele.classList.remove("hide");//减少一个类名
</script>
</body>
1dom
- HTML Document Object Model（文档对象模型）
- HTML DOM 定义了访问和操作HTML文档的标准方法
- HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树
画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。
2节点
节点类型
HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的：
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
其中：document和element是重点。
节点之间的关系：
节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
下面的图片展示了节点树的一部分，以及节点之间的关系：
访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素。
节点查找：（方法一）
<div id="div1"> <div class="div2"> i am div2</div> <div name="frank"> i am div</div> <div id="div3"> i am div</div> <p > hello hgahglp</p> </div> <script> // var div1=document.getElementById('div1')//通过定位查找id标签 //var div2=document.getElementsByClassName('div2')//通过类名来查找 //var frank1=document.getElementsByName('frank')//通过名字来查找 //var p1=document.getElementsByTagName('p')//通过标签查找 // console.log(ele ) </script>
注意涉及到寻找元素，注意script标记的位置！
方法二：（导航节点属性）
parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
var ele=document.getElementsByClassName('div2')[0].nextElementSibling;//查找下一个
console.log(ele)
绑定事件的两种方式：
<body>
#绑定事件方法一
<div onclick="alert(123)">div</div>
<div onclick="foo(this)">div</div>//this 指的是自己直接绑定不推荐使用
<script>
function foo(self) { //self 指的是形式参数-->
var ele=document.getElementsByTagName('div')[0];
ele.style.color='green'//法一
console.log(self)
self.style.color='red'//法二
}
</script>
<div class="c1">DIV2</div>
// 事件绑定方式2: 标签对象.on事件=function(){}推荐使用
<script>
var ele=document.getElementsByClassName("c1")[0];
ele.onclick=function () {
console.log(this)
this.style.fontSize='30px'
}
</script>
//点击每一行会跳出每一行的内容
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li>444</li>
</ul>
<script>
var ele=document.getElementsByTagName('li')
for (var i=0;i<ele.length;i++){
ele[i].onclick=function () {
// this.style.color='red'
alert(this.innerText)
}
}
</script>
</body>
属性操作：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<div class="c1"id="d1">click</div>
<div class="c1"id="d2">click</div>
<script>
var ele=document.getElementsByClassName('c1')[0];
//文本操作
// console.log(ele.innerHTML)//取值操作
//console.log(ele.innerText)//取值操作
// ele.innerText='frank'//赋值操作
// ele.innerHTML='<a href="" >click</a>'//html标签用innerHTML
//
//属性操作
// var ele=document.getElementsByClassName('c1')[0];
// ret=ele.id
// console.log(ret)
// console.log(ele.getAttribute('id'))
// ele.id='hha'
// console.log(ele)
//class属性
console.log(ele.className)
ele.classList.add('hide');//增加一个类名
ele.classList.remove("hide");//减少一个类名
</script>
</body>
左侧表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px; padding:0px; } .left{ 20%; height: 600px; float: left; background-color: #2459a2; } .title{ 100%; height: 20px; border:1px solid red; text-align: center; } .title ul{ list-style: none; } .right{ 80%; height: 600px; float: left; background-color: #e4393c; } .hide{ display: none; } .item{padding:10px;} </style> </head> <body> <div class="outer"> <div class="left"> <div class="item"> <div class="title" >第一章</div> <ul class= "conn "> <li>111</li> <li>111</li> <li>111</li> <li>111</li> </ul></div> <div class="item"> <div class="title" >第一章</div> <ul class= "conn hide "> <li>111</li> <li>111</li> <li>111</li> <li>111</li> </ul></div> <div class="item"> <div class="title" >第一章</div> <ul class= "conn hide"> <li>111</li> <li>111</li> <li>111</li> <li>111</li> </ul></div> </div> <div class="right"></div> </div> <script> var ele=document.getElementsByClassName('title'); for (var i=0;i < ele.length;i++){ ele[i].onclick=function () { this.nextElementSibling.classList.remove('hide') for (var j=0;j<ele.length;j++){ if (ele[j]!==this){ ele[j].nextElementSibling.classList.add('hide') } } } } </script> </body> </html>