1.什么是window?
window：是一个全局对象, 代表浏览器中一个打开的窗口, 每个窗口都是一个window对象
2.什么是document?
document是window的一个属性, 这个属性是一个对象
document: 代表当前窗口中的整个网页,
document对象保存了网页上所有的内容, 通过document对象就可以操作网页上的内容
3.什么是DOM?
DOM 定义了访问和操作 HTML文档(网页)的标准方法
DOM全称: Document Object Model, 即文档模型对象
所以学习DOM就是学习如何通过document对象操作网页上的内容
console.log(window.document);
console.log(typeof window.document);
console.log(window.document.title);
<!--
1.在JavaScript中HTML标签也称之为DOM元素
2.使用document的时候前面不用加window
var num = 666;
window.num;
num;
同理可证
window.document;
document;
-->
<div class="father">
<form>
<input type="text" name="test">
<input type="password" name="test">
</form>
</div>
<div class="father" id="box">我是div</div>
<script>
1.通过id获取指定元素
由于id不可以重复, 所以找到了就会将找到的标签包装成一个对象返回给我们, 找不到就返回Null
注意点: DOM操作返回的是一个对象, 这个对象是宿主类型对象(浏览器提供的对象)
let oDiv = document.getElementById("box");
console.log(oDiv);
console.log(typeof oDiv);
2.通过class名称获取
由于class可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
let oDivs = document.getElementsByClassName("father");
console.log(oDivs);
3.通过name名称获取
由于name可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
注意点:
getElementsByName 在不同的浏览器其中工作方式不同。在IE和Opera中， getElementsByName() 方法还会返回那些 id 为指定值的元素。
let oDivs = document.getElementsByName("test");
console.log(oDivs);
4.通过标签名称获取
由于标签名称可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
let oDivs = document.getElementsByTagName("div");
console.log(oDivs);
5.通过选择器获取
querySelector只会返回根据指定选择器找到的第一个元素
// let oDiv = document.querySelector("#box");
// let oDiv = document.querySelector(".father");
let oDiv = document.querySelector("div>form");
console.log(oDiv);
6.通过选择器获取
querySelectorAll会返回指定选择器找到的所有元素
let oDivs = document.querySelectorAll(".father");
console.log(oDivs);
<div>
<h1>1</h1>
<h2>2</h2>
<p class="item">3</p>
<p>4</p>
<span>5</span>
</div>
<script>
1.获取指定元素所有的子元素
let oDiv = document.querySelector("div");
children属性获取到的是指定元素中所有的子元素
console.log(oDiv.children);
childNodes属性获取到的是指定元素中所有的节点
console.log(oDiv.childNodes);
for(let node of oDiv.childNodes){
// console.log(node.nodeType);
// if(node.nodeType === 1){
if(node.nodeType === Node.ELEMENT_NODE){
console.log(node);
}
}
2.什么是节点?
DOM对象(document), 这个对象以树的形式保存了界面上所有的内容
HTML页面每一部分都是由节点(标签(元素),文本,属性)
3.获取指定节点中的第一个子节点
let oDiv = document.querySelector("div");
console.log(oDiv.firstChild);
获取指定元素中的第一个子元素
console.log(oDiv.firstElementChild);
4.获取指定节点中最后一个子节点
console.log(oDiv.lastChild);
4.获取指定元素中最后一个子元素
console.log(oDiv.lastElementChild);
5.通过子元素获取父元素/父节点
let item = document.querySelector(".item");
console.log(item.parentElement);
console.log(item.parentNode);
let parentEle = item.parentElement || item.parentNode;
console.log(parentEle);
6.获取相邻上一个节点
console.log(item.previousSibling);
获取相邻上一个元素
console.log(item.previousElementSibling);
7.获取相邻下一个节点
console.log(item.nextSibling);
获取相邻下一个元素
console.log(item.nextElementSibling);
1.创建节点
let oSpan = document.createElement("span");
console.log(oSpan);
console.log(typeof oSpan);
2.添加节点
注意点: appendChild方法会将指定的元素添加到最后
let oDiv = document.querySelector("div");
oDiv.appendChild(oSpan)
let oA = document.createElement("a");
oDiv.appendChild(oA);
3.插入节点
let oSpan = document.createElement("span");
let oDiv = document.querySelector("div");
let oH1 = document.querySelector("h1");
let oP = document.querySelector("p");
oDiv.insertBefore(oSpan, oH1);
oDiv.insertBefore(oSpan, oP);
4.删除节点
注意点: 在js中如果想要删除某一个元素, 只能通过对应的父元素来删除
元素是不能够自杀的
console.log(oSpan.parentNode);
oSpan.parentNode.removeChild(oSpan);
oDiv.parentNode.removeChild(oDiv);
5.克隆节点
注意点: cloneNode方法默认不会克隆子元素, 如果想克隆子元素需要传递一个true
let oDiv = document.querySelector("div");
let newDiv = oDiv.cloneNode();
let newDiv = oDiv.cloneNode(true);
console.log(newDiv);
<body>
<img src="images/1.jpg" alt="我是alt222" title="我是title" nj="666">
<script>
/*
无论是通过document创建还是查询出来的标签,系统都会将元素包装成一个对象返回给我们,
系统在包装这个对象的时候会自动将元素的属性都包装到这个对象中,
所以只要拿到这个对象就可以拿到标签属性,操作标签属性
*/
/*
1.如何获取元素属性
2.如何修改元素属性
3.如何新增元素属性
4.如何删除元素属性
*/
/*
// let oImg = document.querySelector("img");
// let oImg = document.createElement("img");
console.dir(oImg);
*/
// 1.如何获取元素属性
/*
let oImg = document.querySelector("img");
// console.log(oImg.alt);
// console.log(oImg.getAttribute("alt"));
// 注意点: 通过对象.属性名称的方式无法获取到自定义属性的取值
// 通过getAttribute方法可以获取到自定义属性的取值
console.log(oImg.nj);
console.log(oImg.getAttribute("nj"));
*/
// 2.如何修改元素属性
/*
let oImg = document.querySelector("img");
// oImg.title = "新的title";
// oImg.setAttribute("title", "新的title222");
// 注意点和获取元素属性一样
// oImg.nj = "123";
oImg.setAttribute("nj", "123");
*/
// 3.如何新增元素属性
/*
let oImg = document.querySelector("img");
// oImg.it666 = "itzb";
// 注意点: setAttribute方法如果属性不存在就是新增, 如果属性存在就是修改
oImg.setAttribute("it666", "itzb");
*/
// 4.如何删除元素属性
let oImg = document.querySelector("img");
// oImg.alt = "";
// oImg.removeAttribute("alt");
// 注意点和获取元素属性一样
// oImg.nj = "";
oImg.removeAttribute("nj");
<div>
我是div
<h1>我是标题</h1>
<p>我是段落</p>
</div>
<script>
1.获取元素内容
1.innerHTML获取的内容包含标签, innerText/textContent获取的内容不包含标签
2.innerHTML/textContent获取的内容不会去除两端的空格, innerText获取的内容会 去除两端的空格
let oDiv = document.querySelector("div");
console.log(oDiv.innerHTML);
console.log(oDiv.innerText);
console.log(oDiv.textContent);
2.设置元素内容
特点:
无论通过innerHTML/innerText/textContent设置内容, 新的内容都会覆盖原有的内 容
区别:
如果通过innerHTML设置数据, 数据中包含标签, 会转换成标签之后再添加
如果通过innerText/textContent设置数据, 数据中包含标签, 不会转换成标签, 会当 做一个字符串直接设置
let oDiv = document.querySelector("div");
oDiv.innerHTML = "123";
oDiv.innerText = "456";
oDiv.textContent = "789";
oDiv.innerHTML = "<span>我是span</span>";
oDiv.innerText = "<span>我是span</span>";
oDiv.textContent = "<span>我是span</span>";
setText(oDiv, "www.it666.com");
function setText(obj, text) {
if("textContent" in obj){
obj.textContent = text;
}else{
obj.innerText = text;
}
}
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
1.设置元素样式
let oDiv = document.querySelector("div");
第一种方式
// 注意点: 由于class在JS中是一个关键字, 所以叫做className
// oDiv.className = "box";
第二种方式
// 注意点: 过去CSS中通过-连接的样式, 在JS中都是驼峰命名
// 注意点: 通过JS添加的样式都是行内样式, 会覆盖掉同名的CSS样式
oDiv.style.width = "300px";
oDiv.style.height = "300px";
oDiv.style.backgroundColor = "blue";
2.获取元素样式
let oDiv = document.querySelector("div");
// oDiv.style.width = "300px";
// 注意点: 通过style属性只能过去到行内样式的属性值, 获取不到CSS设置的属性值
// console.log(oDiv.style.width);
// 注意点: 如果想获取到CSS设置的属性值, 必须通过getComputedStyle方法来获取
// getComputedStyle方法接收一个参数, 这个参数就是要获取的元素对象
// getComputedStyle方法返回一个对象, 这个对象中就保存了CSS设置的样式和属性值
let style = window.getComputedStyle(oDiv);
console.log(style.width);
<body>
<button>我是按钮</button>
<a href="http://www.it666.com">我是a标签</a>
<script>
1.什么是事件?
用户和浏览器之间的交互行为我们就称之为事件, 比如：点击，移入/移出
2.如何给元素绑定事件?
在JavaScript中所有的HTML标签都可以添加事件
元素.事件名称 = function(){};
当对应事件被触发时候就会自动执行function中的代码
let oBtn = document.querySelector("button");
oBtn.onclick = function () {
alert("按钮被点击了");
}
// 注意点: 如果给元素添加了和系统同名的事件, 我们添加的事件不会覆盖系统添加的事件
let oA = document.querySelector("a");
oA.onclick = function () {
alert("a标签被点击了");
// 以下代码的含义: 用我们添加的事件覆盖掉系统同名的事件
return false;
}
<body>
<button id="start">开始</button>
<button id="close">结束</button>
<script>
在JavaScript中有两种定时器, 一种是重复执行的定时器, 一种是只执行一次的定时器
1.重复执行的定时器
// setInterval(function () {
// console.log("随便写点");
// }, 1000);
let startBtn = document.querySelector("#start");
let id = null;
startBtn.onclick = function () {
id = setInterval(function () {
console.log("随便写点");
}, 1000);
}
let closeBtn = document.querySelector("#close");
closeBtn.onclick = function () {
clearInterval(id);
}
2.只执行一次的定时器
// window.setTimeout(function () {
// console.log("随便写点");
// }, 5000);
let startBtn = document.querySelector("#start");
let closeBtn = document.querySelector("#close");
let id = null;
startBtn.onclick = function () {
id = window.setTimeout(function () {
console.log("随便写点");
}, 5000);
}
closeBtn.onclick = function () {
clearTimeout(id);
}
网友评论