您的位置：首页 > Web前端 > JavaScript

javascript3

2015-09-02 15:38 495 查看

1.例子：在末尾添加一个节点。

第一步：获取到ul标签；

第二步：创建li标签：document.creatElement("标签名称");方法

第三步：创建文本：document.creatTextNode("文本内容");

第四步：把文本添加到li下面：使用appendChild方法

第五步：把li添加到ul的下面：使用appendChild方法

PS：因为HTML 按节点树的解析方式在解析。

2.元素对象（elements对象）

--要操作 elements对象，要先获取elements，使用-documents 里面相应的方法获取

--方法：

获取属性里面的值getAttribute("属性名称");

-var input1 = document.getElementById("id");

-alert(input1.value);

-alert(input1.getAttribute("value"));

设置属性里面的值

-input1.setAttribute("class","haha");

删除属性

-input1.removeAttribute("name");

不能删除value

--想要获取标签下的子标签：使用属性childNodes,但是这个兼容性很差，所以可以使用getElementsByTagName方法，这也是唯一有效的方法

3.Node对象属性1，HTML DOM
Element 对象可以查阅

nodeName

nodetype

nodevalue //分标签节点和属性节点

Node对象属性2,

父节点：parentNode 配合 document.getElementById("id");

子节点：childNodes：得到所有子节点，但是兼容性很差。firstChild 和 lastChild

同辈节点：element.nextSibling返回位于相同节点树层级的下一个节点。element.previousSibling返回位于相同节点树层级的前一个元素

4.操作dom树

appendChild方法，添加子节点到末尾，特点：类似于剪切粘贴的效果

insertBefore(newNode,oldNode)方法：在某个节点之前插入一个新的节点。

<!DOCTYPE html>

<html>

<body>

<ul id="myList"><li>Coffee</li><li>Tea</li></ul>

<p id="demo">请点击按钮向列表插入一个项目。</p>

<button onclick="myFunction()">试一下</button>

<script>

function myFunction()

{

var newItem=document.createElement("LI")

var textnode=document.createTextNode("Water")

newItem.appendChild(textnode)

var list=document.getElementById("myList")

list.insertBefore(newItem,list.childNodes[0]);

}

</script>

<p><b>注释：</b><br>首先请创建一个 LI 节点，<br>然后创建一个文本节点，<br>然后向这个 LI 节点追加文本节点。<br>最后在列表中的首个子节点之前插入此 LI 节点。</p>

</body>

</html>

6.removeChild方法：删除节点。

通过父节点删除自己，不能自己删除自己，可以通过Id属性获得父节点，也可以通过parendNode();获取

7.replaceChild(newNode,oldNode)方法

8.cloneNode(boolean):复制节点，boolean代表是否复制节点。

9.操作dom总结：

移动节点：查找节点，获取节点方法：getElementById():,getElementByName();getElementByTagName();

插入节点：appendChild()方法，insertBefore方法

替换节点：replaceChild()方法

删除节点：removeChild()方法

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航