js Dom基础
获取元素
1、getElementById() 通过id属性获取一个元素节点对象
<div id="div1"></div>
<script>
var div1 = document.getElementById('div1')
</script>
2、 getElementsByTagName()可以根据标签名来获取一组元素节点对象
这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
即使查询到的元素只有一个，也会封装到数组中返回
<div id="div1"></div>
<div class="cls"></div>
<div></div>
<script>
var divs = document.getElementsByTagName('div')
console.log(divs); // [div#div1, div.cls, div, div]
</script>
3、getElementsByName() 通过name属性获取一组元素节点对象
<div id="div1" name='nme'></div>
<div class="cls" name='nme'></div>
<div name='nme'></div>
<script>
var divs = document.getElementsByName('nme')
console.log(divs); // [div#div1, div.cls, div]
</script>
4、 getElementsByClassName() 通过class属性获取一组元素节点对象 （不支持IE8及以下浏览器）
<div id="div1" class="cls"></div>
<div class="cls"></div>
<div class="cls"></div>
<script>
var divs = document.getElementsByClassName('cls')
console.log(divs); // [div#div1.cls, div.cls, div.cls]
</script>
5、 document.querySelector()
-需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象
-该方法总会返回唯一的元素，如果满足条件的元素是多个，那么它只会返回第一个
-IE8以上的都适用
<div id="div1" class="cls"></div>
<div class="cls"></div>
<script>
var divs = document.querySelector('.cls')
console.log(divs); // <div id="div1" class="cls"></div>
</script>
<div id="div1" class="cls">
<p></p>
</div>
<script>
var p = document.querySelector('.cls p')
console.log(p); // <p></p>
.</script>
6、document.querySelectorAll()
-该方法和qureySelector()用法类似，
不同的是它将会将符合条件的元素封装到一个数组中返回
-即使符 合条件的元素只有一个，它也会返回数组
<div id="div1" class="cls"></div>
<div class="cls"></div>
<div class="cls"></div>
<script>
var divs = document.querySelectorAll('.cls')
console.log(divs); // [div#div1.cls, div.cls, div.cls]
</script>
7、获取body标签
1、document.getElementsByTagName("body")[0]
2、document.body
8、获取html标签
document.documentElement
9、获取页面中的所有元素
1、document.all
2、document.getElementsByTagName("*")
操作元素
操作内容
element.innerText 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
element.innerHTML 起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换
<div class="box">
<p> 内容 </p>
</div>
<script>
var box = document.querySelector('.box')
console.log(box.innerHTML); // <p> 内容 </p>
console.log(box.innerText); // 内容
</script>
操作属性
操作标签自带的属性
比如：src herf value chexked disabled title
<img src="./img1.png" alt="">
<input type="text">
<script>
var img = document.querySelector('img')
var ipt = document.querySelector('input')
img.src = './img2.png'
ipt.value = '直接赋值value'
</script>
操作元素样式
我们可以通过 JS 修改元素的大小、颜色、位置等样式。
1、修改行内样式操作
<img src="./img1.png" alt="">
<p>iedhfiuse</p>
<script>
var img = document.querySelector('img')
var p = document.querySelector('p')
img.style.height = '100px'
p.style.fontSize = '20px'
</script>
这种写法是通过js把样式写在行内
2、修改类名样式操作
<h1 class="title"></h1>
<p class="cont">iedhfiuse</p>
<script>
var ttle = document.querySelector('.title')
var cont = document.querySelector('.cont')
ttle.className = 'title'
cont.className = 'content'
</script>
这种方法需要提前在css中写好类名样式比如（title，content），然后通过js操作直接把类名换成写好的类名
注意：
JS里面的样式采取驼峰命名法，比如 fontSize ，backgroundColor
JS 修改 style 样式操作 ，产生的是行内样式，CSS权重比较高
如果样式修改较多，可以采取操作类名方式更改元素样式
class 因为是个保留字，因此使用className来操作元素类名属性
className 会直接更改元素的类名，会覆盖原先的类名
操作自定义属性
获取自定义的属性
element.getAttribute('属性');
<h1 class="title" index="'1"></h1>
<script>
var ttle = document.querySelector('.title')
console.log(ttle.getAttribute('index')); // 1
</script>
设置自定义的属性
element.setAttribute('属性','值');
<h1 class="title"></h1>
<p class="cont">iedhfiuse</p>
<script>
var ttle = document.querySelector('.title')
var cont = document.querySelector('.cont')
ttle.setAttribute('index', 123)
cont.setAttribute('abc', 1)
console.log(ttle.getAttribute('index')); // 123
console.log(cont.getAttribute('abc')); // 1
</script>
移除属性
element.removeAttribute('属性');
<h1 class="title"></h1>
<p class="cont">iedhfiuse</p>
<script>
var ttle = document.querySelector('.title')
var cont = document.querySelector('.cont')
ttle.setAttribute('index', 123)
cont.setAttribute('abc', 1)
console.log(ttle.getAttribute('index')); // 123
console.log(cont.getAttribute('abc')); // 1
ttle.removeAttribute('index')
cont.removeAttribute('abc')
console.log(ttle.getAttribute('index')); // null
console.log(cont.getAttribute('abc')); // null
</script>
H5新增自定义属性
H5新规定的自定义属性必须由 data- 开头 例如：data-index="abcd"
获取自定义属性
1、element.getAttribute("自定义属性名")
2、element.dataset.属性名
<h1 data-index="123"></h1>
<script>
var ttle = document.querySelector('h1')
console.log(ttle.dataset.index); // 123
console.log(ttle.dataset['index']); // 123
</script>
设置自定义属性
<h1 data-index="123"></h1>
<script>
var ttle = document.querySelector('h1')
ttle.setAttribute('data-id', 1)
console.log(ttle.dataset.id); // 1
</script>
排他思想
有一组元素，你只想给其中一个设置设置样式，此时就需要把其他的元素排除掉
利用循环先给所有元素清除样式，然后再设置自己想设置的那个
<!-- 需求：给当前点击的按钮，添加背景色 -->
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<script>
//1、获取到所有的按钮
var btns = document.querySelectorAll("button");
//2、通过循环，给所有的按钮绑定点击事件，处理函数
for (var i = 0; i < btns.length; i++) {
// console.log(btns[i]);
btns[i].onclick = function () {
// 排他思想 先去除所有的背景色样式，点击谁就给谁添加背景色
for (var j = 0; j < btns.length; j++) {
btns[j].style.backgroundColor = "";
}
// 给你每个按钮添加背景色
this.style.backgroundColor = "red";
};
}
</script>