易栈网-膘叔（Neatstudio.COM）

易栈网-膘叔

DOM元素节点nodeType取值详解

offsetParent作用范围

测试insertAdjacentElement

测试insertAdjacentHTML

CSS border-top-width 属性

定义

DOM元素节点nodeType取值详解

offsetParent作用范围

测试insertAdjacentElement

测试insertAdjacentHTML

CSS border-top-width 属性

定义

日志分类

热门标签

日志归档

搜索文章

最新评论

博客信息

友情链接

浏览模式: 标准 | 列表分类:Javascript

Submitted by gouki on 2011, September 6, 11:01 PM

nodeType的取值还是会经常用到的，但一般我们只用1和3，找了一下资料，1和3的含义是什么，才发现，原来是这样的。【部分资料来自：http://www.impng.com/web-dev/element-nodetype-values.html】

整数	常量
1	ELEMENT_NODE，普通元素节点，如<html>,<p>,<div>,<span>,<img>
2	ATTRIBUTE_NODE，元素属性
3	TEXT_NODE，文本节点
4	CDATA_SECTION_NODE，即<![CDATA[ ]]>
5	ENTITY_REFERENCE_NODE，实体引用，如&
6	ENTITY_NODE，实体，如<!ENTITY copyright “Copyright 2010, impng. All rights reserved”]>
7	PROCESSING_INSTRUCTION_NODE，PI，处理指令，如<?xml version=”1.0″?>
8	COMMENT_NODE，注释<!– –>
9	DOCUMENT_NODE，根节点，即document.nodeType
10	DOCUMENT_TYPE_NODE，DTD，文档类型<!DOCTYPE >
11	DOCUMENT_FRAGMENT_NODE，文档片段
12	NOTATION_NODE，DTD中定义的记号

需要注意的是，在IE下会直接跳过HTML中的空格/Tab/换行，而Firefox下空格会认为是一个节点，因此，对类似节点取nextSibling或previousSibling时，需要判断是否是元素节点。所以。要取某个节点下面的文字时，必须是类似这样的写法。

JavaScript代码

function L(a) {
var b = "";
for (a = a.firstChild; a; a = a.nextSibling){
if (a.nodeType === 3){
b += a.nodeValue;
} else if (a.nodeType === 1){
b += L(a);
}
}
return b
}

Tags: nodetype, dom

Javascript | 评论:0 | 阅读:18582

Submitted by gouki on 2011, August 30, 10:23 PM

在看代码的时候看到了这个offsetParent也就顺便找了一下资料：

XML/HTML代码

offsetParent从字面上理解，这是在查找元素的父亲．可实际应用中，根据浏览器他会返回不同的结果．在Opera较低版本中返回被引用元素的直接父元素，在IE中使用offsetParent有时会返回body元素，有时会返回被引用元素的父元素．为什么IE会这样．我会在下面的实例演示中解释清楚．而在FireFox中他总是返回body元素．
注意：offsetLeft与offsetTop永远是根据offsetParent来返回值，如果offsetParent返回的是父元素，那么他们就返回与父元素的偏移结果，如果offsetParent返回的是body元素，那么他们就返回与body元素的偏移结果．请根据浏览器进行测试．

然后找了一段代码进行测试：

XML/HTML代码

<html>
<head>
<title>Dom：offsetParent使用</title>
</head>
<body>
<p>该网页中有4个div 他们的id值分别是a,a_1,b,b_1<br/> a包含了a_1．b包含了b_1<br/> a和b是相互独立的．．下面我们分别对a_1和b_1两个子元素使用offsetParent方法．
你用IE浏览器测试，你会发现a1的运函数弹出body，而b1的运行函数返回了div，同样的两个子元素．同样的使用方法．为什么返回的结果不一样呢？原因就是我为b1的父元素b,增加了一个宽度属性以后．他就把offsetParent看做是元素的父元素．如果不为b元素指定任何属性样式，他则返回body
而在火狐和谷歌浏览器中两次都会弹出body,不会受此影响．</p>
<div id="a">
<div id="a_1"></div>
</div>
<div id="b" style="width:200px;">
<div id="b_1"></div>
</div>
<script type="text/javascript">
function a1_offsetParent() { //测试b元素的offsetParent
var a_1 = document.getElementById("a_1");
alert(a_1.offsetParent.tagName);
}
a1_offsetParent();//运行a1测试函数
function b1_offsetParent() {
var b_1 = document.getElementById("b_1");
alert(b_1.offsetParent.tagName);
}
b1_offsetParent();//运行b1测试函数
</script>
</body>
</html>

这个时候就象上面的说明所说的，在firefox和webkit核心下两者都返回了“body”，然而：

XML/HTML代码

网友hcp8706说：
在FF中使用offsetParent时不一定总返回body元素，当父元素使用css设置了定位属性时，offsetParent就会返回父元素．

于是我在div的id="b"的style里加入了position:absolute，然后再测试，果然就返回了DIV。

XML/HTML代码

<div id="b" style="width:200px;position:absolute;">
<div id="b_1"></div>
</div>
<script type="text/javascript">
function b1_offsetParent() {
var b_1 = document.getElementById("b_1");
alert(b_1.offsetParent.tagName);
}
b1_offsetParent();//运行b1测试函数
</script>

