vue click時獲取與操作父、子、兄弟元素


methods: { click(event){ // 當前點擊的元素 event.target; // 綁定事件的元素 event.currentTarget; // (target與currentTarget的區別主要體現在使用事件委托時,發生事件委托時, // 點擊的元素與綁定事件的元素非同一元素,反之不發生事件委托時,兩者相同,是同一元素) // 獲得綁定事件元素的前一個節點信息(包含元素節點、屬性節點、文本節點、注釋節點) event.currentTarget.previousSibling; // 獲得綁定事件元素的前一個元素節點(只包含元素節點,只有html內容) event.currentTarget.previousElementSibling; // 下一個元素信息獲取使用 nextSibling、nextElementSibling // 獲得綁定事件元素的父節點信息 event.currentTarget.parentNode; // 獲得綁定事件元素的父級元素 event.currentTarget.parentElement; // 獲得綁定事件元素的第一個子節點信息 event.currentTarget.firstChild; // 獲得綁定事件元素的第一個子元素 event.currentTarget.firstElementChild; // 獲得綁定事件元素中id為ceshi的元素集合 event.currentTarget.getElementById("ceshi"); // 獲得綁定事件元素中class為ceshi的元素集合 event.currentTarget.getElementsByClassName("ceshi"); // 獲得綁定事件元素的的內容(類似jquery的text()) event.currentTarget.textContent; // 獲得綁定事件元素的的內容(類似jquery的html()) event.currentTarget.innerHTML; // 獲得綁定事件元素的ceshi屬性(類似jquery的attr('ceshi')) event.currentTarget.getAttributeNode("ceshi"); // 點擊刪除當前元素 event.currentTarget.parentElement.removeChild(event.currentTarget); // 點擊刪除當前元素的父級元素 event.currentTarget.parentElement.parentElement.removeChild(event.currentTarget.parentElement); } }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM