DOM操作
<div id="div1">我是div1</div>
<div class="div2">我是div2</div>
<span name="s">我是span1</span>
<span name="s">我是span2</span>
<span name="s">我是span3</span>
<span name="s">我是span4</span>
<br>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
// DOM操作 文档对象模型
// 操作HTML文档
// 获取页面中标签的方式
// (1) 通过 id属性值获取 标签对象
// document.getElementById('id属性值')
// 执行结果,只能获取一个标签对象
// 注意,id属性值,一定要有引号
// HTML中,id属性值一定不能重复设定
// var oDiv1 = document.getElementById('div1');
// console.log(oDiv1);
// (2) 通过 class属性值 获取标签对象
// document.getElementsByClassName('class属性值')
// Elements 之后有一个s表示复数
// class属性,在JavaScript中,一律定义为 className
// class关键词用在其他功能上
// 执行结果,获取到的是,一个伪数组
// 即时只有一个符合条件的标签,获取到也是一个数组
// 数组的单元,是符合条件的标签
// 可以通过索引下标,来获取魔某一个标签对象
// 不能被 forEach() 循环遍历
// var oDiv2 = document.getElementsByClassName('div2');
// console.log(oDiv2);
// console.log(oDiv2[0]);
// 不能被forEach()循环
// oDiv2.forEach(function(v){
// console.log(v);
// })
// (3) 通过 标签名称 获取标签对象
// document.getElementsByTagName('标签名称');
// 获取到是一个伪数组
// 数组的单元是符合条件的标签
// 不能被forEach()循环遍历
// var oDiv3 = document.getElementsByTagName('div');
// console.log(oDiv3);
// oDiv3.forEach(function(v){
// console.log(v);
// })
// (4) 通过 标签name属性的属性值 获取标签对象
// document.getElementsByName('标签name属性的属性值')
// 获取到的结果是一个伪数组
// 数组内容是符合条件的标签
// 可以被forEach()循环遍历
// var oSpan = document.getElementsByName('s');
// console.log(oSpan);
// oSpan.forEach(function(v){
// console.log(v);
// })
// 推荐方法
// (5) 通过 只要是符合语法规范的方式 就能获取到标签对象
// document.querySelector() 获取符合条件的第一个标签
// document.querySelectorAll() 获取符合条件的所有标签
// 所有标签是一个数组,可以被forEach() 循环遍历
// 低版本ie不兼容这两种方式
// 通过标签的id属性值来获取,要记得写 # 号
var oQuery1 = document.querySelector('#div1');
console.log(oQuery1);
// 通过标签的class属性值来获取,要记得写 . 号
var oQuery2 = document.querySelector('.div2');
console.log(oQuery2);
// 通过标签的标签名称来获取
// 只获取第一个div标签
var oQuery3 = document.querySelector('div');
console.log(oQuery3);
// 获取所有div标签
var oQuery4 = document.querySelectorAll('div');
console.log(oQuery4);
// 通过属性和属性值获取
// 语法 : ('[属性="属性值"]')
// 获取name属性值是s的标签
var oQuery5 = document.querySelectorAll('[name="s"]');
console.log(oQuery5);
// 获取type属性值是text的标签
var oQuery6 = document.querySelectorAll('[type="text"]');
console.log(oQuery6);
// 还可以通过标签结构,获取
// ul标签中,子级li标签
// 只要是css语法支持的选择器语法都行
// 父子,后代,兄弟....都支持
var oQuery7 = document.querySelectorAll('ul>li');
console.log(oQuery7);
</script>
DOM操作之设定标签属性
<body>
<div>我是div</div>
<script>
// 给标签添加属性
// 标签对象.setAttribute('属性名称' , 属性值);
// 一次只能定义一个属性,如果要定义多个属性,要执行多次
// 获取标签属性的属性值
// 标签对象.getAttribute('属性名称');
// 获取到的结果,都是字符串类型
var oDiv = document.querySelector('div');
// 给 div 标签,添加属性index 属性值是0
oDiv.setAttribute('index' , 0);
oDiv.setAttribute('key' , '第一个div');
// 获取标签属性的属性值
console.log( oDiv.getAttribute('index') );
// 几个特殊的属性设定方式
// id属性 class属性 直接定义在标签对象上的方法
// 可以直接定义或者获取,不同通过 get ,set
console.dir(oDiv)
// 标签对象.id = 属性值 设定id属性的属性值
oDiv.id = 'div1';
// 标签对象.className = 属性值 设定class属性的属性值
oDiv.className = 'div2';
// 标签对象.id 获取标签对象,id属性值
console.log( oDiv.id )
// 标签对象.className 获取标签对象,class属性值
console.log( oDiv.className )
// 直接操作name属性, 并不是所有的浏览器都支持的
// 使用set,get最安全
oDiv.name = '张三';
console.log(oDiv.name);
// 总结
// 1,可以通过 setAttribute() 设定标签所有的属性 包括 id , class
// 可以通过 getAttribute() 所有标签所有的属性的属性值 包括 id , class
// 所有的属性,设定或者获取,都建议,通过set,get完成
// 2,id和class属性可以直接通过 标签对象.id和标签对象.className
// 来设定或者获取
// 3,根据不同版本的浏览器,有一些不在标签对象本身属性上的,也可以直接设定
// 例如 name , titile
// 但是因为浏览器兼容问题,推荐还是使用set,get
// 4,这里属性值的设定,是替换操作,会覆盖之前的设定属性
// 而不是新增添加属性操作
</script>
DOM循环问题
<div>我是div</div>
<ul>
<li index="1">我是第一个</li>
<li index="2">我是第二个</li>
<li index="3">我是第三个</li>
<li index="4">我是第四个</li>
</ul>
<script>
// 解决demo中的一些问题
// 1, onclick 中 关于this的问题
// 给所有的li标签,添加点击事件
// 输出不同的具体内容
var oLis = document.querySelectorAll('li');
// 方法1 , forEach()循环
// forEach 是一个特殊的循环
// 每次都建立一个不同的,特殊的变量,存储的是相互不影响的,独立的数据
// 因此,item变量,可以在点击事件中直接使用
// item.getAttribute('index') this.getAttribute('index')
// oLis.forEach(function(item){
// item.onclick = function(){
// // 事件中
// // itme可以直接使用,获取触发点击事件的标签的属性
// console.log( item.getAttribute('index') );
// }
// })
// 法法2 , for循环 for...in
// for循环只有一个变量,存储数据是重复赋值
// 最终调用的是 循环变量的最终数据
// 点击事件中,必须要使用this this.getAttribute('index')
// 如果使用 oLis[i].getAttribute('index') 会报错
//
// for(var i = 0 ; i <= oLis.length-1 ; i++){
// oLis[i].onclick = function(){
// // 事件中
// console.log( this.getAttribute('index') );
// }
// }
// 总结
// 在循环遍历中,因为 forEach 和 for / for...in
// 在存储变量上的区别
// 给伪数组中的标签对象添加事件时
// 在事件中: forEach 可以使用 参数1 , 也可以使用this
// for/for...in 只能使用this方法,不能使用 伪数组[下标]
// 问题2:
// 不使用标签本身定义的属性值,就使用索引下标是不是可行?
// 咱们现在的demo还比较简单,数据都是我们本地设定的数据
// 而不是数据库的数据
// 今后数据库的数据,比较复杂,在标签中定义的也不是索引下标
// 会是数据库中,数据的一些,其他属性
// 这个属性与索引下标就没有关系了,就不能使用索引下标替换
// oLis.forEach(function(item,key){
// item.onclick = function(){
// // 没有使用标签本身定义的属性的属性值
// // 使用的是索引下标
// console.log(key+1);
// }
// })
// 给同一个标签,添加多个类型相同的事件,
// 只会执行最后一个事件
// 原理:后定义的事件会覆盖,先定义的事件
// 如果非要定义多个类型相同的事件
// 咱们之后讲
var oDiv = document.querySelector('div');
// oDiv.onclick = function(){
// console.log('我是第一个点击事件触发的程序');
// }
// oDiv.onclick = function(){
// console.log('我是第二个点击事件触发的程序');
// }
// 之后会详细讲
oDiv.addEventListener('click' , function(){
console.log('我是第一个')
})
oDiv.addEventListener('click' , function(){
console.log('我是第二个')
})
</script>
DOM操作之标签的样式
<style>
div{
font-size: 50px;
color: green;
}
</style>
北京
<script>
// DOM操作之标签的样式
// 1,给标签设定样式
// 标签对象.style.属性 = 属性值
// 2,获取标签设定的样式
// 标签对象.style.属性
var oDiv = document.querySelector('div');
// 通过 标签对象.style.属性 = '属性值'
// 设定的是标签的行内样式
// oDiv.style.color = 'red';
// 获取样式
// 行内样式,正确获取
console.log( oDiv.style.color );
console.log( oDiv.style.background );
// 非行内样式,获取的结果是空字符串
console.log( oDiv.style.fontSize );
// 获取标签执行的样式属性
// 不管行内还是非行内,获取的是,最终执行的样式属性值
// 例如: 外部样式,被行内样式优先级 覆盖,
// 获取的结果,就是最终执行的 行内样式
// 一般浏览器 值得是 非低版本IE浏览器
// window.getComputedStyle(标签对象).属性
// 低版本IE浏览器方法
// 标签对象.currentStyle.属性
// 获取的是标签最终执行的样式的属性值
// 如果是颜色,获取的是 rgb() 的形式
// console.log(window.getComputedStyle(oDiv).fontSize);
// console.log(window.getComputedStyle(oDiv).color);
// console.log(oDiv.currentStyle.fontSize);
// 兼容处理方案
// 不能像之前,做 || 逻辑赋值
// 因为此时是JavaScript报错,会终止之后程序的执行
// 兼容处理方法是 使用 if判断
// 如果 window.getComputedStyle 这种方法没有,执行结果是 undefined 没有这个方法
// 如果 window.getComputedStyle 这种方法有,就会有一个返回值
// if( window.getComputedStyle )
// 如果 window.getComputedStyle 没有 结果是 undefined
// if( undefined ) ---> if( false )
// 就调用 标签对象.currentStyle.属性
// 如果 window.getComputedStyle 有 结果是 有内容的
// if( 有内容 ) ---> if( true )
// 就调用 window.getComputedStyle 这个方法
// 使用if判断,始终只会有一种方法被调用执行,
// 是支持的,有的方法,会被执行
// 没有的方法,不会执行,就不会报错
// 不支持的浏览器会报错,影响之后的程序的执行
// var res = window.getComputedStyle(oDiv).fontSize || oDiv.currentStyle.fontSize;
// 使用if方法,只有支持的才会执行,不支持的不会执行,不会有报错
if(window.getComputedStyle){
// 支持 window.getComputedStyle 的会执行这里的代码
// 一般浏览器会执行这里的代码
var res = window.getComputedStyle(oDiv).fontSize;
}else{
// 不支持 window.getComputedStyle 的会执行这里的代码
// 低本IE浏览器,会执行这里的代码
var res = oDiv.currentStyle.fontSize;
}
console.log(123);
特殊标签的获取
// 特殊标签的获取方式
// 不是写在body内的标签
// body标签
// document.body
console.log(document.body);
// head标签
// document.head
console.log(document.head);
// titile标签
// document.title
console.log(document.title);
// html标签
// document.documentElement
console.log(document.documentElement);
获取元素占位符
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 10px;
margin: 20px;
padding: 40px;
border:1px solid black;
/* box-sizing: border-box; */
}
</style>
</head>
<body>
<div></div>
<script>
// DOM操作之获取元素占位
// 1,获取元素占位 --- css样式占位,盒子模型
// 宽度,高度,marging,padding,border
// 可以通过标签样式,来获取
// 获取到的结果,是属性值,有px单位
// 去除px单位的方法 ?
var oDiv = document.querySelector('div');
console.log(window.getComputedStyle(oDiv).width);
console.log(window.getComputedStyle(oDiv).height);
// 2,其他方式
// offsetHeight offsetWidth
// 高/宽 + padding + border
// clientHeight clientWidth
// 高/宽 + padding
// clientLeft clientTop
// 左/上 border
// offsetLeft offsetTop
// 左/上 margin
// 如果设定了 box-sizing: border-box;
// 边框线,margin的数据是不受影响的
// clientHeight clientWidth
// 高/宽 + padding ---> width/height - border
// 实际就是 定义 width/height - border
// offsetHeight offsetWidth
// 高/宽 + padding + border ---> width / height
// 实际就是 定义的 width / height 数值
console.dir(oDiv)
// 边框线和外边距不能设定,要通过style来设定
// 也是不能设定的
oDiv.offsetHeight = '300px';
oDiv.clientHeight = '300px';
// 不能设定
oDiv.clientLeft = '100px';
oDiv.offsetLeft = '100px';
// style可以设定 boder 和 margin
oDiv.style.borderLeft = '100px solid red';
oDiv.style.marginLeft = '100px';
// 如果非要设定,之后有方法解决
</script>
