1.查询节点 document
1.document节点
对于HTML文档来说，document对象一般有两个子节点
1.第一个是document.doctype，它是一个对象，包含了当前文档类型信息。
不同浏览器对这个节点的支持差别很大，开发中尽量避免使用。
2.第二个是document.documentElement，返回当前文档的根节点（root）。即节点。
2.文档属性
1.document.head属性返回当前文档的节点
2.document.body属性返回当前文档的节点 注释：这两个属性总是存在的，如果网页源码里面省略了或，浏览器会自动创造。document.body在开发中经常被用到。
3.document.links返回当前文档所有设定了href属性的a及area元素
4.document.forms返回页面中所有表单元素form
5.document.images返回页面所有图片元素（即img标签）
6.document.embeds返回网页中所有嵌入对象，即embed标签
注释；以上4个属性返回的总是节点对象的集合，可以通过类似访问数组的方式进行访问
如；var images = document.images; images[0];
2.遍历节点方法
var box = doucument.getELementById("box")
for(var i=0,len = box.children.length;i<len;i++){
console.log(box.children[i]);
3.改变层内容
1.js改变由style方式引用的样式：
1.document.divs.style.cssText="border:1px solid #000000;color:#FF0000";
2.document.divs.setAttribute("style","border:1px solid #000000;color:#FF0000");
2.js改变由class方式引用的样式：
1.document.divs.className='divs1';
2.document.divs.setAttribute("class","divs1");
3.js改变由id方式引用的样式：
1.document.divs.setAttribute("id","divs1");
4.节点关系
1.节点树中的节点彼此拥有层级关系。
我们常用父（parent）、子（child）和同胞（sibling）等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
如下案例：
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li id="sp">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script>
// 获取元素
var list = document.getElementById("list");
// 父子关系：父亲找儿子
// 1 获取所有的子节点 childNodes
console.log(list.childNodes);//NodeList(21) [text, li, text, li, text, li, text, li, text, li#sp, text, li, text, li, text, li, text, li, text, li, text]
// 2 获取所有的元素节点
console.log(list.children);//HTMLCollection(10) [li, li, li, li, li#sp, li, li, li, li, li, sp: li#sp]
// 3 第一个子节点
console.log(list.firstChild);//#text
// 4 第一个元素节点
console.log(list.firstElementChild);//<li>1</li>
// 5 最后一个子节点
console.log(list.lastChild);//#text
// 6 最后一个元素节点
console.log(list.lastElementChild);//<li>10</li></
最低0.47元/天 解锁文章
6759
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
