HTML5新增的3種selector方法

1：queryselector()方法接收乙個css選擇符，返回與該模式匹配的第乙個元素，如果沒有找到匹配的元素，返回null。

lang="en">

charset="utf-8">
titletitle>
head>
style="height: 100%;">
class="box"
id="box"
style="height: 200px;">
class="list"
style="height:100px">
class="in"
style="height: 30px;">1li>
class="in"
style="height: 30px;"
title="test">2li>
class="in"
style="height: 30px;">3li>
ul>
div>
//因為沒有.null類名，所以返回null
var onull = document.queryselector('.null');
console.log(onull);//null
//通過標籤取得元素
var body = document.queryselector("body");
console.log(body.style.height);//100%
//通過id屬性取得元素
var obox = document.queryselector('#box');
console.log(obox.style.height);//200px
//通過結合元素的類選擇器取得元素
var olist = document.queryselector('ul.list');
console.log(olist.style.height);//100px
//通過類名取得元素
var oin = document.queryselector('.in');
console.log(oin.innerhtml);//1
//通過屬性選擇器取得元素
var otest = body.queryselector('[title="test"]');
console.log(otest.innerhtml);//2
script>
body>
html>2：queryselectorall()接收乙個css選擇符，返回乙個類陣列物件nodelist的例項。具體來說，返回的值實際上是帶有所有屬性和方法的nodelist，而其底層實現則類似於一組元素的快照，而非不斷對文件進行搜尋的動態查詢。這樣實現可以避免使用nodelist物件通常會引起的大多數效能問題。只要傳給queryselectorall()方法的css選擇符有效，該方法都會返回乙個nodelist物件，而不管找到多少匹配的元素
沒有匹配元素時，返回空的類陣列物件，而不是null 
lang="en">
charset="utf-8">
titletitle>
head>
style="height: 100%;">
class="box"
id="box"
style="height: 200px;">
class="list"
style="height:100px">
class="in"
style="height: 30px;">1li>
class="in"
style="height: 30px;"
title="test">2li>
class="in"
style="height: 30px;">3li>
ul>
div>
//返回
var onull = document.queryselectorall('.null');
console.log(onull);
//取得body元素
var body = document.queryselectorall("body")[0];
console.log(body.style.height);//100%
//取得所有class為"in"的元素
var oin = document.queryselectorall('.in');
for(var i = 0 ; i < oin.length; i++)
//取得title屬性為test的元素
3：matchesselector()方法接收乙個css選擇符引數，如果呼叫元素與該選擇符相匹配，返回true；否則返回false
function
matchesselector
(element,selector)
if(element.msmatchesselector)
if(element.mozmatchesselector)
if(element.webkitmatchesselector)
}console.log(matchesselector(document.body,'#test'));//true

與getelementbyid()和getelementsbytagname()方法不同，queryselector()和queryselectorall()方法得到的類陣列物件是非動態實時的

lang="en">

charset="utf-8">
titletitle>
head>
style="height: 100%;">
id="container">
1div>
2div>
div>
var container = document.getelementbyid('container');
var divone = container.queryselector('div:last-child');
var divall = container.queryselectorall('div');
console.log(container.children.length);//2
console.log(divone.innerhtml);//2
console.log(divall.length);//2
var newdiv = document.createelement('div');
newdiv.innerhtml = 3;
console.log(container.children.length);//3
//由於queryselector不是實時的，所以其儲存的仍然是原來第二個div的值
console.log(divone.innerhtml);//2
//由於queryselectorall不是實時的，所以仍然只儲存了兩個div元素
console.log(divall.length);//2
console.log(container.queryselector('div:last-child').innerhtml);//3
console.log(container.queryselectorall('div').length);//3
script>
body>
html>

HTML5新增內容

先附上原始碼 完成百分比 100 蘋果素有 水果之王 的美稱，它含有豐富的維生素c，能讓 細嫩 柔滑而白皙，蘋果 的做法很簡單，將蘋果去皮去核切塊後放入攪拌機攪成泥狀，乾性 的美眉在蘋果泥中加入新鮮的牛奶或蜂蜜，油性 的美眉則可加入少量蛋清，攪拌均勻後塗在臉上，敷10 15分鐘後洗淨，你會發現膚色有...

HTML5新增屬性

html5的input標籤新增了很多屬性，也是讓大家非常興奮的一件事，用簡單的乙個屬性搞定以前複雜的js驗證。input新增的這些屬性，使得html和js的分工更明確了，使用起來十分舒暢。size medium 新增屬性一 size autoconmplete autoconmplete可以賦值為 ...

HTML5新增語法

html5模式下的 doctype 文件寫法非常簡單，只需要通過一句簡單的 即可實現。比起 html4.01和xhtml2.0時的 doctype 文件寫法，html5模式下的 doctype 文件寫法更簡便。除了文件簡便，其編碼寫法也得到了簡化，只需要指定編碼方式即可。xhtml2.0對大小寫要求...