JavaScript contains()
此方法判斷指定節點是否是當前節點的後代。
如果是,此方法返回true,否則返回false。
contains()方法具有一些特別之處,後面會通過程式碼例項演示。
語法結構:
[JavaScript] 純文字檢視 複製程式碼let result = node.contains(otherNode)
引數解析:
(1).otherNode:節點物件,判斷它是否被node節點包含。
瀏覽器支援:
(1).IE9+瀏覽器支援此方法。
(2).edge瀏覽器支援此方法。
(3).谷歌瀏覽器支援此方法。
(4).opera瀏覽器支援此方法。
(5).火狐瀏覽器支援此方法。
(6).safria瀏覽器支援此方法。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #box{ width:200px; height:150px; background-color:#ccc; } #middle{ width:150px; height:100px; background-color:blue; } #inner{ width:100px; height:50px; background-color:red; text-align: center; line-height: 50px; } </style> <script> window.onload = () => { let obox=document.getElementById("box"); let omiddle=document.getElementById("middle"); let oinner=document.getElementById("inner"); oinner.innerHTML=obox.contains(oinner); } </script> </head> <body> <div id="box"> <div id="middle"> <div id="inner"></div> </div> </div> </body> </html>
inner很明顯是box的後代,所以contains()方法的返回值為true。
程式碼執行效果截圖如下:
再來看一段程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #box{ width:200px; height:50px; background-color:#ccc; } </style> <script> window.onload = () => { let obox=document.getElementById("box"); let oshow=document.getElementById("show"); let otxt=obox.firstChild; oshow.innerHTML=obox.contains(otxt); } </script> </head> <body> <div id="box">螞蟻部落</div> <span id="show"></span> </body> </html>
程式碼執行效果截圖如下:
很多朋友第一感覺就是,後代節點是元素節點。
事實並非如此,上述程式碼中,div元素中是一個文字節點。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #box{ width:200px; height:50px; background-color:#ccc; } </style> <script> window.onload = () => { let obox=document.getElementById("box"); let oshow=document.getElementById("show"); oshow.innerHTML=obox.contains(obox); } </script> </head> <body> <div id="box">螞蟻部落</div> <span id="show"></span> </body> </html>
程式碼執行效果截圖如下:
上述程式碼中,方法的引數是當前節點自身。
返回值同樣是true,可見此方法確實是比較博愛的。
相關文章
- javascript contains方法JavaScriptAI
- jQuery :contains()jQueryAI
- jQuery.contains()jQueryAI
- sga contains infomation (71)AI
- a control file contains informationAIORM
- 轉:ArrayList:用Set代替containsAI
- 全文索引——CONTAINS 語法索引AI
- LeetCode-Contains Duplicate IILeetCodeAI
- java——ArrayList中contains()方法中的疑問JavaAI
- leetcode 219. Contains Duplicate IILeetCodeAI
- list is not in GROUP BY clause and contains nonaggre的問題AI
- [LintCode/LeetCode] Contains Duplicate IIILeetCodeAI
- Swift中使用Contains的正確姿勢SwiftAI
- [easy][Array][HashTable]219.Contains Duplicate IIAI
- 217. Contains Duplicate--LeetCode RecordAILeetCode
- contains a file system with errors, check forced解決方法AIError
- Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggreExpressAI
- 關於'CALayer position contains NaN: [nan nan]'異常AINaN
- LINQ系列:LINQ to SQL Exists/In/Any/All/ContainsSQLAI
- POXPOEPO Supplier Contact Field List Of Values Contains No EntriesAI
- 【AD報錯】GND contains Output Pin and Power Pin objectsAIObject
- C# 有關List<T>的Contains與Equals方法C#AI
- ORA-22868: table with LOBs contains segments in different tablespacesAI
- ORA-16025: contains repeated or conflictingAI
- ORA-03297: file contains used data beyond requested RESIZE valueAI
- ArrayList的contains方法與Object的equals方法的關係AIObject
- 00017: Data frame has at least one annotation group that is enabled and contains graphicsASTAI
- WPF custom control contains datagrid,listbox,imageAI
- mysql報錯:Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggreMySqlExpressAI
- List中對比Contains, Exists, Any之間的優缺點AI
- Android出現:Your project path contains non-ASCII characters.AndroidProjectAIASCII
- ORA-16025: contains repeated or conflicting attributesAI
- ef8 Contains 查詢條件 報錯 $ 附近錯誤AI
- WP網站地圖XML報錯This page contains the following errors:網站地圖XMLAIError
- [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains 的問題 MySQLExpressAIMySql
- [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregated cExpressAI
- 解決mybatis出現Mapped Statements collection already contains value for問題MyBatisAPPAI
- Can GoldenGate Replicate An Oracle Table That Contains Only CLOB Column(s)? (Doc ID 971833.1)GoOracleAI