学习完毕，上述的信息来自：http://www.web666.net/dom/offsetParent.html

Tags: offsetparent

Javascript | 评论:0 | 阅读:17938

Submitted by gouki on 2011, August 24, 12:12 AM

和insertAdjacentHtml等方法类似，只是一个插对象，一个插具体内容，其实都一样啦。
介绍：
语法：
oElement = object . insertAdjacentElement ( sWhere , oElement )
参数：
oElement :　必选项。对象(Element)。要插入到 object 邻近的对象。
sWhere :　必选项。字符串(String)。beforeBegin | afterBegin | beforeEnd | afterEnd beforeBegin :　将 oElement 插到 object 的开始标签之前。
afterBegin :　将 oElement 插到 object 的开始标签之后。但是在 object 的所有原有内容之前。
beforeEnd :　将 oElement 插到 object 的结束标签之前。但是在 object 的所有原有内容之后。
afterEnd :　将 oElement 插到 object 的结束标签之后。
返回值：
oElement :　对象(Element)。返回插入的对象的引用。
说明：
将 oElement 依据 object 定位插入文档结构。
当文档正在载入时，不可以尝试此方法。必须在 onload 事件触发以后。
假如你尝试插入一个已经在文档结构中存在定位的对象，该对象将被移动到你指定的插入位置，而不会有新对象被创建。【这个功能好啊。不会创建出同名元素等】
测试代码：

XML/HTML代码

<script>
var i_nowheight = 250;
function rdl_doApply(e) {
with (document.all("oSelect1")) var sParam1 = options[selectedIndex].value;
with (document.all("oSelect2")) var sParam2 = options[selectedIndex].value;
var oNewNode = document.createElement(sParam1);
oList.insertAdjacentElement(sParam2, oNewNode);
oNewNode.innerText = sParam2
i_nowheight += 30;
window.resizeTo(360, i_nowheight);
}
</script>
<div id=oCode>
<ul id=oList>
<li>列表项目1
<li>列表项目2
</ul>
</div>
<table height=56>
<tr>
<td><select style="width:100px;" id=oSelect1>
<option value="button" selected>button</option>
<option value="b">b</option>
</select></td>
<td><select style="width:100px;" id=oSelect2>
<option value="beforeBegin" selected>beforeBegin</option>
<option value="afterBegin">afterBegin</option>
<option value="beforeEnd">beforeEnd</option>
<option value="afterEnd">afterEnd</option>
</select></td>
<td><input type=button value=" 插入 " onclick="rdl_doApply()"></td>
</tr>
</table>

Javascript | 评论:0 | 阅读:14734

Submitted by gouki on 2011, August 24, 12:03 AM

无它，纯学习的代码，看效果用的。纠结啊，原来好多JS中的方法都没有用过。亏我以前还想转前端：

insertAdjacentText方法，在指定的地方插入html内容和文本内容。
insertAdjacentHTML方法：在指定的地方插入html标签语句

原型：insertAdajcentHTML(swhere,stext)
参数：
swhere: 指定插入html标签语句的地方，有四种值可用：
1.     beforeBegin: 插入到标签开始前
2.     afterBegin:插入到标签开始标记之后
3.     beforeEnd:插入到标签结束标记前
4.     afterEnd:插入到标签结束标记后
stext：要插入的内容

参考：http://blog.csdn.net/helanye/article/details/4496061

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>测试insertAdjacentHTML</title>
<script language="javascript"><!--
function addsome() {
document.getElementById('test').insertAdjacentHTML("afterBegin", "<h1>在文本前容器内插入内容afterBegin</h1>");
document.getElementById('test').insertAdjacentHTML("beforeEnd", "<h2>在文本后容器内插入内容beforeEnd</h2>");
document.getElementById('test').insertAdjacentHTML("beforeBegin", "<h4>beforeBegin在文本前容器外插入内容</h1>");
document.getElementById('test').insertAdjacentHTML("afterEnd", "<h5>afterEnd在文本后容器外插入内容</h2>");
}// --></script>
</head>
<body onload="addsome()">
<div id="test">原始内容</div>
</body>
</html>

效果：

FF下无效，IE下有效。webkit下有效。
Over

Javascript | 评论:0 | 阅读:15039

Submitted by gouki on 2011, August 23, 1:26 PM

看到这个CSS属性的时候，我真的纠结了半天，border-top-width，看这个词组的含义，我还以为是边框顶部的宽度，最初我以为是边框边的宽度，但看了手册后，才发现原来是BODER的高度，粗细之类的。

后来看到了这里的介绍：http://school.mzoe.com/css/pr_border-top_width.html，才小小的了解了一点：

border-top-width 属性设置元素的上边框的宽度。

只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。

注释：请始终把 border-style 属性声明到 border-width 属性之前。元素只有在获得边框之后，才能改变其边框的宽度。

-------

同时也介绍了说这个值是可以通过JS来改变的。反正不管怎么样，我已经明白了

Javascript | 评论:0 | 阅读:13530

Records:298«‹13 14 15 16 171819 20 21 22 ›»

« 2024年05月 »