dom选择器
<div class="box">001</div>
<div class="box">002</div>
<div class="box" id="three">003</div>
<input type="text" name='1'>
<input type="text" name='2'>
<input type="snbmit" name='3'>
// js选择器作用:选中html 元素
// document 表示文档对象,内容整个页面的html,内部有很多API
// 通过标签名字获取元素【集合】 参数为元素集合
// 元素集合:是多个html元素组成的数组。每个html元素都是对象
// var divs = document.getElementsByTagName('div');
// console.log();
// // 通过CLASS名字获取元素集合
// var boxs = document.getElementsByClassName('box');
// console.log(boxs);
// getElements...获取的一定是一个集合
// // 通过name属性查找html元素集合。参数为name属性的值
// var ipt = document.getElementsByName('1');
// querySelectorAll() 返回元素节点集合。参数:元素名字,或者.class css 中大部分选择器
var divs = document.querySelectorAll('.box');
console.log(divs);
var ipt = document.querySelectorAll('[type=text]');
console.log(ipt)
// querySelector() 返回元素节点对象
var div = document.querySelector('#three');
console.log(div);
// 获取元素文本节点
var text = div.innerHTML;// 返回内容字符串
console.log(text)
// innerHTML 与 innText 区别
// innerHTML 返回当前元素内部所有的内容。文本内容 元素字符
// innerText 返回当前元素的文本内容
// 当innerHTML 与 innerText 其中一个值发生改变的时候,两个值都发生改变
// innerText 低版本IE 不兼容
// 获取元素属性值
var divID = div.id;// 获取id 属性值
console.log(divID);
var divClass = div.className;
console.log(divClass);
var divArr = div.classList;
console.log( divArr);
// 更改属性值
div.className = 'cgabfeClassName';
console.log(div.className);
div.classList = 'a';
console.log(div.classList);
// className 返回class属性值得字符串,classList返回字符串属性的值得数组
<input type="text" name="userName" id="ipt" class="user">
<!-- <img src="./picture/3.jpg"> -->
<img id="img" alt="">
dom属性
1: 获取html元素,变量作用:接受document.xx 的返回结果
2:保证html元素:一定是一个元素对象,而不是元素集合,只有元素对象才能访问dom下的属性
3:通过改变元素对象属性的值;以及使用元素对象中API.完成页面交互内容
注意:变量只有存数据,改变变量的值,不能改变存的数据,只能改变变量赋值
改变数据本身,或者改变对象,只能通过对象本身去修改,对象.xxx 对象内置API修改
1:所有的对象属性一旦创建,绝对不能删除
var ipt = document.querySelector('#ipt');
// console.dir(ipt);
// console.log(querySelector('#ipt').attributes)
// // 元素对象.attributes 返回当前元素的属性集合,不能修改
// console.log(ipt.attributes);
// var text = document.querySelector('#div').innerHTML;
// // 给元素添加属性,元素对象.attrbute = 属性的值
// // attrbute 表示是新增的属性,属性是html 元素中的属性,非自定义属性
// ipt.className = 'aaa';
// var attrs = ipt.attributes;
// console.log(attrs);
// // 新增属性
// 语法: 对象.新属性 = 值;
// 值只能是字符串类型
// text.style.width = '100px';
// text.style.height = '100px';
// text.style.background = 'red';
// 改变html属性的值
// 语法:元素对象.属性 = 值
// 1:获取html属性
// 2:重新赋值
ipt.type = 'submit';
var img = document.getElementById('img');
img.src = './picture/3.jpg';
设置css样式
<div class="box"></div>
// 获取div元素对象,获取document 下所有的div
var div = document.getElementsByTagName('div');
div = div[0];
// 通过style属性 修改元素的行内样式
div.style.width = '100px';
div.style.height = '100px';
div.style.border = '1px solid black';
div.style.background = 'red';
// 通过添加className 更改css样式
// div.className = 'box bg';
// 通过classList 设置css 样式
var classNameList = [...div.classList]
// div.classList = 'box bg';
div.classList.add('bg');