querySelectorAll()的作用是:按文檔順序返回指定元素節(jié)點的子樹中匹配選擇器的元素集合,如果沒有匹配返回空集合。相關延伸: 在傳統(tǒng)的 JavaScript 開發(fā)中,查找 DOM 往往是開發(fā)人員遇到的第一個頭疼的問題,原生的 JavaScript 所提供的 DOM 選擇方法并不多,僅僅局限于通過 tag, name, id 等方式來查找,這顯然是遠遠不夠的,如果想要進行更為精確的選擇不得不使用看起來非常繁瑣的正則表達式,或者使用某個庫。 事實上,現(xiàn)在所有的瀏覽器廠商都提供了 querySelector 和 querySelectorAll 這兩個方法的支持,甚至就連微軟也派出了 IE 8 作為支持這一特性的代表,querySelector 和 querySelectorAll 作為查找 DOM 的又一途徑,極大地方便了開發(fā)者,使用它們,你可以像使用 CSS 選擇器一樣快速地查找到你需要的節(jié)點。用法:document.querySelectorAll("#test")[0];document.querySelectorAll("div.test>p:first-child")[0];document.querySelectorAll( '.test span' ); 瀏覽器兼容性: 雖然有些問題,但瑕不掩瑜,這么好用的兩個方法咋沒火呢?瀏覽器兼容性。。。其實比起一些HTML5和CSS3的特性來說這兩個方法還沒那么讓人絕望,因為IE8都已經(jīng)支持了,其它各個主力主流瀏覽器自然是實現(xiàn)了。IE8+FirefoxChromeSafariOperaAndroid所以如果你是針對Mobile web優(yōu)化,不要引用jQuery了,直接使用這兩個方法就可以。
CSS是一種用于屏幕上渲染html,xml等一種語言,CSS主要是在相應的元素中應用樣式,來渲染相對應用的元素,那么這樣我們選擇相應的元素就很重要了,如何選擇對應的元素,此時就需要我們所說的選擇器。在 CSS 中,選擇器是一種模式,用于選擇需要添加樣式的元素。選擇器主要是用來確定html的樹形結構中的DOM元素節(jié)點。
1、css3新增的超級選擇器:屬性選擇器、結構性偽類選擇器、UI元素狀態(tài)偽類選擇器、通用兄弟元素選擇器
2、使用選擇器在頁面中插入文字、圖片、項目編號等內(nèi)容
3、文字陰影與自動換行
4、各類盒模型:總體分為block類型和in line類型,在細分為inline-block類型、inline-table類型、list-item類型、run-in類型、compact類型、表格相關類型、none類型
5、盒模型相關的屬性:overflow屬性(內(nèi)容溢出)、box-shadow屬性(盒陰影)、box-sizing屬性(寬高計算)
6、新增的背景樣式backround-clip屬性、backround-origin屬性、backround-size屬性、backround-break屬性
7、新增的邊框樣式:border-radius屬性(圓角邊框)、border-image屬性(圖片邊框)
8、新增的 transform變形功能:rotate(旋轉)、scale(縮放)、skew(傾斜)、translate(移動)
9、新增的動畫功能:transition(平滑過渡)、animation(關鍵幀)
10、布局相關樣式:多欄布局、盒布局、彈性盒布局
11、兼容性問題
>10 CSS類選擇器也就是選擇html編碼中標明為特定Class(類)的元素.如<p Class="mytest">這是我要編輯的段落</p>,在CSS文件中可用 .mytest{ }來表達想要顯示的樣式。簡單地說,CSS類選擇器用" . "做前綴。