DOM:document object model,文档对象模型
D(document):document的意思是文档,在dom中会将HTML这个页面给解析为一个文档,并在解析的同时会提供一个 document对象。
事件三要素:事件源:要操作的对象
事件:事件对象 click dbclick mousemove...
事件处理函数:干什么
事件源.on事件 = 事件处理函数
html文件里面的所有内容都是对象
每个标签都是对象,所有的标签作为对象去打印,里面的API几乎一样
document.querySelector('.btn').onclick = btnClick;
function btnClick(){
console.log('点了一下');
}
console.log(typeof btnClick);
通过css选择器获取:documen querySelector
<div class="box box1" id="mybox1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
<div class="box box4">box4</div>
<span>我是span</span>
通过类名获取
通过id名获取
通过标签名获取
通过name属性值获取
// 通过css选择器获取:document.querySelector("css选择器")
console.log(document.querySelector);
console.log(document.querySelector(".box1"));
console.dir(document.querySelector(".box1"));
console.log(document.querySelector(".box"));//只能获取到第一个
// document.querySelectorAll("css选择器")
console.log(document.querySelectorAll(".box"));
console.log(document.querySelectorAll(".box1"));
console.log("=====通过类名获取");
// 通过类名获取:document.getElementsByClassName("类名")
console.log(document.getElementsByClassName("box1")[0]);
console.log(document.getElementsByClassName("box"));
console.log("=====通过id名获取");
// document.getElementById("id名")
console.log(document.getElementById("mybox1"));
console.log("=====通过标签名获取");
// document.getElementsByTagName("标签名")
console.log(document.getElementsByTagName("div"));
console.log(document.getElementsByTagName("span"));
console.log("=====通过name属性获取");
console.log("account: ",document.getElementsByName("account"));
console.log(document.getElementsByName("hobby"));
console.log(document.getElementsByName("hobby")[0]);
console.log(document.getElementsByName("account")[0].value);
元素:标签
节点:标签(元素)、文本、注释
属性的增删改查:
let box1 = document.querySelector('.box1');
console.log(box1);
// 添加一个属性: 标签.setAttribute(属性名,属性值)
box1.setAttribute("newattr","添加的属性");
// 获取属性值: box1.getAttribute(属性名)
console.log(box1.getAttribute("newattr"));
console.log(box1.getAttribute("class"));
// 修改
box1.setAttribute("class",box1.getAttribute("class")+" myclass");
// 删除
// box1.removeAttribute("newattr");
// box1.removeAttribute("class");
// 点击按钮,删除box1的class
document.querySelector('button').onclick = function(){
box1.removeAttribute("class");
box1.innerHTML = "新内容";
}
console.log("直接对标签属性进行操作============");
// 修改:标签.属性 = "属性值";
let a = document.querySelector("a");
a.href = "http://www.baidu.com";
console.log(a.href);
let account = document.getElementsByName('account');
console.log(account);
account[0].value = "654321";
// 修改标签内容:标签.
box1.innerHTML = "<h2>标题2</h2>";
console.log(box1.innerHTML);
console.log(box1.innerText);
// box1.innerText = "<h2>标题2</h2>";
let checkBox = document.getElementsByName('hobby');
console.log(checkBox);
// checkBox[1].checked = "checked";
checkBox[1].checked = true;
// 标签.属性 = "属性值"; 不能用于设置标签类名
a.class = "mya";
console.dir(a);
标签类名的增删改查:
let box1 = document.querySelector('.box1');
// 查:获取类名
console.dir(box1);
console.log(box1.className);
console.log(box1.classList);
// 添加:标签.classList.add()
box1.classList.add("newClass");
// 替换: box1.classList.replace(oldclass,newclass)
box1.classList.replace("box","mybox");
// 标签是否包含某个类名
console.log(box1.classList.contains("box1"));//true
console.log(box1.classList.contains("adafsf"));//false
// 删除类名
box1.classList.remove("newClass");
box1.classList.remove("box1");
// 有对应类名就删除,没有就添加
box1.classList.toggle("aaaa")
box1.classList.toggle("mybox")
自定义属性:
eg:
<button>显示图片</button>
<img src="" data-src123="https://img1.baidu.com/it/u=917108111,1107211158&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=274" alt="">
<script>
let img = document.getElementsByTagName('img');
console.dir(img);
console.dir(img[0].dataset.src123);
// 点击 显示图片按钮 ,显示图片
document.querySelector('button').onclick = function(){
img[0].src = img[0].dataset.src123;
}
标签的创建和添加:
创建标签:document.createElement("标签名")
添加:标签.append(要添加的标签)
// box.append(span,span2," 通过append添加");
// box.appendChild(span,span2);
插入: box.insertBefore(newnode,oldnode)
let span = document.createElement("span");
span.innerHTML = "我是span";
span.classList.add("myspan");
let span2 = document.createElement("span");
span2.innerHTML = "我是span2";
span2.classList.add("myspan");
let box = document.querySelector('.box');
box.insertBefore(span,document.querySelector('ul'));
标签的删除,复制及替换:
删除标签: 标签.remove()
document.querySelector('.box2').remove();
复制 克隆
let cloneUl = ul.cloneNode();
替换
box3.replaceChild(newnode,oldnode);
let ul = document.querySelector('ul');
ul.removeChild(document.querySelector('li'));
let cloneUl = ul.cloneNode(true);
console.log(cloneUl);
let box1 = document.querySelector('.box1');
let box3 = document.querySelector('.box3');
box3.replaceChild(cloneUl,document.querySelector(".box3 p"));
标签的批量添加:
eg:
<div class="bigBox"></div>
<script>
let bigBox = document.querySelector('.bigBox');
let str = '';
for (let i = 0; i < 10; i++) {
str += `<div>我是div${i+1}</div>`;
}
bigBox.innerHTML = str;
</script>
表格的全选反选与不选:
eg:
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>选择</th>
<th>昵称</th>
<th>加入时间</th>
<th>签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="" id="">
</td>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是一场修行</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
</td>
<td>许闲心</td>
<td>2016-11-28</td>
<td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>
</tr>
</tbody>
</table>
<button type="button" class="layui-btn selectAllBtn">全选</button>
<button type="button" class="layui-btn fanxuanBtn">反选</button>
<button type="button" class="layui-btn noSelectBtn">不选</button>
<script>
let allInput = document.querySelectorAll('input');
// 点击全选,表格里面的复选框全部选中
let selectAllBtn = document.querySelector('.selectAllBtn');
selectAllBtn.onclick = function(){
allInput.forEach(input => {
input.checked = true;
});
}
// 反选
let fanxuanBtn = document.querySelector('.fanxuanBtn');
fanxuanBtn.onclick = function(){
allInput.forEach(input => {
input.checked = !input.checked;
});
}
// 不选
let noSelectBtn = document.querySelector('.noSelectBtn');
noSelectBtn.onclick = function(){
allInput.forEach(input => {
input.checked = false;
});
}
</script>
以上代码比较复杂,占用内存,优化代码如下:
<script>
let allInput = document.querySelectorAll('input');
// 点击全选,表格里面的复选框全部选中
let selectAllBtn = document.querySelector('.selectAllBtn');
selectAllBtn.onclick = fn;
// 反选
let fanxuanBtn = document.querySelector('.fanxuanBtn');
fanxuanBtn.onclick = fn;
// 不选
let noSelectBtn = document.querySelector('.noSelectBtn');
noSelectBtn.onclick = fn;
// 封装 =》 函数 判断=》if语句 不知道怎么办了就想一下能否通过定义一个变量实现
function fn() {
// 判断选中的是全选,还是不选 问题是如何判断呢?
console.log(this);//在事件处理函数里面,this指向的是点击的对应的标签
/* if(this == selectAllBtn){
console.log('点击了全选');
} */
/* allInput.forEach(input => {
if (this.classList.contains('selectAllBtn')) {
input.checked = true;
}else{
input.checked = false;
}
}); */
/* if (this.classList.contains('selectAllBtn')) {
allInput.forEach(input => {
input.checked = true;
});
} else {
allInput.forEach(input => {
input.checked = false;
});
} */
let checked = false;//默认是不选
let flag = 0;//根据flag判断是否是反选
if(this.classList.contains('selectAllBtn')){//如果是点击的全选就把变量值设为true
checked = true;
}else if(this.classList.contains('fanxuanBtn')){//反选
flag = 1;
}
allInput.forEach(input => {
// input.checked = checked;
/* if(flag == 1){
input.checked = !input.checked;
}else{
input.checked = checked;
} */
// flag == 1? (input.checked = !input.checked):(input.checked = checked)
input.checked = flag == 1?!input.checked:checked;
});
}
// fn();//window.fn();
// 改变this指向:bind call aplly
</script>