甚么是DOM?
1.甚么是window?
window：是两个自上而下第一类, 代表者应用程序中两个关上的询问处, 每一询问处都是两个window第一类
2.甚么是document?
document是window的两个特性, 那个特性是两个第一类
document: 代表者现阶段询问处中的整座页面,
document第一类留存了页面上大部份的文本, 透过document第一类就能操作方式页面上的文本
3.甚么是DOM?
DOM 表述了出访和操作 HTML文件格式(页面)的国际标准方式
DOM全名: Document Object Model, 即文件格式数学模型第一类
因此自学DOM是自学怎样透过document第一类操作方式页面上的文本1.在JavaScript中HTML条码也称作DOM原素
2.采用document的这时候后面不必加windowvar num = 666;
window.num;
num;
//同理可证
window.document;
document;
由于id不能重复, 因此找到了就会将找到的条码包装成两个第一类返回给我们, 找不到就返回Null
注意点: DOM操作方式返回的是两个第一类, 那个第一类是宿主类型第一类(应用程序提供的第一类) let oDiv = document.getElementById(“box”);
console.log(oDiv);
console.log(typeof oDiv);
由于class能重复, 因此找到了就返回两个存储了条码第一类的数组, 找不到就返回两个空数组
let oDivs = document.getElementsByClassName(“father”);
console.log(oDivs);
由于name能重复, 因此找到了就返回两个存储了条码第一类的数组, 找不到就返回两个空数组
注意点:
getElementsByName 在不同的浏览器其中工作方式不同。在IE和Opera中，getElementsByName() 方式还会返回那些 id 为指定值的原素。 let oDivs = document.getElementsByName(“test”);
console.log(oDivs);
由于条码名称能重复, 因此找到了就返回两个存储了条码第一类的数组, 找不到就返回两个空数组
let oDivs = document.getElementsByTagName(“div”);
console.log(oDivs);
querySelector只会返回根据指定选择器找到的第两个原素
// let oDiv = document.querySelector(“#box”); // let oDiv = document.querySelector(“.father”);
let oDiv = document.querySelector(“div>form”);
console.log(oDiv);
querySelectorAll会返回指定选择器找到的大部份原素
let oDiv = document.querySelector(“div”);
// console.log(oDiv.children);
// childNo // 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页面每一部分都是由节点(条码(原素),文本,特性)
let oDiv = document.querySelector(“div”);
console.log(oDiv.firstChild);
console.log(oDiv.firstElementChild);
console.log(oDiv.lastChild);
console.log(oDiv.lastElementChild);
let item = document.querySelector(“.item”);
console.log(item.parentElement);
// console.log(item.parentNode); // let parentEle = item.parentElement || item.parentNode;
// console.log(parentEle);
console.log(item.previousSibling);
// console.log(item.previousElementSibling);
console.log(item.nextSibling);
console.log(item.nextElementSibling);节点增删改查
<body>
<div>
<h1>我是标题</h1>
<p>我是段落</p>
</div>
<script>
// 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);
// 5.删除节点
// 注意点: 在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);
</script>
</body>
原素特性操作方式
无论是透过document创建还是查询出来的条码,系统都会将原素包装成两个第一类返回给我们,
系统在包装那个第一类的这时候会自动将原素的特性都包装到那个第一类中,
因此只要拿到那个第一类就能拿到条码特性,操作方式条码特性let oImg = document.querySelector(“img”);
// let oImg = document.createElement(“img”); console.dir(oImg);
let oImg = document.querySelector(“img”);
console.log(oImg.alt);
// console.log(oImg.getAttribute(“alt”));
// 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”);
原素文本操作方式
<body>
<div>
我是div
<h1>我是标题</h1>
<p>我是段落</p>
</div>
<script>
/*
2 */
/*
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;
}
}
</script>
</body>
操作方式原素样式
<head>
<meta charset=“UTF-8”>
<title>07-JavaScript-操作方式原素样式</title>
<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”; */
let oDiv = document.querySelector(“div”);
// oDiv.style.width = “300px”; // console.log(oDiv.style.width);
// 注意点: // getComputedStyle方式返回两个第一类, 那个第一类中就留存了CSS设置的样式和特性值 let style = window.getComputedStyle(oDiv);
console.log(style.width);
</script>
</body>
DOM事件
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;
}
