关于前端:JavaScript基础9

DOM

Document Object Model 文档对象模型
JS 中通过 DOM 来对 HTML 文档进行操作。
只有了解了 DOM 就能够得心应手的操作 WEB 页面
文档
文档示意的就是整个 HTML 网页文档
对象
对象示意将网页中的每一个局部都转换为了一个对象。
模型
应用模型来示意对象之间的关系，这样不便咱们获取对象。

节点

节点：Node，形成网页的最根本的组成部分，网页中的每一个局部都能够称为一个节点
罕用节点分为四类
文档节点：整个 HTML 文档
元素节点：HTML 文档中的 HTML 标签
属性节点：元素的属性
文本节点：HTML 标签中的文本内容
比方：html 标签，属性，文本，正文，整个文档等都是一个节点
尽管都是节点，然而实际上他们的具体类型是不同的
比方：标签咱们称为元素节点，属性称为属性节点，文本称为文本节点，文档称为文档节点。
节点的类型不同，属性和办法也都不尽相同。

事件的简介

事件，就是文档或浏览器窗口产生的一些特定的交互霎时
JavaScript 与 HTML 之间的交互是通过事件实现的
对于 Web 利用来说，有上面这些代表性的事件：点击某个元素，将鼠标挪动至某个元素上方，按下键盘上某个键等等

// 处理事件 
// 咱们能够在事件的对应属性中设置一些 js 代码
// 这样当事件被触发时，这些代码将会执行
// 这种写法咱们称为构造和行为耦合，不不便保护，** 不举荐应用 ** 
<button id="btn" onclick="alert(' 厌恶，点我干嘛 ')"> 我是一个按钮 </button>
<script type = "text/javascript">
</script>

能够为按钮的对应事件绑定处理函数的模式来响应事件
这样当事件被触发时，其对应的函数将会被调用
获取对象

var btn = document.getElementById("btn");

绑定一个单机事件
像这种为单机事件绑定的函数，咱们称为单机响应函数

btn.onclick = function(){alert("你还点");
};

文档的加载

浏览器在加载一个页面时，是依照自上向下的程序加载的
读取到一行就运行一行，如果将 script 标签现到页面的上边，
在代码执行时，页面还没有加载 DOM 对象也没有加载，会导致无奈获取到 DOM 对象
将 js 代码编写到页面下部就是为了能够在页面加载结束后在执行 js 代码

onload 事件 会在整个页面加载实现之后才触发
为 window 绑定一个 onload 事件
该事件对应的响应函数将会在页面加载实现之后执行
这样能够确保咱们的代码执行时所有的 DOM 对象曾经加载结束了
先加载后执行

<button id="btn"> 我是一个按钮 </button>                //body
window.onload = function(){                            //script
var btn = document.getElementById("btn");
    btn.onclick = function(){alert("你还点");
    };
};

DOM 查问

获取元素节点
通过 document 对象调用
1.getElementById()
通过 id 属性获取一个元素节点对象
2.getElementsByTagName()
通过标签名获取一组元素节点对象
3.getElementByName()
通过 name 属性获取一组元素节点对象
获取元素节点的子节点
通过具体的元素节点调用
1.getElementsByTagName()
办法，返回以后节点的指定标签名后辈节点
2.childNodes
属性，示意以后节点的所有子节点
3.firstChild
属性，示意以后节点的第一个子节点
4.lastChild
属性，示意以后节点的最初一个子节点

获取 body
在 document 中有一个属性 body，它保留的是 body 的援用

var body = document.body;

html 根标签
document.documentElement 保留的是 html 根标签

var html = document.doucumentElement;

依据元素的 class 属性值查问一组元素节点对象
gentElementsByClassName() 能够依据 class 属性值获取一组元素节点对象，
然而该办法不反对 IE8 及以下的浏览器

var box1 = document.gentElementsByClassName("box1");

document.querySelector()
须要一个选择器的字符串作为参数，能够依据一个 css 选择器来查问一个元素节点对象
尽管 ie8 中没有 gentElementsByClassName，然而能够应用 document.querySelector()代替
应用该办法总会返回惟一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
document.querySelectorAll()
该办法与 document.querySelector()用法相似，不同的是它会将查问的元素封装到一个数组
即便符合条件的元素只有一个，他也会返回数组

DOM 查问

通过具体的元素节点来查问

元素.getElementsByTagName()

通过标签名查问以后元素的指定后辈元素

        
元素.childNodes

获取以后元素的所有子节点
会获取到空白的文本子节点

    
元素.children

获取以后元素的所有子元素

    
元素.firstChild

获取以后元素的第一个子节点

    
元素.lastChild

获取以后元素的最初一个子节点

    
元素.parentNode

获取以后元素的父元素

    
元素.previousSibling

获取以后元素的前一个兄弟节点

    
元素.nextSibling

获取以后元素的后一个兄弟节点

innerHTML 和 innerText

