⑴ 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>