document的节点
1.1节点概要
v 节点的划分
dom对html文档进行节点划分：元素、属性、文本、document文档节点、注释节点
v 元素节点获取
① getElementById() 通过id属性值获取元素节点
② getElementsByTagName() 通过tag标签名称获取元素节点
③ getElementsByName() 通过name属性值获取元素节点
第③种方式要在form表单里边使用，不同浏览器有兼容问题，一般不使用
v 常见的dom的每个Node节点属性和方法
属性：
◆(Number) nodeType：显示节点的类型
◆(String) nodeName：显示节点的名称
◆(String) nodeValue：显示节点的值
◆(Map) attributes：获取一个属性节点
◆(Node) firstChild：表示某一节点的第一个节点
◆(Node) lastChild：表示某一节点的最后一个子节点
◆(NodeList) childNodes：表示所在节点的所有子节点
◆(Node) parentNode：表示所在节点的父节点
◆(Node) nextSibling：紧挨着当前节点的下一个节点
◆(Node) previousSibling：紧挨着当前节点的上一个节点
Node的方法介绍：
◆ (boolean) hasChildNodes()：判定当前节点是否有子节点
◆ (Node) removeChild()：删除子节点
◆ (Node) appendChild()：向当前节点上添加一个节点
◆ (Node) replaceChild()：替换子节点
◆ (Node) insertBefore()：指定节点前面插入新节点
获取节点元素的属性
var as = node. attributes;
比如有标签<input type=”text”name=”username” value=”tom” class=”apple” id=”user10”/>
可以： var it =document.getElementById(“user10”);
varas = it.attributes; //数组
console.log(as.value);
console.log(as.type);
console.log(as.type.nodeType); //2
1.2操作
v 获取和设置属性的信息
操作：
① 操作方式
元素节点.属性名称; 获取属性信息
元素节点.属性名称 = 值; 设置属性信息
该方式操作的属性都是w3c规定的属性
<a href=”XX” country = ‘china’></a>
②操作方式
元素节点.getAttribute(属性名称); 获取属性信息
元素节点.setAttribute(属性名称，值); 设置属性信息
v 节点的创建
元素节点：document.createElement(标签名称);
文本节点：document.createTextNode(文本内容);
属性： setAttribute(名称，值);
节点追加：父节点.appendChild(子节点);
追加节点并指定具体位置：父节点.insertBefore(new,old) 把new节点追加到old节点的前边
节点替换：父节点.replaceChild(new,old) old节点被new节点替换
v 节点删除和复制
删除：父节点.removeChild(子节点);
复制：cloneNode() 复制节点
cloneNode(true) 深层复制
cloneNode(false) 浅层复制
v 节点操作css样式信息
获取样式只能获取行内样式，内部样式，外部样式不能获取，样式设置也是设置为行内样式。
<div style=”width:300px; height:200px;background-color:pink;”></div>
获取：元素节点.style.width;
设置：元素节点.style.height= ‘220px’;
1.3总结
1. 获得元素节点
getElementById getElementsByTagName getElementsByName
2. 获得属性节点
attributes
attributes.属性名称
获得属性信息值
node.属性名称
node.getAttribute(属性名称)
设置属性信息值
node.名称= 值；
node.setAttribute(名称，值);
3. 节点相关属性
firstChild
lastChild
childNodes
nextSibling
previousSibling
parentNode
4. 节点类型nodeType
1->元素
2-> 属性
3->文本
9->document文档节点
5. 节点创建
createElement()
createTextNode()
setAttribute()
appendChild()
insertBefore(new,old)
replaceChild()
5. 节点复制和删除
cloneNode(true深层/false浅层)
removeChild()
6. css样式操作
node.style.名称
node.style.名称= 值；
动态的创建一个连接
function test(){//ff好像不支持显示出超链接但是源代码有创建该连接
var myElement = document.createElement("a");
myElement.href="www.baidu.com";
myElement.innerText="连接到百度";
myElement.style.color="red";
myElement.style.fontSize="14px";
//document.body.appendChild(myElement);
document.getElementById("div1").appendChild(myElement);
}
function test2(){
var as = document.getElementsByTagName("a");
document.getElementById("div1").removeChild(as[0]);
}
<body>
<input type="button" value="创建一个超链接" οnclick="test()">
<input type="button" value="删除一个超链接" οnclick="test2()">
<div id="div1"></div>
</body>
说明：删除元素有两种方法
document.getElementById(“div1”).removeChild(document.getElementById(“id1”);
比较灵活的方法：
document.getElementById(“id1”).parentNode.removeChild(document.getElementById(“id1”);
2、document对象下的对象
document.all ：文档中所有的元素，Firefox不支持该属性。
document.forms ：所有的form元素。
document.images：所有的img元素。
document.links：所有的a元素。
document.scripts：所有的script元素。
document.styleSheets：所有的link或者style元素。
2.1body对象
n Body对象是代表文档的主体(HTML body)
n Body对象是document对象的一个成员属性，通过document.body来访问
n 使用body对象，要求文档的主体创建后才能使用，也就是说不能在文档还没有创建就去访问body
常用属性：
document.body //指定文档主体的开始和结束等价于<body>/body>
document.body.bgColor //设置或获取对象后面的背景颜色
document.body.backgorund //设置或获取对象后面的背景图
document.body.innerText //设置<body>…/body>之间的文本
document.body.innerHTML //设置<body>…/body>之间的HTML代码
常用事件：
onload事件 //文档加载时触发
onunload事件 //文档关闭时触发
onbeforeunload事件 //文档关闭前触发
onselectstart事件 //用户选中文档body体的内容时触发
onscroll事件 //用户拉动滚动条时触发
浮动广告
当用户拉动滚动条时，广告图片跟着向下移动
<body οnscrοll="window_onscroll()">
<div id="myhref" style="background:silver; height:200px;
width:100px;position:absolute;top:50px; left:100px;">
</div>
******************<br>******************<br>
</body>
function window_onscroll(){
var myhref = document.getElementById("myhref");
myhref.style.top = (document.body.scrollTop+50)+"px";
myhref.style.left = (document.body.scrollLeft)+"px";
}不能选择文本
<body onselectstart="test()"> <p>don't select the text, no allow!</p></body>
function test() {
alert("不允许选中！");
}
其他属性：
document.body.link //未点击过的链接颜色
document.body.alink //激活链接(焦点在此链接上)的颜色
document.body.vlink //已点击过的链接颜色
document.body.text //文本色
document.body.topMargin //页面上边距
document.body.leftMargin //页面左边距
document.body.rightMargin //页面右边距
document.body.bottomMargin //页面下边距
document.body.appendChild(oTag) //动态生成一个HTML对象
2.2style对象
v style对象的定义：表示当前元素的样式设置
v Js通过style对象把css结合,所以这里的其实是css样式
document.getElementById(“id”).style.property=“值”,来控制网页文档的任何一个元素(对象)的样式。
样式一般说有：背景、边框、布局、杂项、列表、定位、打印、滚动条、表格、文本、规范
background在一行中设置所有的背景属性
backgroundAttachment 设置背景图片是否固定或随页面滚动
backgroundColor 设置元素的背景颜色
backgroundImage 设置元素的背景图片
backgroundPosition 设置背景图片的起始位置
backgroundPositionX 设置backgroundPosition属性的x坐标(不管用了)
backgroundPositionY 设置backgroundPosition属性的y坐标(不管用了)
backgroundRepeat 设置是否重复背景图像
visibility 设置元素是否可见
display 设置元素显示方式
. . . . . .
2.3all对象
all对象(集合),能得到当前文档的所有元素,一般在遍历文档的时候使用，在实际开发中用的不是很多,故而简单讲解
2.4forms对象
2.5img对象
n images对象(集合)定义:即按照img在文档中的顺序得到img 对象, images对象集合中包括了当前文档的所有img
n img对象代表一个图片在HTML文档中<img>每出现 一次,就会创建一个img对象。
n 讲从dom对象层次图看,document.images对象是当前文档所有img对象的集合。
image属性
id 设置或得到该图片的id
name 设置或得到给图片的name
src 设置或得到该图片的src
width 设置或得到给图片的width
height 设置或得到该图片的height
style 设置或得到给图片的style，通过style对象可以得到更多样式属性
2.6links对象
v 讲links对象(集合),就自然的引出了link对象。
v link对象代表一个超链接在HTML文档中<a>每出现一次,就会创建一个link对象。
v 讲从dom对象层次图看,document.links对象是当前文档所有link对象的集合。
、
JavaScript引擎是单线程与定时器
从基础的层面来讲，理解JavaScript的定时器是如何工作的是非常重要的。计时器的执行常常和我们的直
观想象不同，那是因为JavaScript引擎是单线程的
Select对象(集合)
属性seletedIndex 设置或获取选中项位于select对象中的位置
544
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
