day07

今天学了什么

1.DOM基础

1.1什么是DOM

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、样式和结构。”

HTML Dom是关于如何增,删,改,查 HTML 元素的标准。
DOM的支持性:凡是好用的IE9以下都不支持
DOM:document object model
HTML DOM 将 HTML 文档视作树结构。

这种结构被称为节点树：

节点树.png

1.2节点

节点树就是由一个个节点组成
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

节点.png

1.3如何获取节点

getElementById()
getElementsByTagName()
getElementsByClassName()
querySelectorAll()

实现：
点击button按钮,如果div是显示的则隐藏,如果隐藏则显示

//css
 
//html

1.4.1修改元素节点的内容

属性用于设置或返回指定标签之间的 HTML 内容。
语法:
innerHTML

修改样式:
element.style.attr=value;

eg:li隔行变色

隔行变色.png

1.4.2className属性

//css
  
//html
   hello world
   hello world
   hello world
   hello world
   hello world

eg:实现以下效果

classname.png

1.4.3node.textContent

textContent属性返回当前节点和它的所有后代节点的文本内容。
Node.nodeValue
只有文本节点（text）和注释节点（comment）有文本值，因此这两类节点的nodeValue可以返回结果，其他类型的节点一律返回null

nodevalue.png

1.5节点的分类nodeType

a.nodeType==1 为元素节点
b.nodeType==2 为属性节点
c.nodeType==3 位文本节点

   hello world

1.6增加获取节点

A.appendChild(node)
将新元素作为父元素的最后一个子元素进行添加。

B.parentNode.insertBefore(newNode,targetElementNode)

1.7删除节点

语法

parentNode.removeChild(childNode)

1.8修改节点(替换节点)

语法

parentNode.replaceChild(newNode,oldNode);


This is a paragraph.
This is another paragraph.

1.9克隆节点

2.DOM事件(event)

2.1JavaScript与HTML之间的交互式通过事件实现的

有事件一定有对应一个处理结果，用函数表示

2.1.1onclick//点击

上文有例子

2.1.2onfocus //获取焦点
onblur //失去焦点

2.1.3onmouseover //鼠标移到某元素之上
onmouseout //鼠标从某元素移开

  hello world

2.1.4onload页面加载时触发

//head
 
//body
 hello world

2.1.5onchange域的内容改变时发生

onchange事件支持的标签input,select,textarea

2.1.6. onsubmit

表单中的确认按钮被点击时发生

2.1.7. onresize//浏览器的尺寸发生改变
onscroll //窗口滚动

//css

//html

2.2键盘事件与KeyCode属性

keyCode:返回onkeypress，onkeydown或onkeyup事件触发的键的值的字符代码，或键的代码

2.2.1 onkeydown
用户按下一个键盘按键时发生

2.2.2onkeypress

在键盘按键按下并释放一个键时发生

2.2.2. onkeyup

在键盘按键松开时发生

3.BOM

BOM(browser object model)浏览器对象模型
BOM对象有:

bom.png

3.1window

3.1

window是浏览器的一个实例,在浏览器中,window对象有双重角色,它既是通过Javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象(全局对象)。

3.2

所有的全局变量和全局方法都被归在window上
js的顶级作用域就是window
全局变量时window的属性
方法是window的方法

3.3window对象的方法

3.3.1语法:window.alert()