[TOC]
## 1.如何获取节点
~~~
getElementById() 返回对拥有指定 id 的第一个对象的引用
getElementsByTagName()返回带有指定标签名的对象集合。
getElementsByClassName()返回文档中所有指定类名的元素集合，作为 NodeList 对象。
querySelectorAll()HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
~~~
### 具体实例（选择框）1
~~~
<div>
<button id="all">选中所有的</button>
<button id="no">不选</button>
<button id="reverse">反选</button>
<h3>选择爱好</h3>
<input type="checkbox">足球
<input type="checkbox">篮球
<input type="checkbox">棒球
<input type="checkbox">橄榄球
</div>
<script>
var all = document.getElementById("all");
var no = document.getElementById("no");
var reverse = document.getElementById("reverse");
var checkbox =document.getElementsByTagName("input");
all.onclick = function(){
for (var i =0;i<checkbox.length;i++){
checkbox[i].checked=true;
}
}
no.onclick = function(){
for(var i=0;i<checkbox.length;i++){
checkbox[i].checked=false;
}
}
reverse.onclick = function(){
for(var i=0;i<checkbox.length;i++){
checkbox[i].checked=!checkbox[i].checked;
}
}
</script>
~~~
### 具体实例（点击切换）2
~~~
<img src="images/placeholder.png" alt="" id="show">
<button id="modern">现代</button>
<button id="old">古代</button>
<script>
var img = document.getElementById("show");
var modern = document.getElementById("modern");
var old = document.getElementById("old");
modern.onclick=function(){
img.src="images/现代.png";
}
old.onclick=function(){
img.src="images/古典.png";
}
</script>
~~~
### 具体实例（JS版下拉菜单）3
~~~
<style>
ul {
list-style: none;
float: right;
margin-right: 100px;
}
ul>li {
float: left;
margin-left: 15px;
}
a {
color: black;
display: block;
}
a:hover {
color: blue;
}
.none {
display: none;
}
.show {
display: block;
}
#parent {
position: absolute;
right: 90px;
}
.box::after {
position: relative;
content: "";
border: 7px solid transparent;
border-top-color: black;
right: -4px;
top: 16px;
}
</style>
~~~
~~~
<body>
<ul>
<li>
<a href="#">新闻</a>
</li>
<li>
<a href="#">hao123</a>
</li>
<li>
<a href="#">地图</a>
</li>
<li>
<a href="#">视频</a>
</li>
<li>
<a href="#">贴吧</a>
</li>
<li>
<a href="#">学术</a>
</li>
<li>
<a href="#">登录</a>
</li>
<li id="toggle">
<a href="#" class="box">设置</a>
<div class="none" id="parent">
<a href="#">搜索设置</a>
<a href="#">高级搜索</a>
<a href="#">关闭预测</a>
<a href="#">隐私设置</a>
</div>
</li>
</ul>
<script>
var toggle = document.getElementById("toggle");
var parent = document.getElementById("parent");
toggle.onclick = () => {
if (parent.className == "none") {
parent.className = "show"
} else {
parent.className = "none"
}
}
</script>
</body>
~~~
## 2.修改元素节点的内容,样式
* 修改元素节点的内容 innerHTML
~~~
<div id="test">
hello world
</div>
<script>
var test = document.getElementById("test");
test.onclick = function(){
this.innerHTML="<p>change</p>";
}
</script>
~~~
* 修改样式
~~~
object.style.color="pink";
object.style["color"]="pink";
~~~
### 具体实例（隔行变色）
~~~
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
~~~
**css版本**
~~~
//偶数项
ul>li:nth-child(odd){
color:red;
}
//奇数项
ul>li:nth-child(even){
color:green;
}
~~~
**JS版本**
~~~
<script>
var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
if(i%2==0){
lis[i].style.backgroundColor = "#ff2d51";
}else{
lis[i].style.backgroundColor = "#44cef6"
}
}
</script>
~~~
## 3. textContent,nodeValue(了解)
* node.textContent
textContent属性返回当前节点和它的所有后代节点的文本内容。
* Node.nodeValue
只有文本节点（text）和注释节点（comment）,有文本值，因此这两类节点的nodeValue可以返回结果，其他类型的节点一律返回null
## 4.节点的分类nodeType
~~~
a.nodeType==1 为元素节点
b.nodeType==2 为属性节点
c.nodeType==3 位文本节点
d.nodeType==9 document
~~~
~~~
<body id="body">
<p id="test"> hello world</p>
<script>
var attr = document.body.getAttributeNode("id");
var test = document.getElementById("test").firstChild;
console.log(document.nodeType);//9
console.log(document.body.nodeType);//1
console.log(attr.nodeType);//2
console.log(test.nodeType);//3
</script>
</body>
~~~
### 4.1增加获取节点
### appendChild(node)
~~~
createElement(); //创建元素节点
createTextNode(); //创建文本节点
var p = document.createElement("p");
var txt = document.createTextNode("hello world");
//创建属性节点
var attr = document.createAttribute("class");
attr.value = "democlass";
p.setAttributeNode(attr)
p.appendChild(txt);
document.body.appendChild(p)
~~~
### parentNode.insertBefore(newNode,targetElementNode)
~~~
<ul id="parent">
<li>hello world</li>
</ul>
<script>
var parent = document.getElementById("parent");
for(let i=0;i<3;i++){
let li = document.createElement("li");
li.innerHTML = "java"+i;
parent.insertBefore(li,parent.firstElementChild)
}
</script>
~~~
### 4.2删除节点
`parentNode.removeChild(childNode)`
### 4.3修改节点(替换节点)
> parentNode.replaceChild(newNode,oldNode);
~~~
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>
~~~
### 4.4克隆节点
> 语法:node.cloneNode(true)
~~~
<p id="test">hello world</p>
<script>
var test = document.getElementById("test");
var cTest = test.cloneNode(true);
console.log(cTest);
document.body.appendChild(cTest);
</script>
~~~
- 1.JS的基础知识
- （1）调试
- （2）变量
- （3）数据类型
- 数据类型之间的转换
- （4）全局变量和局部变量
- （5）运算符和表达式
- （6）数组
- 2.控制语句DOM,BOM,事件
- （1）控制语句
- （2）DOM的基础
- 节点
- 改变样式
- DOM事件
- 3.函数
- （1）声明函数
- （2）构造函数
- （3）函数的参数
- （4）函数的传参
- （5）改变this
- （6）重载
- （7）回调函数
- 4.数组
- （1）创建数组
- （2）增删改查
- （3）字符串与数组的转换
- 5.正则
- （1）创建正则
- （2）字符串中支持正则
- （3）语法
- 最核心的元字符
- 6.ajax
- （1）原生ajax
- （2）http,get,post
- （3）跨域
- （4）jQuery-ajax
- （5）axios
- 7.面向对象
- （1）原型
- （2）原型链,继承
- （3）多态
- 8.es6小结
- 9.js+canvas实现验证码
- 10.js的作用域
- 11.闭包
- 实例
- toggle
- 图片切换
- swiper
- 遮罩颜色渐变
- 表格添加
- 瀑布流
- ajax数据请求渲染
- 百度地图