元素内容操作
1、语法
1、dom对象.innerHTML
2、dom对象.innerText
3、dom对象.value
上面三个全部都是属性，并且使用形式一致 直接调用属性 表示将值取出，如果给属性赋值 表示修改元素的内容
2、获取、设置元素内容
<div class="message">
<strong>一心只蹦黄泉迪</strong>
</div>
<input type="text" class="nickname" value="唢呐">
<button class="get">获取</button>
<button class="set">设置</button>
<script>
var messageDom = document.querySelector('.message');
document.querySelector('.get').onclick = function(){
// 1、innerHTML是针对双标签使用
// 2、value是针对表单元素使用
// 3、innerText 只处理内容 涉及标签 忽略
console.log(messageDom.innerHTML);
console.log(messageDom.innerText)
console.log(document.querySelector('.nickname').value);
}
document.querySelector('.set').onclick = function(){
// document.querySelector('.nickname').value = 'set'
// messageDom.innerHTML = '<p>两耳不闻棺外事</p>';
// 不能解析标签。所有的内容都只是内容而已
messageDom.innerText = '<p>两耳不闻棺外事</p>';
}
</script>
元素属性操作
通过使用js代码控制到每一个标签元素上属性，例如class、name、id等
调用方法控制
1、语法
1、获取属性:dom对象.getAttribute(属性名称)
2、设置属性：dom对象.setAttribute(属性名称,属性值)
3、删除属性:dom对象.removeAttribute(属性名称)
2、使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
标签上可以设置自定义属性 需要以data-开头 后面的名称叫什么任意
自定义属性 是为了后期使用 先存储部分值
-->
<font size="5" color="red" data-index="1">aaaaaa</font>
<input type="checkbox" value="男" checked>
<button>获取</button>
<button>修改</button>
<button>删除</button>
<script>
var btns = document.querySelectorAll('button');
var fontDom = document.querySelector('font');
btns[0].onclick = function(){
console.log(fontDom.getAttribute('color'));
console.log(fontDom.getAttribute('data-index'));
// 针对于布尔属性(checked，slected，disabled)操作值是存在问题的
console.log(document.querySelector('input').getAttribute('checked'))
}
btns[1].onclick = function(){
// 设置方法 如果标签上存在属性 就修改 否则就添加
fontDom.setAttribute('size',2);
fontDom.setAttribute('data-index',3);
fontDom.setAttribute('id','f');
// 针对于布尔属性(checked，slected，disabled)操作值是存在问题的
document.querySelector('input').setAttribute('checked',false);
}
btns[2].onclick = function(){
fontDom.removeAttribute('color')
}
</script>
</body>
</html>
调用属性控制
1、语法
dom对象.属性名称
属性名称 表示需要控制到的标签上属性。要求是标签自带的属性才可以
直接调用属性表示获取，属性赋值 表示设置， 如果想要实现删除效果 赋值为空字符串即可
2、使用示例
<!--
标签上可以设置自定义属性 需要以data-开头 后面的名称叫什么任意
自定义属性 是为了后期使用 先存储部分值
-->
<font size="5" color="red" data-index="1" class="ft">aaaaaa</font>
<input type="checkbox" value="男" checked>
<button>获取</button>
<button>修改</button>
<button>删除</button>
<script>
var btns = document.querySelectorAll('button');
var fontDom = document.querySelector('font');
btns[0].onclick = function(){
// color 就是标签上属性名字
console.log(fontDom.color);
// 自定义的方式是无法实现
console.log(fontDom["data-index"]);
// 正常 所以以后涉及布尔属性 使用dom对象.属性名称
console.log(document.querySelector('input').checked)
// 需要使用到class属性的值时 需要使用className这个词(class是关键字)
console.log(fontDom.className);
}
btns[1].onclick = function(){
fontDom.size = 2;
// 这句话向增加自定义属性，但是不支持，虽然不支持但是也没有导致语法错误，因为目前这句话是向dom对象下添加属性。如果使用非dom对象 调用dom下的方法 绝对会报错
fontDom.dataIndex = 2;
document.querySelector('input').checked = false;
// 修改class
fontDom.className = 'a b'
}
btns[2].onclick = function(){
fontDom.className = '';
}
</script>
总结：布尔属性 就通过dom对象调用属性方式控制，其他的推荐使用方法控制
tab选项卡案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 600px;
height: 400px;
border: 10px solid #333;
margin: 30px auto;
display: flex;
flex-direction: column;
}
.header {
height: 40px;
display: flex;
line-height: 40px;
}
.header div {
flex: 1;
background-color: hotpink;
text-align: center;
font-size: 36px;
color: white;
}
.header .active {
background-color: orange;
}
.content {
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="active">热卖</div>
<div>精品</div>
<div>推荐</div>
</div>
<div class="body">
<div class="content" style="display: block;">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
</div>
</body>
</html>
<script>
/*
思路：
为class为header下的每一个div都需要绑定点击事件
1、一旦用户点击。已有的active样式的元素移除样式， 将点击的div标签添加active样式
2、将点击对应的内容显示 其他的隐藏
*/
var headerDivDom = document.querySelectorAll('.header>div');
var contentsDom = document.querySelectorAll('.body>.content');
for (var i = 0; i < headerDivDom.length; i++) {
// 在每一个标签上记录下 序号（因为在处理内容显示时需要知道当前点击的序号是多少）
headerDivDom[i].setAttribute('data-index', i);
headerDivDom[i].onclick = function () {
// 将已有active的标签的样式移除
document.querySelector('.active').removeAttribute('class');
// 当前点击的添加active
// this 表示当前事件源的dom对象
this.className = 'active';
// 排他思想 不论是谁在显示，将所有content 全部隐藏，再将点击对应的content进行显示
for (var j = 0; j < contentsDom.length; j++) {
contentsDom[j].style.display = 'none';
}
console.log(i);
// 因为现在需要知道 当前点击的div是第几个才可以确定 哪一个对应的内容需要显示
var index = this.getAttribute('data-index');
contentsDom[index].style.display = 'block';
}
}
// 只要得到的是dom对象 就可以继续调用querySelector 进行筛选
// var dom = document.querySelector('.header')
// console.log(dom.querySelector('.content'))
</script>
样式操作
获取样式
1、获取行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width: 200px; height: 100px; background-color: red;}
</style>
</head>
<body>
<!-- 虽然标签上可以使用style属性控制样式，但是在设置样式 千万别用属性操作控制样式 -->
<div style="width: 100px;"></div>
<script>
// 获取样式永远是获取到生效了的样式，一些被覆盖的样式 没有任何意义
var divDom = document.querySelector('div');
// 1、dom对象.style.样式名称 此方式只能取到行内样式
console.log(divDom.style.width);
// 样式名称如果存在-去掉并且替换成驼峰式background-color=》backgroundColor
console.log(divDom.style.backgroundColor);//内嵌的样式 无法通过这种方式获取到的
</script>
</body>
</html>
2、使用内置getComputedStyle
// 2、使用window.getComputedStyle(dom对象) 返回结果是目前生效的样式组成的一个对象
console.log(window.getComputedStyle(divDom));
console.log(window.getComputedStyle(divDom).backgroundColor);
3、IE低版本的兼容性问题
// 3、IE低版本 可以使用currentStyle完成
console.log(divDom.currentStyle.backgroundColor);
4、封装公共函数获取样式
/**
* 获取元素的样式
* @param {Element} elem 需要获取样式元素的DOM对象
* @param {String} attr 需要获取的样式名称
*/
function getStyle(elem,attr){
if(window.getComputedStyle){
// 证明 window对象下存在 getComputedStyle属性的(方法) 所以就是满足w3c标准的浏览器
// 因为attr 是变量 window.getComputedStyle(elem)的到的是对象 所以 需要使用数组语法
return window.getComputedStyle(elem)[attr];
}
// 代码执行到这一行 绝对证明 是IE的低版本
return elem.currentStyle[attr];
}
设置样式
1、语法
dom对象.style.样式名称 = 值
设置样式永远设置到行内
2、设置样式
<div></div>
<script>
document.querySelector('div').style.width = '100px';
document.querySelector('div').style.height = '100px';
document.querySelector('div').style.backgroundColor = 'red';
</script>
205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
