HTML DOM对象

JavaScript中操作DOM对象
DOM:Document Object Model （文档对象模型）

将HTML文件作为一个对象存在 -->Document
HTML中的每一个标签【元素】都是一个对象 -->Element
HTML中的每一个属性都是一个对象 --> Attribute
HTML中的每一个文本都是一个对象 -->Text

JS操作DOM–>通过JS来对HTML页面进行操作[增删改查]

如何通过JavaScript操作HTML?
在JavaScript中已经内置了一个document对象
当浏览器加载完整个HTML页面的时候，就会自动创建一个document对象
1.获得HTML页面中的标签

document.getElementById();
document.getElementsByName();
document.getElementsByTagName();
document.getElementsByClassName();
document.querySelecter("");
document.querySelecterAll("");

拿到父标签
let parent = 子标签对象.parentElement 标签转换成了文档对象

文档

 <a id="aa" href="http://www.baidu.com">这是超链接</a>

对象

let a={
id:“aa”,
href:“http://www.baidu.com”,
textContent:“这是超链接”
}

2.根据标签对象可以获得标签中的属性和文本
也可以修改标签中的属性值和文本的值

标签对象名.属性名 = 值;
let value = 标签对象名.属性名;

获得文本

let text = 标签对象名.textContent;
let text = 标签对象名.innerText;
let text = 标签对象名.innerHTML;

修改文本的值

标签对象名.textContent="";
标签对象名.innerText="";
标签对象名.innerHTML="";

3.增加标签

let 子标签 = document.createElement(“h2”);
父标签.append(子标签);
父标签.appendChild(子标签);

4.移除标签

父标签.removeChild(子标签);

事件：在页面上发生了一个操作
鼠标事件

onmousedown 鼠标按键按下
onmouseup 鼠标按键松开
onmouseenter 光标进入
onmouseout 光标离开
onclick 鼠标按键点击[按下+松开]

键盘事件

onkeypress
onkeydown
onkeyup

框架事件

onload 页面加载完成[页面在浏览器中完成显示过程]
onunload 页面卸载完成[浏览器关闭的时候，先清空浏览器中的页面数据]

表单事件

onblur 表单项失去焦点
onfoucs 表单项获得焦点
onchange 输入框内容发生改变
onsubmit 当提交按钮被点击

事件监听机制

给组件绑定一个监听器，用来监听对应的事件是否发生

监听谁？
监听什么事件？

给组件添加监听器

编写监听函数
//点击按钮的监听器方法
function ButtonAddNews(){
alert(“AAAAAAAAAAAA”);
}

给组件绑定事件监听器

<button onclick="ButtonAddNews()">添加</button>

事件的绑定方式：
1.在标签[组件]中定义一个 属性，属性的值绑定了一个JS代码

> `<button οnclick="ButtonAddNews()">添加</button>`

2.在JavaScript中动态绑定

  let btn = document.querySelecter("");
  btn.addEventListener("事件",回调函数);

比如：
btn.addEventListener(“click”,function(event){})

通过JS操作CSS
CSS的优先级

Style > ID选择器 > 类选择器 >标签选择器

1.通过style属性来修改css

DOM Style对象

标签对象.style.CSS属性=“值”;

注意：在JavaScript中CSS属性的写法和CSS中的属性写法不一样
CSS中多个单词使用 - 隔开

JavaScript中，使用驼峰命名法
font-size fontSize
margin-top marginTop
background-color backgroundColor

2.通过class属性/ID选择器 来重置选择器

标签对象.className=“类选择器1 类选择器2”
标签对象.id=“ID选择器”

JavaScript中的内置对象

DOM Document对象

document 表示整个html网页文档 document.body.clintWidth body标签的宽度
document.body.clintHeight body标签的高度

BOM对象 Browser对象

window对象 整个浏览器窗口

属性

window.innerWidth 浏览器的内部宽度
window.innerHeight 浏览器的内部高度[不包含标题栏，地址栏，状态栏等的高度]

方法：

window.alert(); 弹出提示框
window.close(); 关闭窗口
window.open()打开新窗口
window.open(“地址”)在新窗口中打开
window.open(“地址”,’_blank|_self|_top’) 在指定的位置打开页面
_blank 新窗口
_self 当前窗口

window.open(“地址”,’’，‘width=100,height=100’) 指定新窗口大小

let t = window.setTimeout(“函数”,1000) 延迟1000ms执行一次函数
let t = window.setInterval(“函数”,1000); 每间隔1000ms重复执行一次

window.clearTimeout(t) 结束指定的setTimeout
window.clearInterval(t) 结束指定的setInterval

Screen 屏幕对象

screen.availWidth 屏幕的分辨率宽度
screen.availHeight 屏幕的分辨率高度[不包含任务栏的高度] screen.width 屏幕的分辨率宽度
screen.height 屏幕的分辨率高度[包含任务栏高度]

Navigater

浏览器的相关信息
navigater.appName
navigator.appVersion
navigator.appCodeName

History 历史记录

history.back()
history.foward()
history.go(-2);