这两个属性并没有在 DOM 规范定义，然而大部分浏览器都反对这两个属性
两个属性作用相似，都能够获取到标签外部的内容，
不同是 innerHTML 会获取到 html 标签，而 innerText 会主动去除标签
如果应用这两个属性来设置标签外部的内容时，没有任何区别的

读取标签外部的文本内容

    <h1>h1 中的文本内容 </h1>
    元素.firstChild.nodeValue
    

document 对象的其余的属性和办法

    document.all

获取页面中的所有元素，相当于 document.getElementsByTagName(“*”);

        
    document.documentElement

获取页面中 html 根元素

        
    document.body

获取页面中的 body 元素

        
    document.getElementsByClassName()

依据元素的 class 属性值查问一组元素节点对象
这个办法不反对 IE8 及以下的浏览器

        
    document.querySelector()

依据 CSS 选择器去页面中查问一个元素
如果匹配到的元素有多个，则它会返回查问到的第一个元素

        
    document.querySelectorAll()    

依据 CSS 选择器去页面中查问一组元素
会将匹配到所有元素封装到一个数组中返回，即便只匹配到一个

DOM 批改

document.createElement()

能够依据标签名创立一个元素节点对象

    
document.createTextNode()

能够依据文本内容创立一个文本节点对象

    
父节点.appendChild(子节点)

向父节点中增加指定的子节点

    
父节点.insertBefore(新节点, 旧节点)

将一个新的节点插入到旧节点的前边

    
父节点.replaceChild(新节点, 旧节点)

应用一个新的节点去替换旧节点

    
父节点.removeChild(子节点)

删除指定的子节点

举荐形式：子节点.parentNode.removeChild(子节点)

DOM 对 CSS 的操作

读取和批改内联款式

• 应用 style 属性来操作元素的内联款式

• 读取内联款式：
  语法：
  元素.style. 款式名
  例子：
  元素.style.width
  元素.style.height
  留神：如果款式名中带有 -，则须要将款式名批改为驼峰命名法
  将 - 去掉，而后 - 后的字母改大写
  比方：background-color –> backgroundColor
  border-width —> borderWidth

批改内联款式：
语法：

元素.style. 款式名 = 款式值

通过 style 批改的款式都是内联款式，因为内联款式的优先级比拟高，
所以咱们通过 JS 来批改的款式，往往会立刻失效，
然而如果款式中设置了!important，则内联款式将不会失效。

读取元素的以后款式
失常浏览器

    应用 getComputedStyle()

这个办法是 window 对象的办法，能够返回一个对象，这个对象中保留着以后元素失效款式

    - 参数：1. 要获取款式的元素
    2. 能够传递一个伪元素，个别传 null

例子：
获取元素的宽度

    getComputedStyle(box , null)["width"];

通过该办法读取到款式都是只读的不能批改

    - IE8
        - 应用 currentStyle
        - 语法：元素.currentStyle. 款式名
        - 例子：box.currentStyle["width"]
        - 通过这个属性读取到的款式是只读的不能批改

其余的款式相干的属性
留神：以下款式都是只读的

    clientHeight

元素的可见高度，指元素的内容区和内边距的高度

    clientWidth

元素的可见宽度，指元素的内容区和内边距的宽度

    offsetHeight

整个元素的高度，包含内容区、内边距、边框

    offfsetWidth

整个元素的宽度，包含内容区、内边距、边框

    offsetParent

以后元素的定位父元素
离他最近的开启了定位的先人元素，如果所有的元素都没有开启定位，则返回 body

    offsetLeft
    offsetTop

以后元素和定位父元素之间的偏移量
offsetLeft 程度偏移量 offsetTop 垂直偏移量

    
    scrollHeight
    scrollWidth

获取元素滚动区域的高度和宽度

    
    scrollTop
    scrollLeft

获取元素垂直和程度滚动条滚动的间隔

判断滚动条是否滚动到底
垂直滚动条

            scrollHeight - scrollTop = clientHeight
            

程度滚动

            scrollWidth - scrollLeft = clientWidth
    

事件（Event）

事件对象
当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，
这个事件对象中封装了以后事件的相干信息，比方：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向。。
能够在响应函数中定义一个形参，来应用事件对象，然而在 IE8 以下浏览器中事件对象没有做完实参传递，而是作为 window 对象的属性保留

    - 例子：元素. 事件 = function(event){event = event || window.event;};
        
        元素. 事件 = function(e){e = e || event;};
        

事件的冒泡（Bubble）

事件的冒泡指的是事件向上传导，当后辈元素上的事件被触发时，将会导致其先人元素上的同类事件也会触发。
事件的冒泡大部分状况下都是无益的，如果须要勾销冒泡，则须要应用事件对象来勾销
能够将事件对象的 cancelBubble 设置为 true，即可勾销冒泡

    - 例子：元素. 事件 = function(event){
                event = event || window.event;
                event.cancelBubble = true;
            };