<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          js element類型的屬性和方法整理

          時間:?2017-12-21閱讀:?2235標簽:?element

          Element類型

          除了Document類型,我們Web編程中最常用的類型就是Element類型啦.Element 類型用于表現XML或HTML元素,提供了對元素標簽名,子節點,特性的訪問


          特征

          • nodeType值為1
          • nodeName為元素標簽名
          • nodeValue為null
          • parentNode可能是Document或Element
          • 子節點可能是Element,Text,Comment,ProcessingInstruction,CDATASection,EntityReference

          其中nodeName和tagName屬性返回相同的值,推薦使用tagName,則表義更清晰,值得注意的是返回值大小寫的問題,由于HTML中為答謝,而XML/XHTML則會與源代碼保持一致,所以比較時要統一大小寫形式.


          HTML元素

          HTML元素都由HTMLElement類型表示,不直接通過該類型,也是通過它的子類型表示.HTMLElement類型繼承自Element并且添加了一些屬性如下:

          • id 元素在文檔中的唯一標識符
          • title 元素的附加說明信息,一般為工具提示條顯示
          • lang 元素內容的語言代碼,很少使用
          • dir 語言方向,ltr為從左到右,rtl則相反
          • className 與元素class的特性對應,沒有設置為class則是因為class為ECMAScript的保留字

          注意以上屬性的修改并不是所有都會在頁面中直觀的表現出來,id和lang修改對用戶來說是不可見的(假設沒有css樣式),對title的修改則只會在鼠標移動到元素上時才會顯示出來(工具提示條),dir的修改則會在屬性重寫的那一刻立刻影響頁面中的文本,對className的修改則與是否關聯了不同的CSS樣式有關.


          特性

          HTML元素每個元素都有一個或多個特性,操作特性的DOM方法如下有三個:

          • getAttribute()
          • setAttribute()
          • removeAttribute()

          這三個方法可以針對任何特性使用,包括自定義特性.但是只有公認的特性才會添加到DOM元素屬性上,自定義的特性通常是不存在的(undefined),當然這里又要注意我們的”好朋友”IE啦,它會為自定義特性創建屬性.


          特殊特性

          主要針對getAttribute()方法講述一下特殊情況.

          有兩類特殊特性,有對應的屬性名,但值與getAttribute()返回的值并不相同

          • style,通過getAttribute()訪問會返回CSS文本,而通過屬性訪問返回一個對象
          • onclick這樣的事件處理程序,通過getAttribute()訪問會返回相應代碼的字符串.而屬性訪問時,則會返回一個JavaScript函數(未指定則為null)

          故通常只有取得自定義特性值的情況下,才會使用getAttribute()方法.

          注意!:我們的”老朋友”IE7及以前版本中,getAttribute()方法訪問上述兩個特殊特性時,返回的值與屬性的值相同.即getAttribute("style")返回一個對象,getAttribute("onclick")返回一個函數.


          設置特性

          這里主要講解下setAttribute()方法,這和getAttribute()相對應.這個方法接受兩個參數,要設置的特性名和值,如果特性存在則將值進行替換;不存在則創建并設置相應的值.
          值得注意的是,設置特性名會轉換為小寫.而且直接給DOM元素添加一個自定義的屬性并不會讓這個屬性成為元素的特性.

          div.mycolor="red";
          div.getAttribute("mycolor"); //這里返回null(IE除外)


          移除特性

          removeAttribute()方法用于徹底刪除元素特性,調用該方法會清除特性的值并完全刪除特性.
          注意!:IE6及以前版本不支持該方法.


          attributes屬性

          Element類型是使用attributes屬性的唯一一個DOM節點類型.在該屬性中包含一個NamedNodeMap,與NodeList類似,也是”動態”集合.元素每一個特性都由一個Attr節點表示,每個節點都保存在NamedNodeMap對象中.相關方法如下:

          • getNamedItem(name)返回nodeName屬性等于name的節點
          • removeNamedItem(name)從列表移除nodeName等于name的節點
          • setNamedItem(node)向列表添加節點,以節點的nodeName屬性為索引
          • item(pos)返回處于數字pos位置處的節點

          在該屬性中有一系列的節點,每個節點的nodeName就是特性的名稱,nodeValue就是特性的值.要取得元素的id特性,可以使用attributes.getNamedItem("id").nodeValue
          等同于attributes["id"].nodeValue

          調用removeNamedItem()與在元素上調用removeAttribute()效果相同.

          setNamedItem()是一個很不常用的方法,該方法可以為元素添加一個新特性,此外需要為它傳入一個特性節點.

          注意!:IE7及更早版本會返回HTML元素中所有可能的特性,包括沒指定的特性.
          針對低版本改進:每個特性節點都有一個名為specified的屬性,如果為true則意味著要么HTML中指定了相應特性,要么通過setAttribute()設置了該特性,在IE中未設置過的特性都為false,其他瀏覽器則不會為這類特性生成對應特性節點.


          創建元素

          document.createElement()方法就可創建新元素.
          該方法接受一個參數,就是元素標簽名,這個標簽名在HTML下不區分大小寫,XML中則會區分大小寫.

          在創建新元素的同時,新元素也設置了ownerDocument屬性,此時,還可以操作元素特性,為它添加更多的子節點.
          在設置完特性后,由于未添加到文檔樹,所以一切特性都不會影響瀏覽器的顯示.我們可以通過之前講到的appendChild(),insertBefore(),replaceChild()方法來進行相應的操作.
          一旦添加到文檔樹,則瀏覽器會立刻呈現該元素.此后我們的修改都會反應到瀏覽器中.
          注意!(常不考慮):在IE中我們可以通過另一種方式進行創建

          document.createElement("<div id=\"myNewDiv\" class=\"box\"></div>");

          這個方式可以避開IE7及更早版本中動態創建元素的某些問題.(不能設置動態創建的iframe元素的name特性;不能通過表單的reset()方法重設動態創建的input元素;動態創建的type特性值為”reset”的button元素重設不了表單;動態創建的一批name相同的單選按鈕彼此毫無關系)

          元素子節點
          除了IE,其他瀏覽器解析代碼時會解析空白符為文本節點.我們可以通過nodeType屬性的檢查來過濾掉它們


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/268

          Vue+Element-ui中按鍵事件綁定問題

          el-input綁定鍵盤事件不生效原因:element-ui是封裝組件所以el標簽是自定義標簽;表單只有一個輸入框時綁定enter鍵觸發事件時刷新頁面

          Js:element的模糊查詢

          在項目中會用到模糊查詢,之前在首頁是用的element的tree顯示的目錄,會有用到搜索,但tree里邊會有自帶的模糊查詢,用filter-node-method方法使用 但上次的項目中 又涉及到不試用插件的模糊搜索

          element ui tree控件父節點和子節點之間的關聯問題

          問題描述:當需改的時候如果父節點為選中狀態子節點不是全選中這樣會顯示為子節點為全選中狀態;在顯示復選框的情況下,是否嚴格的遵循父子不互相關聯的做法,默認為 false ;

          element-ui合并單元格

          例如一個時間段下對應多行數據,這就不免就涉及到了單元格合并,為每一個時間段下的 每一行 數據中都添加上對應的時間段數據 ,設定一個數組來存放要合并的格數

          Element ui 表格不對齊的解決方法

          當固定頭部時有時候表格不對齊,第一種情況:沒有水平滾動條,只有垂直滾動條;第二種情況:有垂直滾動條也有水平滾動條,特別是水平滾動條拖動到右邊時,表格不對齊更明顯

          vue 使用element-ui中的Notification自定義按鈕并實現關閉功能以及如何處理多個通知

          使用element-ui中的Notification,只有一個message屬性是有很大的操作空間,其余的都是寫死的,無法進行擴展,達不到想要的效果。所以只能在message上下功夫。在element-ui官方文檔中可以看到Notification中的message屬性

          使用element-ui中table expand展開行控制顯示隱藏

          在使用vue版本的ElementUI中的table功能的時候還是遇到了一些問題,可以說餓了么團隊在這個UI框架的文檔撰寫已經非常不錯了,不過還是有一些方法乍一看讓人摸不著頭腦,有些table的常用功能示例代碼提供的不是非常詳細

          ElementUI使用v-if控制tab標簽顯示遇到的Duplicate keys detected: xxx問題

          如果程序報錯Duplicate keys detected: tab-xxx. This may cause an update error.八成是key重復了,首先檢查一下v-for循環的key是否有問題;在<el-tab-pane>盡量不使用v-show控制標簽的顯示

          如何讓Element UI的Message消息提示每次只彈出一個?

          Element UI的Message消息提示是點擊一次觸發一次的。在開發的時候經常會作為一些校驗提示,但是公司的測試人員在進行測試時會一直點,然后就會出現如下圖的情況。雖然客戶使用的時候一般來說不會出現這種情況

          使用mixins,實現elementUI表單的全局驗證

          使用ElementUi搭建框架的時候,大家應該都有考慮過怎么做全局驗證,畢竟復制粘貼什么的是最煩了,一般驗證規則,主要是是否必填,不為空,以及參數類型的驗證。

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网