JavaScript DOM 学习第三章 内容表格_基础知识_脚本之家

2019-11-26 16:07栏目:竞技宝竞猜
TAG:

如果你也想这么做,那么你还需要我的getElementByTagNames()函数。复制代码 代码如下:function createTOC() { var y = document.createElement; y.id = 'innertoc'; var a = y.appendChild(document.createElement; a.onclick = showhideTOC; a.id = 'contentheader'; a.innerHTML = 'show page contents'; var z = y.appendChild(document.createElement; z.onclick = showhideTOC; var toBeTOCced = getElementsByTagNames; if (toBeTOCced.length < 2) return false; for (var i=0;i来放置表格内容 复制代码 代码如下: function createTOC() { var y = document.createElement; y.id = 'innertoc'; 然后在他的上面添加一个标签。点击这个元素就会运行showhideTOC()函数,我会在下面解释。 复制代码 代码如下: var a = y.appendChild(document.createElement; a.onclick = showhideTOC; a.id = 'contentheader'; a.innerHTML = 'show page contents'; 然后我再创建一个DIV用了放置真正的链接。在这个div上单击(真正的含义是:在这个div里的任何一个链接上单击)一样会触发showhideTOC()函数。 复制代码 代码如下: var z = y.appendChild(document.createElement; z.onclick = showhideTOC; 得到标题 然后新建一个toBeTOCced数组,再用我的getElementByTagNames()函数来得到整个页面的左右标题。 复制代码 代码如下: var toBeTOCced = getElementsByTagNames; 如果数组里只有一个元素就停止。我不想让ToC只有一个元素。 创建ToC 现在开始创建ToC。首先遍历toBeTOCced数组。对于每个元素我都创建一个和他们的标题相同的链接。注意innerHTML的使用:网站里有些标题包含这样的HTML标签,我也想让这些在ToC里面显示。我把这些新的链接添加在ToC的里面的

例子
这个页面就是个例子。点击一个段落,编辑,然后点Ready。你的修改就会呈现。

上。 复制代码 代码如下: for (var i=0;i复制代码 代码如下: if (toBeTOCced[i].nodeName == 'H4') tmp.className += ' indent'; if (toBeTOCced[i].nodeName == 'H5') tmp.className += ' extraindent'; 现在我们需要把a元素链接到他真正的标题上。这需要一个唯一的ID。然而,这些标题可能已经包含一个ID了。我不想破坏原有的内部链接,所以我更愿意使用标题本来的ID。只有当标题没有ID的时候我才创建一个新的ID。 复制代码 代码如下: var headerId = toBeTOCced[i].id || 'link' + i; 我们刚刚创建的链接的href属性就应该是#+headerId,标题本身也就有了一个ID。 复制代码 代码如下: tmp.href = '#' + headerId; toBeTOCced[i].id = headerId; 一个特殊情况:如果标题是H2,那就是页面的顶部,也会得到一个ID。 复制代码 代码如下: if (toBeTOCced[i].nodeName == 'H2') { tmp.innerHTML = 'Top'; tmp.href = '#top'; toBeTOCced[i].id = 'top'; } } 现在表格就生产了,我们返回给调用它的地方。 复制代码 代码如下:return y;} 显示和隐藏ToC 最后这个函数用了显示和隐藏ToC。非常的简单,先检测ToC的状态,然后根据信息生产一个新的文本和display值。 复制代码 代码如下: var TOCstate = 'none'; function showhideTOC() { TOCstate = ? 'block' : 'none'; var newText = ? 'show page contents' : 'hide page contents'; document.getElementById.innerHTML = newText; document.getElementById.lastChild.style.display = TOCstate; } 这个函数在用户点击的时候调用,那样他就可以切换ToC的显示。另外当用户在链接上点击的时候也会马上隐藏ToC的。 翻译地址: 转载请保留以下信息 作者:北玉

问题
遇到的第一个问题是:我想用文本框作为编辑区域。一开始我却把内容放不进文本框去。读者发现Mozilla的一个警告说是只有在文本框放置到文档之后才能设置它的value。
另外,在Mozilla下面内容包装的不是很好。我试了好几种wrap参数,但是结果都不是很好。
最严重的问题就是把修改后的内容发回服务器,这是几乎所有的CMS系统都要做的。读者给了我很多高明巧妙的建议。然而因为不能通过JavaScript完成,所以我也不能提供解决办法。所以也请您不要发邮件告诉你找到了办法:那也许可行,但是我只想要纯JavaScript的不需要服务器端代码的方法。

脚本

复制代码 代码如下:

var editing = false;

if (document.getElementById && document.createElement) {
    var butt = document.createElement('BUTTON');
    var buttext = document.createTextNode('Ready!');
    butt.appendChild(buttext);
    butt.onclick = saveEdit;
}

function catchIt(e) {
    if (editing) return;
    if (!document.getElementById || !document.createElement) return;
    if (!e) var obj = window.event.srcElement;
    else var obj = e.target;
    while (obj.nodeType != 1) {
        obj = obj.parentNode;
    }
    if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return;
    while (obj.nodeName != 'P' && obj.nodeName != 'HTML') {
        obj = obj.parentNode;
    }
    if (obj.nodeName == 'HTML') return;
    var x = obj.innerHTML;
    var y = document.createElement('TEXTAREA');
    var z = obj.parentNode;
    z.insertBefore(y,obj);
    z.insertBefore(butt,obj);
    z.removeChild(obj);
    y.value = x;
    y.focus();
    editing = true;
}

function saveEdit() {
    var area = document.getElementsByTagName('TEXTAREA')[0];
    var y = document.createElement('P');
    var z = area.parentNode;
    y.innerHTML = area.value;
    z.insertBefore(y,area);
    z.removeChild(area);
    z.removeChild(document.getElementsByTagName('button')[0]);
    editing = false;
}

document.onclick = catchIt;

解释
我们设置一个editing标志为false。这用来显示用户是否正在编辑段落。当然初始是没有。

var editing=false;

创建一个按钮
然后我们创建一个Radey按钮,后面会需要很多次。这需要一些高级脚本技术,所以先做一些对象检测:

复制代码 代码如下:

if (document.getElementById && document.createElement) {

如果是现代浏览器,则创建按钮:

复制代码 代码如下:

var butt = document.createElement('BUTTON');

他的文本是:

复制代码 代码如下:

var buttext = document.createTextNode('Ready!');

把这个文本添加到按钮上:

复制代码 代码如下:

butt.appendChild(buttext);

然后添加一个onclick事件处理程序:

复制代码 代码如下:

butt.onclick = saveEdit; 2 }

现在按钮就存储在butt里面,需要的时候我们就可以直接引用。

将P转为文本框
稍后我们会为整个页面定义一个onclick事件。所有的这些事件都会发送到catchIt()函数。

复制代码 代码如下:

function catchIt(e){

首先检测用户是否正常编辑段落,如果是,结束函数:

复制代码 代码如下:

if (editing) return;

然后是支持性检测:

复制代码 代码如下:

if (!document.getElementById || !document.createElement) return;

然后寻找事件的源:

复制代码 代码如下:

if (!e) var obj = window.event.srcElement; 2 else var obj = e.target;

现在我们有了事件的源,但是有个问题是Mozilla会认为文本节点是源(而不是我们需要的P节点)。所以如果节点不是标签(nodeType不是1),我们需要向上遍历DOM树:

复制代码 代码如下:

while (obj.nodeType != 1) { 2 obj = obj.parentNode; 3 }

现在我们以一个标签结束。如果这是一个文本框的标签那么用户点击之后就可以编辑了。如果是一个链接的标签那么用户点击之后应该还是作为一个链接来反映的。这两种情况下我们就不需要这个函数了:

复制代码 代码如下:

if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return;

我们需要再一次的向上遍历DOM树直到找到P标签或者HTML标签:

复制代码 代码如下:

while (obj.nodeName != 'P' && obj.nodeName != 'HTML') { 2 obj = obj.parentNode; 3 }

版权声明:本文由龙竞技官网发布于竞技宝竞猜,转载请注明出处:JavaScript DOM 学习第三章 内容表格_基础知识_脚本之家