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
div{
width: 100px;
height: 100px;
background: red;
}//html1.4.1修改元素节点的内容
属性用于设置或返回指定标签之间的 HTML 内容。
语法:
innerHTML
修改样式:
element.style.attr=value;
- 1
- 2
- 3
- 4
- 5
- 6
eg:li隔行变色
文章图片
隔行变色.png 1.4.2className属性
//css.current{
color: red;
}//htmlhello 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 //窗口滚动
//cssdiv{
width: 500px;
height: 500px;
background: red;
}//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()
上文有例子3.3.2语法:window.confirm(“msg”)
功能:显示一个带有指定消息和OK及取消按钮的对话框
小米8
3.3.3语法:window.prompt(“text,defaultText”)
参数说明:
text:在对话框中显示的文本
defaultText:默认输入文本
返回值:点取消按钮,返回null
点确定按钮,返回输入的文本
var result=window.prompt("请输入你的星座","狮子座");
console.log(result);
3.3.4语法:window.open(pageURL,name,parameters)
功能:打开一个新的窗口或查找一个已命名的窗口
参数说明:
pageURL:子窗口的路基
name:子窗口的句柄(name声明了新窗口的名称,方便后期通过name对子窗口进行引用)
parameters：窗口参数(各参数之间用逗号分隔)
文章图片
window.png 3.3.5window.close()
【day07】功能:关闭窗口
推荐阅读
- 2019-02-13——今天谈梦想（）
- Ⅴ爱阅读，亲子互动——打卡第178天
- 我错了，余生不再打扰
- 今天写一些什么
- 2019.4.18感恩日记
- “不完美，才美”01（190410）
- 离开美即
- 我没想好
- 8月10日安静
- ［青春］翔（五）