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>