[JavaScript知识库]Javascript学习资料整理——week3-day1

一、

1.事件绑定

2.操作元素css样式

? ? 获取操作元素

? ? style ? (行内样式)

? ? ? ? 语法：

? ? ? ? ? ? 标签元素.style.样式名 = 样式值

? ? ? ? ? ? 标签元素.style. = {'width':'200px','height':'200px'}

? ? ? ? 专门用来给元素添加样式的

? ? ? ? 添加的都是行内样式

? ? ? ? 示例：? ? ? ? ? ?

 <div></div>

? ? ? ? ? ? <script>

? ? ? ? ? ? ? ? var div = document.querySelector('div')

? ? ? ? ? ? ? ? div.style.width = '100px'

? ? ? ? ? ? ? ? div.style.height = '100px'

? ? ? ? ? ? ? ? div.style.backgroundColor = 'pink'

? ? ? ? ? ? ? ? console.log(div)

? ? ? ? ? ? ? ? //<div style='width:100px;height:100px;background-color:pink'></div>

? ? ? ? ? ? </script>

? ? className class类样式

? ? ? ? 专门用来操作元素类名的? ? ? ? ? ?

 <div class='box'></div>

? ? ? ? ? ? <script>

? ? ? ? ? ? ? ? var div = document.querySelector('div')

? ? ? ? ? ? ? ? console.log(div.className) ?//box

? ? ? ? ? ? </script>

? ? ? ? 也可以设置元素的类名，不过是全覆盖式的操作? ? ? ? ? ?

 <div class='box'></div>

? ? ? ? ? ? <script>

? ? ? ? ? ? ? ? var div = document.querySelector('div')

? ? ? ? ? ? ? ? div.className = 'test'

? ? ? ? ? ? ? ? console.log(div) ? ?//<div class='test'></div>

? ? ? ? ? ? </script>

? ? ? ? ? ? 在设置的时候，不管之前有没有类名，都会全部被设置的值覆盖

? ? classList 动态添加移除class类样式

? ? ? ? ? ? 添加样式

? ? ? ? ? ? ? ? div.classList.add('active')

? ? ? ? ? ? 移除指定样式

? ? ? ? ? ? ? ? div.classList.remove('active')

3.操作元素属性

? ? getAttribute('属性名')

? ? ? ? 获取元素的某个属性（包括自定义属性）? ? ? ? ? ?

 <div a='100' class='box'></div>

? ? ? ? ? ? <script>

? ? ? ? ? ? ? ? var div = document.querySelector('div')

? ? ? ? ? ? ? ? console.log(div.getAttribute('a')) ?//100

? ? ? ? ? ? ? ? console.log(div.getAttribute('class')) ?//box

? ? ? ? ? ? </script>

? ? setAttribute('属性名','属性值')

? ? ? ? 给元素设置一个属性（包括自定义属性）? ? ? ? ? ?

 <div></div>

? ? ? ? ? ? <script>

? ? ? ? ? ? ? ? var div = document.querySelector('div')

? ? ? ? ? ? ? ? div.setAttribute('a',100)

? ? ? ? ? ? ? ? div.setAttribute('class','box')

? ? ? ? ? ? ? ? console.log(div) ? ?//<div a='100' class='box'></div>

? ? ? ? ? ? </script>

? ? removeAttribute('属性名')

? ? ? ? 直接移除元素的某个属性? ? ? ? ? ?

 <div a='100' class='box'></div>

? ? ? ? ? ? ?<script>

? ? ? ? ? ? ? ? var div = document.querySelector('div')

? ? ? ? ? ? ? ? div.removeAttribute('class')

? ? ? ? ? ? ? ? console.log(div) ? ?//<div a='100'></div>

? ? ? ? ? ? ?</script>

二、

1.DOM节点

? ? 从文档对象模型DOM角度看:

? ? ? ? 每个html标签、标签属性、内容、注释...都被看成dom节点

? ? ? ? DOM 就是我们 html 结构中一个一个的节点构成的

2.dom节点分类

? ? dom节点类型：

? ? ? ? 1.整个文档是一个文档节点

? ? ? ? 2.每个 HTML 元素是元素节点

? ? ? ? 3.HTML 元素内的文本是文本节点

? ? ? ? 4.每个 HTML 属性是属性节点 ?

? ? ? ? 5.注释是注释节点

? ?

? ? 常用的三大类: ?元素节点 / 文本节点 / 属性节点

