⑴ js 中ie的那個特性類似dom 中的surroundContents()方法的..
一、使用DOM考慮一個html文件：<html><head><title>測試</title></head><body><p>測試</p></body></html>1.訪問節點：訪問html元素：var oHtml=document.documentElement;獲取head元素：var oHead=oHtml.firstChild;獲取body元素：var oBody=oHtml.lastChild; 或者 var oBody=document.body;也可以通過childNodes來做同樣的工作：var oHead=oHtml.childNodes[0] 或者 oHtml.childNodes.item(0);var oBody=oHtml.childNodes[1] 或者 oHtml.childNodes.item(1);判斷節點間關系：alert(oHead.parentNode==oHtml); alert(oBody.previousSibling==oHead);alert(oHead.nextSibling==oBody);alert(oHead.ownerDocument==document);2.檢測節點類型：通過節點的nodeType屬性來檢驗節點類型：alert(document.nodeType); //輸出9需要注意的是，DOM兼容的瀏覽器（以FF2.0為例），擁有Node.DOCUMENT_NODE、Node.ELEMENT_NODE等常量。各常量名稱與數值對照表如下：ELEMENT_NODE 1ATTRIBUTE_NODE 2TEXT_NODE 3CDATA_SECTION_NODE 4ENTITY_REFERENCE_NODE 5ENTITY_NODE 6PROCESSING_INSTRCTION_NODE 7COMMENT_NODE 8DOCUMENT_NODE 9DOCUMENT_TYPE_NODE 10DOCUMENT_FRAGMENT_NODE 11NOTATION_NODE 12IE6不支持，不過你可以自定義一個JS對象Node。3.處理特性處理特性可以使用標準的NameNodeMap中的方法：getNamedItem(name) removeNamedItem(name) setNamedItem(node) item(pos)比如:<p id="test">測試</p>假設變數oP是上面的p節點的引用，我們要訪問oP的id屬性:var sId=oP.attributes.getNamedItem("id").nodeValue;這些方法用起來很累贅,所以DOM又定義了三個方法來簡化:getAttribute(name) ——返回名稱為name的屬性的值setAttribute(name,value) ——顧名思義removeAttribute(name) ——顧名思義 上面的例子可以改寫為：var sId=oP.getAttribute("name");4.訪問指定節點：熟知的getElementByTagName(name),getElementByName(name),getElementById(id)三個方法，不再展開。5.創建和操作節點：（1）創建新節點，一張IE(6.0)和FF對DOM Level1的創建新節點方法支持的對照表：方法
⑵ 怎麼給javascript + div編輯框游標位置插入表情文字等
1.給用作富文本編輯的div添加contenteditable屬性。
<div id="editor" contenteditable="true"></div>
2.給表情圖片添加click事件（我是把img表情放在li下的），div獲取焦點，_insertimg()鎖定編輯器中游標的位置，參數是img，也可以是文本。
$("#Modal .emoji-list li").click(function(event) {
var emoji = $(this).find("img").attr('src');
$("#editor").focus();
var source = '<img src="'+emoji+'">';
_insertimg(source);
});
function _insertimg(str){
var selection= window.getSelection ? window.getSelection() : document.selection;
var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);
if (!window.getSelection){
document.getElementById('editor').focus();
var selection= window.getSelection ? window.getSelection() : document.selection;
var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);
range.pasteHTML(str);
range.collapse(false);
range.select();
}
else{
document.getElementById('editor').focus();
range.collapse(false);
var hasR = range.createContextualFragment(str);
var hasR_lastChild = hasR.lastChild;
while (hasR_lastChild && hasR_lastChild.nodeName.toLowerCase() == "br" && hasR_lastChild.previousSibling && hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") {
var e = hasR_lastChild;
hasR_lastChild = hasR_lastChild.previousSibling;
hasR.removeChild(e)
}
range.insertNode(hasR);
if (hasR_lastChild) {
range.setEndAfter(hasR_lastChild);
range.setStartAfter(hasR_lastChild)
}
selection.removeAllRanges();
selection.addRange(range)
}
}
⑶ javascript 實現DIV上移下移
<html>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script language="JavaScript" type="text/javascript">
function get(obj) {
var obj = document.getElementById("qx").value;
var obj = obj.split('\n');
var i = 0;
var arr_all = new Array();
var exists = document.getElementById('a').childNodes;
for (var j=0; j< exists.length; j++) {
if (exists[j].nodeName == 'DIV') {
var exist_url = exists[j].firstChild.nextSibling.value;
var exist_name = exists[j].lastChild.previousSibling.innerHTML;
var exist = exist_url + '|' + exist_name;
arr_all.push(exist, arr_all);
}
}
for (i = 0;i < obj.length; i++) {
obj[i] = trim(obj[i]);
if (obj[i] == '') {
continue;
}
if (in_array(obj[i], arr_all)) {
continue;
}
arr_all.push(obj[i]);
var name = obj[i].split("|")[1]
var url = obj[i].split("|")[0]
var iht = '';
iht += '<div><span>上移</span><span>下移</span><input size=80 value='+url+' /><span>'+name+'</span>';
iht +='<input type="button" value=" 刪除 " class="inputbtn" onclick="deleteNum(this)" /></div><br>';
document.getElementById("a").innerHTML+=iht;
}
document.getElementById("qx").value="";
}
function deleteNum(obj) {
obj.parentNode.parentNode.removeChild(obj.parentNode.nextSibling);
obj.parentNode.parentNode.removeChild(obj.parentNode);
}
function trim(string) {
return string.replace(/(^\s*)|(\s*$)/g, "");
}
function in_array(stringToSearch, arrayToSearch) {
for (s = 0; s < arrayToSearch.length; s++) {
thisEntry = arrayToSearch[s].toString();
if (thisEntry == stringToSearch) {
return true;
}
}
return false;
}
$(document).ready(function() {
//$("div[name=spanFor]").draggable();
$("#a").draggable({axis:'y',grid:[0,20],containment:'parent'});
});
</script>
</head>
<body>
<div id = "a" ></div>
<textarea name="fbaddress" cols="100" rows="5" id="qx">19880101|名字1
19880102|名字2
19880103|名字3
19880104|名字3</textarea>
<input type="button" name="Submit1" value=" 編號 " onclick="get()" class="inputbtn" /><br>
在保證別的功能不變的情況下 實現上移下移
</body>
</html>
⑷ 我點擊當前 標簽 獲取和它平級的下一個標簽 也就是它身後的標簽 js 怎麼獲取
nextSibling 屬性可返回某個元素之後緊跟的元素（處於同一樹層級中）。
如果無此節點，則屬性返回 null。
與其相反的是previousSibling
語法：nodeObject.nextSibling
<div id="div1" onclick="onclk(this)"> </div>
<div class="d1"> </div>
<div id="div1" onclick="onclk(this)"> </div>
<div class="d2"> </div>
<script>
function onclk(nowEle){
var nextEle = nowEle.nextSibling;
alert(nextEle.className);
}
⑸ JS之DOM操作
DOM： Document Object Model，文檔對象模型；js提供了豐富的api來操作文檔內容。
DOM樹： html文檔中的內容是以樹形結構排布，html是DOM樹根，html下只有兩個子標簽head、body
節點： DOM將所有的分支端都成為節點。節點有很多類型，常見的節點類型有：文本節點、元素節點。
可以通過 nodeType查看節點類型 ： 1元素節點、3文本節點
特殊的元素節點：
1、html元素
2、body元素
3、head元素
節點操作的api（屬性和方法）
1、nodeName：只讀屬性，可以讀取節點名稱
2、nodeType：只讀屬性，讀取節點類型
3、 hasChildNodes()：判斷調用方法的節點是否存在子節點，存在返回true，不存在返回false。
主流瀏覽器會將換行符、製表符、空格當做文本節點處理，IE9以下會忽略它們。
4、childNodes：只讀屬性，獲得節點的子節點集合，子節點集合是一個類數組結構，有數組特點無數組方法
5、firstChild：獲得節點的第一個子節點
6、lastChild：獲得節點的最後一個子節點
7、querySelector()：
參數：string類型，css選擇器
作用：獲得文檔中第一個符合選擇器條件的節點
兼容：在IE9以下不支持
8、 querySelectorAll()： // 獲得的都是靜態集合
參數：string類型，css選擇器
作用：獲得文檔中所有符合選擇器條件的節點集合（類數組結構）
兼容：在IE9以下不支持
注意： querySelector() 和 querySelectorAll() 得到的都是元素節點。
9、previousSibling：獲取節點的前一個兄弟節點
10、nextSibling：獲取節點的後一個兄弟節點
11、parentNode：獲得節點的父節點（父節點一定是元素節點）
12、removeChild()：節點刪除它的指定子節點
DOM操作元素：暫時不用的隱藏、一定不用的刪除。
13、cloneNode()：克隆一個節點
參數：boolean類型，true深克隆，false淺克隆，默認淺克隆
深克隆：不僅克隆節點和節點的屬性，還會克隆節點的子節點
淺克隆：只克隆節點和節點的屬性，不會克隆節點的子節點
14、a.replaceChild(b,c)：用b替換c
其中a是c的父節點，c是文檔上已經存在的節點，b可以是節點也可以是已存在節點，被替換的節點會從文檔結構中刪除。
15、a.replaceWith(b)：用b替換a
a已存在的節點，b可以是新節點也可以是已存在節點，被替換的節點從DOM樹刪除。
16、a.insertBefore(b,c)：在c前面插入b
其中，a是c的父節點，c是已經存在的節點，b是新節點
17、a.appendChild(b)：在a末尾追加b
a是父節點，b是a的子節點, c是子節點
元素節點的相關api
1、getElementsByTagName()：根據標簽名獲得元素集合（類數組結構）
區別：HTMLCollection 是動態集合，NodeList 是靜態集合。
2、createElement()：根據標簽名創建新元素
3、id：讀寫屬性，可以讀取或設置元素的id值
4、className：讀寫屬性，可以讀取或設置元素的class值
5、classList：讀取標簽的類名集合（類數組結構）
add()：為元素新增類名，如果類名已存在不會重復添加
remove()：刪除元素指定類名，如果類名不存在不會執行操作
元素的屬性分為兩類：
一類是元素本里就擁有的屬性，例如：id、class、style、src、herf、target、alt、title、type、value等等，這些屬性可以在js中直接通過.語法讀取或設置。
再一類是我們為了解決問題給元素添加的自定義屬性，這些屬性在js中無法直接通過.語法讀取，需要通過操作方法訪問。
6、setAttribute(name,value)
參數：name表示要設置的屬性名，value要為屬性設置的值
無返回值
7、getAttribute(name)
參數：name表示要讀取的屬性名
返回值：返回屬性的值，如果屬性不存在會返回null
8、removeAttribute(name)
參數：name表示要刪除的屬性名
無返回值
說明：setAttribute()、getAttribute()、removeAttribute()都可以操作元素的本地屬性和自定義屬性。
element拓展：
兼容：以下屬性、方法在IE9以下不支持。
1、children：讀取元素的所有元素子節點集合（類數組）
2、parentElement：讀取元素的父元素節點
3、previousElementSibling：讀取前一個元素兄弟節點
4、nextElementSibling：讀取後一個元素兄弟節點
5、firstElementChild：讀取第一個元素子節點
6、lastElementChild：讀取最後一個元素子節點
7、remove(): 將調用方法的元素從DOM結構中刪除
⑹ 用JS怎麼實現點擊按鈕輸入文本框跟下拉框的值在頁面中
我寫了個例子，你試試：
<html>
<head>
<title>jsTest</title>
</head>
<body>
<select id="sel"><option>a</option><option>b</option></select>
<input type="text" id="txt">
<input type="button" value="show" onclick="show()">
</br>
<p id="p1">
下拉框和文本框內容將顯回示在這里：答
</br>
</p>
<script>
function show()
{
var node = document.createTextNode(sel.options[sel.selectedIndex].value +
"," + txt.value);
p1.removeChild(p1.lastChild);
p1.appendChild(node);
}
</script>
</body>
</html>