- dom对象详解-document对象2 加强
- table可以看成元素，也可以看成dom的一个内置对象
- dom会将所有元素当成一个节点来对待
- 有的html对象会当成dom内置对象
- html元素都会被当成节点，但不一定会被当成内置对象
- 当成node对象，就支持各种方法和属性
- head就没有当成内置对象
- id属性和div元素是平级
在dom编程中，一个html文档会被当作 dom 树来对待，dom会把所有的 html 元素映射成Node节点
于是 你就可以使用Node节点（对象）的属性和方法。
- Node节点属性和方法
- dom有5个级别，不同的级别，方法是不一样的
- 相同的方法和属性可以去查xml dom的节点提供的属性和方法
- dom对象就是html元素
- node类型
属性都当作节点类型，譬如id
属性节点
注释节点
文本节点
文档节点 html节点
- ★nodeValue
- 对于文本节点，nodeValue 属性包含文本。
- 对于属性节点，nodeValue 属性包含属性值。
- nodeValue 属性对于文档节点和元素节点是不可用的。
- 获取文本节点
公式：元素节点.innerHTML
或者：
直接写个文本，然后通过之前一个节点获取
document.writeln(node.nextSibling.nodeValue);
- 获取属性节点
注意获取属性节点值的时候，不需要加nodeValue
- ★经典案例1
我们使用Node节点的属性和方法来举一个例子：
<html>
<head>
<script language="javascript">
function test(){
//获取div1(乌龟 鸡所在div),这个div也是一个Node节点，可以使用节点的方法
var Div1=$("div1");
window.alert(Div1.nodeName);div
window.alert(Div1.nodeType);//nodeType为1 ,表示是一个元素
window.alert(Div1.nodeValue);null，这块有点问题，要研究一下
window.alert(Div1.childNodes.length);
- childNodes获取所有的子节点，这里返回5，明明下面只有两个img子节点怎么会返回5个呢？
- 这里它把末尾的换行符也当成是一个子节点了，只是我们看不到而已，这个很神奇，该节点为#text
- 如果将下面的div移动上去，没有换行了
ulteredit可以看到
//注释也是一个节点，而且是这个div的兄弟节点，这里是下一个节点
//注释的nodeType 值为8
后一个节点，兄弟节点，是同一级的下一个或者上一个节点
sibling兄弟
value是注释本身
window.alert(Div1.nextSibling.nodeName+" "+Div1.nextSibling.nodeType+" "+Div1.nextSibling.value);
//获取这个div的前一个节点
window.alert(Div1.previousSibling.nodeName+" "+Div1.previousSibling.nodeType+" "+Div1.previousSibling.value);
//得到父节点，为body
window.alert("父亲节点："+Div1.parentNode);
//得到父节点的父节点
html
window.alert("父亲的父亲节点："+Div1.parentNode.parentNode);
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body οnkeydοwn="return move(event)">
<table border="1">
<tr>
<td></td>
<td><input type="button" value="向上走" onclick ="move(this)"/></td>
<td></td>
</tr>
<tr>
<td><input type="button" value="向左走" onclick ="move(this)"/></td>
<td></td>
<td><input type="button" value="向右走" onclick ="move(this)"/></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="向下走" onclick ="move(this)"/></td>
<td></td>
</tr>
</table>
<input type="button" value="测试节点" οnclick="test()"/>
<div id="div1" value="div1" style="width:500px;height:400px;background-color:pink">
<img id="wugui" src="wugui.png" border="1" style="position:absolute;width:50px;height:40px;left:100px;top:120px"/>
<img id="cock" src="ji.png" border="1" style="position:absolute;width:50px;height:40px;left:200px;top:200px"/>
</div><!--注释也是一个节点，而且是前后div的兄弟节点--><div id="div2" value="div2" ></div>
</body>
</html>
特别注意：经过测试，每个对象的前后的换行符都会被认为是一个节点，所以在寻找某个元素的 子节点，父节点，兄弟节点的时候一定要注意它的换行符！
- ★经典案例2-table子节点
- 这个子节点长度是2
- 一个是tbody,一个是换行
- 这是因为table标签后面本来是有tbody标签的，不过我们一般都不写，而浏览器会自动帮我们补上了，我查过了tr标签的父级节点是tbody，tbody的父级节点才是table！这有点坑爹！
- ★document对象的属性
- 常用属性
- 经典案例
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
背景色，前景色
document.fgColor="white";
document.bgColor="black";
</script>
</head>
<body>
Hello
</body>
</html>
- ★dom对象详解-body对象
- 属性和方法
- body对象代表文档主体
- 是document对象的一个属性，可以通过document.body方式来访问
会报空，body还没有创建好
onunload事件，网上银行，安全推出时候，在客户端，或者服务端删除用户数据
有的人直接推出，会保留用户数据，存在安全隐患
初学者很多时候 不知道知识点在哪里可以应用
- innerText、innerHTML
- 这里有很多方法已经用过了，所以就不讲了，这里强调一下下面两个方法 的区别
- appendChild()和removeChild(),是所有节点都有的
- 并不是body独有
- innerText 和innerHTML 一起使用的时候，起作用的是后者
举例说明：
<html>
<head>
<script language="javascript">
function test(){
//innerText 浏览器会把它当作 文本来解析
$("myspan").innerText="<a href='http://www.baidu.com'>连接到百度</a>";
//innerHTML 浏览器会把它当作 html来解析
后面必须大写
$("myspan").innerHTML="<a href='http://www.baidu.com'>连接到百度</a>";
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<span id="myspan"></span>
<input type="button" value="测试" οnclick="test()"/>
</body>
</html>
- onselectstart和onscroll事件
- 简介
滚动的时候，广告随着走
如果不跟着走，商家不给钱
scroll点在窗口的左上角
onselectstart有时候不想被粘贴拷贝
- ★经典案例-飘动的广告
<!DOCTYPE html>
<html>
<head>
<script language="javascript">
function test(){
window.alert(document.body.scrollTop+150+"px");
window.alert(document.getElementById("myHref").style.top);
- documentElement 属性可返回文档的根节点。
- 根节点的scrolltop属性的位置是不变变的
- 不能用body，body节点的scrolltop属性的位置是变的
document.getElementById("myHref").style.top=document.documentElement.scrollTop+150+"px";
document.getElementById("myHref").style.left=document.body.scrollLeft+50+"px";
}
function window_onscroll(){
document.getElementById("myHref").style.top=document.body.scrollTop+150+"px";
document.getElementById("myHref").style.left=document.body.scrollLeft+50+"px";
// return true;
}
function document_onselectstart()
{
return false;
- 返回false，这样就可以禁止用户选择网页中的文本
- 当用户选择文本时，会触发 onselectstart事件，当返回false时，就不会选中
- 你也可以在body中加入 onselectstart = "return false;" 同样达到这个效果
}
</script>
- Ó另外一种写法
- for代表事件发生在document上
- event代表对这个事件进行处理
- 要知道有这种写法，
- 这种方法现在不支持
<script language="javascript" for=document event=onselectstart>
//这样的写法等同于在 body 上 写onselectstart = "return false;"
return document_onselectstart();
</script>
</head>
<body οnscrοll="window_onscroll()">
<input type="button" value="测试" οnclick="test()"/>
<textarea id="textarea1" name="textarea1" rows="500" cols="500">
</textarea>
<a id = "myHref" href="http://www.baidu.com" style="left:0px; top:50px; position:absolute; word-break:keep-all"><img src="wugui.png"/></a>
</body>
</html>
- word-break
文本元素换行规则
语法：
- word-break : normal | break-all | keep-all
- 全角半角
全角和半角是什么？有什么区别
其实全角和半角是针对中文输入法输入字符的不同状态
全角模式：输入一个字符占用2个字符，
半角模式：输入一个字符占用1个字符。
全角模式输出的字符和半角不同，但是汉字的话2个模式都是占用2个字符
某些特殊的函数，比如命令就不能用全角输入
- 连字符：
是用于一个合成词的两部分之间的或一个单词的字节之间的一种标点符号，
尤其是一行或一段结束时用。
连字符只指“中划线”，不包括上划线和下划线。
373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
