jsday10学习笔记

DOM：

        DOM 文档对象模型，提供操作html文档，html标签元素的能力

        属性和方法：

                1. 获取标签元素的方法        

                        getElementById( ' id属性值 ' )  => 通过id名获取标签

                        getElementsByClassName( ' class属性 ' )  => 通过标签的class名称获取标签，获取的是一个伪数组，必须要用索引才能得到准确的DOM元素

                        getElementsByTagName( '  标签名  ' ) => 通过标签的标签名称来获取标签，获取的是一个伪数组，必须要用索引才能得到准确的DOM元素

                                伪数组：无法直接调用数组方法或期望length属性有什么特殊的行为，不具有数组的push,pop等方法，但仍可以用数组遍历方法来遍历它们。

                                              像调用document.getElementsByTagName, document.childNodes之类的,它们返回的NodeList对象都属于伪数组。

                        getElementsByName('name属性')

                2.querySelector 和 querySelectorAll

                        querySelector() 是按照选择器的方式来获取元素，以一个伪数组的的形式返回

                                css选择器

                        基本选择器 id class 标签

                        层级选择器 子代选择器 后代选择器 M > N   M N；兄弟选择器 M ~ N  M + N

                        伪类选择器 M N:nth-child(n)

                        属性选择器 input[name]

                                           input[name='username']

                操作元素内容：  

                          innerHTML （可以获取和解析html标签）

                          innerText（只能获取到文本内容，获取不到html标签）

                          value（input使用）

                操作元素css样式：                 

                  在JavaScript中，对于元素的CSS操作，我们使用的是DOM对象中的style对象来操作。

                        语法：

                                obj.style.属性名;

                        说明：

                                 obj指的是DOM对象，也就是通过document.getElementById()等获取而来的DOM元素节点对象。

                                属性名为CSS属性名。有一点大家要非常清楚，就是这里的属性名使用的“骆驼峰”型的CSS属性名。何为“骆驼峰”型呢？举个例子，“font-size”应该写成“fontSize”，“border-bottom-width”应该写成“borderBottomWidth”，以此类推。                

                        添加样式

                                div.classList.add('active');                        

                        移除指定样式

                                div.classList.remove('active');

                操作属性：

                        getAttribute('属性名') => 获取某个元素的属性（包括自定义属性）

                        setAttribute('属性名',"属性值") => 给元素设置一个属性

                        removeAttribute('属性名') =>直接移除元素某个属性