a標籤點擊不跳轉
一旦給a標籤添加點擊事件
那麼點擊事件會執行的的同時 a標籤也會實現跳轉效果
這樣用戶體驗很不好
如何解決a標籤點擊跳轉問題:
1.把a標籤的href改成 javaScript:;(不知道鏈接該寫什麼時 可以寫這個)
<a href="javaScript:;">點擊切換圖片</a>
2.在a標籤的點擊事件裏面 return false;(推薦使用的)
var alink=document.getElementsByTagName("a")[0];
var img=document.getElementsByTagName("img")[0];
alink.onclick=function () {
img.src="image/ww.jpg"
return false; //控制a標籤的點擊事件 是否跳轉
}
innerHTML和innerText 屬性
都是能夠設置和獲取標籤內部內容的
但是使用上有一定的區別
元素.innerHTML:
獲取:
獲取當前標籤內部所有的內容 以字符串返回
btnArr[0].onclick=function () {
console.log(box.innerHTML);
}
設置:
能替換當前標籤內部所有內容 變成新設置的內容
如果新內容內部包含標籤 則直接會渲染到頁面上顯示
btnArr[2].onclick=function () {
// box.innerHTML="我是新來innerHTML的內容";
box.innerHTML="<h1>我是新來innerHTML的內容</h1>";
}
元素.innerText:
獲取:
獲取當前標籤內部所有的文本內容(不包括標籤本身)(包括所有後代的文本)
btnArr[1].onclick=function () {
console.log(box.innerText);
}
設置:
能替換當前標籤內部所有內容 變成新設置的內容
如果新內容內部包含標籤 也不會渲染出標籤效果
而是 原封不動的直接渲染文本到頁面上
btnArr[3].onclick=function () {
box.innerText="<h1>我是新來的innerText內容</h1>";
}
標籤的屬性操作
通過className爲元素設置 類名
但是 這個並不是真正的 修改標籤上面的class
真正操作標籤上面跟class等同的屬性 是 setAttribute()方法
所以想要真正獲取頁面標籤上面那個屬性 就是 getAttribute()方法
所以標籤屬性操作的方法有:
標籤對象.getAttribute("屬性名")
根據標籤屬性名 獲取標籤屬性值
標籤對象.setAttribute("屬性名","屬性值")
爲標籤新增一個屬性 屬性名和屬性值自定義
如果該屬性名不存在 則增加
如果屬性名存在 則在原有基礎上修改爲新值
btnArr[0].onclick=function () {
// box.className="pox";
// console.log(box.title);//我是一個盒子
/* console.log(box.id);//box
console.log(box.class);//undefined
console.log(box.className);//pox*/
// console.log(box.aaa);//undefined
/* console.log(box.getAttribute("aaa"));//哈哈
console.log(box.getAttribute("class"));//pox*/
box.setAttribute("qqq","自己新增的,雖然沒什麼用");
box.setAttribute("aaa","修改值");
// 別忘記原來還有一個類名 可以一起帶上 防止丟類名
bo
標籤對象.removeAttribute("屬性名")
根據標籤的屬性名 刪除一個標籤屬性
btnArr[1].onclick=function () {
box.removeAttribute("qqq");
}
修改操作
btnArr[2].onclick=function () {
box.setAttribute("qqq","我把qqq修改了")
}
標籤屬性操作和對象直接點調用屬性操作有什麼區別?
例如:
對象.getAttribute("屬性名")
和
對象.屬性名
有什麼區別
如果該屬性名是 這個標籤本身自帶的 (比如: id title style)
那麼 這兩個都能獲取到
如果該屬性名不是 這個標籤本身自帶的 (比如: aaa haha 自定義那些)
那麼 只有對象.getAttribute能獲取
節點訪問關係
就是指通過 其中一兩個節點 然後經過節點之間的關係找到其他節點
比如:
父節點 子節點 兄弟節點
所謂節點就是頁面組成dom的那些標籤和標籤之間的文本
節點都有那些類型:
文本節點:
標籤和標籤之間的回車換行 或者標籤內部的文本
元素節點:
標籤本身就是一個元素節點
屬性節點:
標籤上面的屬性 就叫屬性節點
節點訪問關係:
獲取父節點 獲取子節點 獲取兄弟節點
獲取父節點: 沒有兼容問題
var 父節點= 節點對象.parentNode;
獲取兄弟節點:
var 上一個兄弟=節點對象.previousSibling;
在谷歌/火狐/IE9+
獲取上一個兄弟節點(包括文本節點)
在IE8及以下
直接獲取上一個兄弟元素節點(不包括文本節點)
var 上一個兄弟=節點對象.previousElementSibling
在谷歌/火狐/IE9+
直接獲取上一個兄弟元素節點(不包括文本節點)
在IE8及以下
返回undefined
// 兼容性寫法
var previous=ele.previousElementSibling || ele.previousSibling
獲取下一個兄弟節點:
效果跟上面的一毛一樣
var next=ele.nextElementSibling || ele.nextSibling
獲取單個子節點:
獲取第一個子節點
var 第一個子節點=父節點.firstChild;
谷歌/火狐/IE9+
獲取第一個子節點(包含文本節點)
IE8及以下
直接獲取第一個元素子節點(不包含文本節點)
var 第一個子節點=父節點.firstElementChild;
谷歌/火狐/IE9+
直接獲取第一個元素子節點(不包含文本節點)
IE8及以下
返回undefined
兼容性寫法:
var 第一個子節點=父節點.firstElementChild || 父節點.firstChild;
獲取最後一個子節點:
效果同上 一毛一樣
兼容性寫法
var 最後一個子節點=父節點.lastElementChild || 父節點.lastChild;
獲取所有子節點:
var 僞數組= 父節點.childNodes;(W3C親兒子 官方推薦使用的屬性)
childNodes屬性返回所有子節點 (包含文本節點)
在谷歌/火狐/IE9+
獲取所有子節點(包含文本節點)
在IE8及以下
直接獲取所有的元素子節點
var 僞數組=父節點.children;(不是官方推薦的)
直接返回所有的元素子節點
注意:
在IE8及以下 如果子節點中有註釋節點 也能夠獲取到
獲取任意兄弟節點
節點自己.parentNode.children[索引值]
var pinner=document.getElementById("inner");
var pox=document.getElementById("pox");
var box=pox.parentNode;
// 獲取父節點
// var box=pinner.parentNode;
// console.log(box);
// var ul=pox.previousSibling;
// var ul=pox.previousElementSibling;
// var ul=pox.previousElementSibling || pox.previousSibling;
// console.log(ul);
// var ol=pox.nextElementSibling || pox.nextSibling;
// console.log(ol);
/*var first=box.firstElementChild || box.firstChild;
console.log(first);*/
// var last=box.lastElementChild || box.lastChild;
// console.log(last);
/*var childArr=box.childNodes;
// console.log(childArr);
for(var i=0;i<childArr.length;i++){
console.log(childArr[i]);
// childArr[i].style.color="hotpink";// Cannot set property 'color' of undefined
//Cannot set property 'color' of undefined 不能爲undefined綁定color屬性
// if(childArr[i].nodeType==1){
//// ==1 表示當前節點是元素節點
// childArr[i].style.color="hotpink";
// }
}*/
/* var per;
console.log(per);
console.log(per.name);// Cannot read property 'name' of undefined*/
/*var childArr=box.children;
for(var i=0;i<childArr.length;i++){
console.log(childArr[i]);
}*/
console.log(pox.parentNode.children[0]);
console.log(pox.parentNode.children[1]);
獲取父節點
var pp=document.getElementById("pp");
var box=pp.parentNode;
獲取上一個兄弟節點
節點對象.previousElementSibling
獲取下一個兄弟節點
節點對象.nextElementSibling
獲取第一個子節點對象
父節點.firstElementChild
獲取最後一個子節點對象
父節點.lastElementChild
獲取所有子節點對象 返回一個僞數組 可以取任意的子節點
父節點.children;
獲取任意子節點:
父節點.children[index];
獲取所有兄弟節點的封裝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="box">
<li>外面的熊孩子真多</li>
<li>真的好吵</li>
<li id="inner">沒變聲真的很可怕</li>
<li>算了忍一忍把</li>
<li>就這樣把</li>
</ul>
<script>
var inner=document.getElementById("inner");
console.log(getAllSiblings(inner));
function getAllSiblings(ele) {
// 獲取當前元素的父元素的所有子元素
var allChild=ele.parentNode.children;
var siblingsArr=[];
for(var i=0;i<allChild.length;i++){
if(allChild[i]!=ele){
// 如果遍歷到的子元素 不是自己 就表示 是 兄弟
//那麼就放入數組中
siblingsArr.push(allChild[i]);
}
}
return siblingsArr;
}
</script>
</body>
</html>
Dom的增刪改查
dom操作都是獲取(查詢)dom
1.獲取頁面元素的5種方式(獲取dom)
2.節點訪問關係(查詢dom)
所以這兩個操作都算是 dom節點增刪改查中的查
那麼接下來 講解 增刪改操作:
1.增加節點:
創建節點對象:
var 新節點對象= document.createElement("標籤名")
方法調用者 只能是document
拼接節點對象
父節點.appendChild(新節點對象);
將新節點拼接到父節點的最後一個子元素後面
父節點.insertBefore(新節點對象,參考的老節點對象)
在老節點對象之前拼接一個新節點
var btnArr=document.getElementsByTagName("button");
var box=document.getElementById("box");
var ul=box.lastElementChild;
var num=0;
btnArr[0].onclick=function () {
// 創建節點對象
var newH1=document.createElement("h1");
// console.log(newH1);//沒有內容的空h1
newH1.innerHTML="我是新來的-->"+(++num);
// console.log(newH1);
// 把h1拼接到頁面上
// box.appendChild(newH1);
// 拼接到ul之前
box.insertBefore(newH1,ul);
}
2.刪除節點:
父節點.removeChild(子節點對象)
將子節點從當前父節點中刪除
var btnArr=document.getElementsByTagName("button");
var box=document.getElementById("box");
var ul=box.lastElementChild;
var num=0;
tnArr[1].onclick=function () {
// 刪除節點
// box.removeChild(ul);
// 每次點擊都刪除最後一個子節點
box.removeChild(box.lastElementChild)
}
3.修改節點:
節點替換:
父節點.replaceChild(新節點對象,被替換的老節點)
把老節點替換成新節點對象
box.replaceChild(newOl,ul);
}
節點克隆
節點自己.cloneNode(布爾值) 布爾值默認false
拷貝一個節點對象
布爾值是false時: 只克隆標籤本身 不包含內部內容(淺克隆)
布爾值是true時: 克隆標籤本身和內容所有內容(深克隆)
btnArr[3].onclick=function () {
var cloneUl=ul.cloneNode(true);
// console.log(cloneUl);
box.appendChild(cloneUl)
}
元素的屬性節點操作:
點對象.nodeType==1 表示當前節點是元素節點
節點對象.nodeType==2 表示當前節點是屬性節點
節點對象.nodeType==3 表示當前節點是文本節點
獲取一個元素節點中指定的屬性節點
元素節點對象.getAttributeNode("屬性名");
增加或修改一個屬性節點的值
元素節點對象.setAttribute("屬性名","屬性值")
如果該屬性不存在 則增加該屬性
如果該屬性存在 則修改該屬性的值
刪除一個屬性節點
元素節點對象.removeAttribute("屬性名")
獲取屬性節點的值:
元素節點對象.getAttribute("屬性名")
如果屬性節點不存在 則返回null
var box=document.getElementById("box");
var btn=document.getElementsByTagName("button")[0];
var btn1=document.getElementsByTagName("button")[1];
var firstTextNode=box.firstChild;
/*// 文本節點
console.log(firstTextNode.nodeType);
// 元素節點
console.log(box.nodeType);
// 返回當前元素節點中指定的屬性節點(根據屬性名獲取)
var titleNode=box.getAttributeNode("title");
console.log(titleNode.nodeType);*/
btn.onclick=function () {
/* box.setAttribute("title","改成新的提示");
box.setAttribute("hahaa","呵呵")*/
// box.removeAttribute("title");
/* console.log(box.getAttribute("title"));
//
console.log(box.getAttribute("class"));*/
// box.setAttribute("location","底商37號")
// box.setAttribute("title","底商37號")
// box.setAttribute("class","haha")
// console.log(box.getAttribute("age"));
// box.setAttribute("qq","hehe")
// box.setAttribute("class","box")
}
btn1.onclick=function () {
// console.log(typeof box);
/*box.name="小強";
box.age=16;
box.show=function () {
console.log("請不要秀");
}
console.log(box.name);
console.log(box.age);
box.show();*/
// console.log(box.location);
// console.log(box.title);
// console.log(box.className);
// box.age=16;
box.qqq="哈哈";
}
關於對象屬性和節點屬性
* 關於對象屬性和節點屬性: * * * 對象就是對象的 * * * 節點就是節點 * * 完全沒有半毛錢關係 * * * * box本身是一個內存中普普通通的一個對象 * 可以綁定屬性 可以綁定方法 該怎麼調用就怎麼調用 * 跟原來我們一直操作的那個per 差不多 * * * 但是box還有一層身份 是一個頁面的元素節點 * 那麼作爲元素節點 可以調用 dom那些屬性 * 也就是元素節點帶的那些屬性 box.style * box.setAttribute * box.getAttribute * * 所以對象的操作就是對象的方式獲取和設置 * * 元素節點的操作就用元素節點的方式獲取和設置 * * 完全沒有關係 * * * 但是 一些特殊的屬性 是系統自動很好心的幫助我們獲取了 * * 比如: box.title box.style box.id
nodeType nodeName nodeValue
元素節點
console.log("元素節點的nodeType:",box.nodeType);
console.log("元素節點的nodeName:",box.nodeName);
console.log("元素節點的nodeValue:",box.nodeValue);
/*
* nodeType是1 表示節點
* nodeName 返回當前元素節點標籤名大寫(有用!)
* nodeValue 沒用
文本節點
var textNode=box.firstChild;
console.log("文本節點的nodeType:",textNode.nodeType);
console.log("文本節點的nodeName:",textNode.nodeName);
console.log("文本節點的nodeValue:",textNode.nodeValue);
文本節點的nodeType: 3
文本節點的nodeName: #text
文本節點的nodeValue:
都沒用
屬性節點
var attrNode=box.getAttributeNode("title");
console.log("屬性節點的nodeType:",attrNode.nodeType);
console.log("屬性節點的nodeName:",attrNode.nodeName);
console.log("屬性節點的nodeValue:",attrNode.nodeValue);
屬性節點的 nodeType是2
屬性節點的nodeName是當前屬性名
屬性節點的nodeValue是當前屬性值
所以nodeName和nodeValue是專門給屬性節點用的