? ? ? ? 元素节点：

? ? ? ? ? ? 通过 getElementBy...获取到的都是元素节点

? ? ? ? 属性节点：

? ? ? ? ? ? 通过 getAttribute 获取的就是元素的属性节点

? ? ? ? 文本节点：

? ? ? ? ? ? 通过 innerText 获取的就是元素的文本节点

3.DOM节点树形结构

4.DOM节点关系

? ? 根节点：在HTML文档中，html就是根节点。

? ? 父节点：一个节点之上的节点就是该节点的父节点，例如ul的父节点就是body，body的父节点就是html。

? ? 子节点：一个节点之下的节点就是该节点的子节点，例如ul就是body的子节点。

? ? 兄弟节点：如果多个节点在同一层次，并拥有相同的父节点，那么这几个节点就是兄弟节点。

? ? ? ? ? ? ?例如所有li是兄弟节点，因为他们拥有相同的父节点ul

5.获取节点

? ? 获取元素节点：

? ? ? ? getElement系列

? ? ? ? querySelector系列

6.层次关系获取节点

? ? parentNode: 返回节点的父节点

? ? childNodes：返回子节点集合，childNodes[i]

? ? firstChild: 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

? ? lastChild：返回节点的最后一个子节点

? ? nextSibling: 下一个节点

? ? previousSibling：上一个节点

? ? children：获取某一节点下所有的子一级元素节点

? ? ? ? 示例：? ? ? ? ?

?<div><p>hello</p></div>

? ? ? ? ? ?<script>

? ? ? ? ? ? ? ? var oDiv = document.querySelector('div')('div') ? ?//这个oDiv获取的是页面中的            
                                                                    div元素，就是一个元素节点

? ? ? ? ? ? ? ? console.log(oDiv.children)

? ? ? ? ? ?</script>

? ? ? ? ? ?我们发现只有一个节点，因为 children 只要元素节点

? ? ? ? ? ?div下面又只有一个元素节点，就是p

? ? ? ? ? ?所以就只有一个，虽然只有一个，但是也是一个伪数组

7.层次关系获取元素节点

? ? firstElementChild：返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

? ? ? ? 示例：? ? ? ? ? ?

 <div><p>hello</p></div>

? ? ? ? ? ? <script>

? ? ? ? ? ? ? ? var oDiv = document.querySelector('div') ? ?//这个oDiv获取的是页面中的div元素，就是一个元素节点

? ? ? ? ? ? ? ? console.log(oDiv.firstElementChild) ? ? //<p>hello</p>

? ? ? ? ? ? </script>

? ? ? ? ? ? 只获取一个节点，不再是伪数组

? ? ? ? ? ? 获取的是第一个元素节点

? ? ? ? ? ? 第一个元素节点就是p标签，是一个元素节点

? ? lastElementChild：返回节点的最后一个子节点

? ? ? ? 示例：? ? ? ? ? ?

 <div>

? ? ? ? ? ? <p>hello</p>

? ? ? ? ? ? <p>world</p>

? ? ? ? ? ? </div>

? ? ? ? ? ? <script>

? ? ? ? ? ? ? ? var oDiv = document.querySelector('div') ? ?//这个oDiv获取的是页面中的div元素，就是一个元素节点

? ? ? ? ? ? ? ? console.log(oDiv.lastElementChild) ?//<p>world</p>

? ? ? ? ? ? </script>

? ? ? ? ? ? 只获取一个节点，不再是位数组

? ? ? ? ? ? 获取的是最后一个元素节点

? ? ? ? ? ? 最后一个元素节点是<p>world</p>，是一个元素节点

? ? nextElementSibling：下一个节点

? ? previousElementSibling：上一个节点

8.获取元素节点的所有属性节点: attributes

? ? 示例：? ? ? ?

 <ul>

? ? ? <li id='a' a='100'>hello</li>

?</ul>

 <script>

? ? ? var oli = document.querySelector('#a') ?//这个oli获取的是页面中的li元素，就是一个元素节点

? ? ? ? ? ? console.log(oli.attributes)

?</script>

? ? ? ? 获取的是一组数据，是该元素的所有属性，也是一个伪数组

? ? ? ? 这个li又三个属性，id、a、test三个，所以就获取到了这三个

9.非常规节点获取

? ? 获取html根节点：document.documentElement

? ? 获取body节点：document.body

? ? 获取head：document.head