JS节点操作

最新推荐文章于 2024-03-30 16:26:30 发布

m0_71912776

最新推荐文章于 2024-03-30 16:26:30 发布

阅读量93

点赞数

文章标签： javascript servlet 前端

本文链接：https://blog.youkuaiyun.com/m0_71912776/article/details/126254948

版权

DOM

作用：

1．DOM(document object modern) html xml(标记语言)

2．Object对象[html的元素转成的JS对象]

Eg:如果用js操作html文档，先要将html转成js对象

操作属性

DOM自带的属性如<a href=”” title=”” target=”_blank”>link</a>

操作内容

InnerText:操作内部的文本，任何标签只当做文本处理

兼容性:innerText(IE) textContent(FF)

InnerHTML(荐)：可带标签格式

兼容性：可同时兼容IE与FF

outText 取元素外围一层的内容(含自身)

outHTML取元素外围的标签

表单内容:

value

操作样式

obj.style.textDecoration="none";

obj.style.fontSize="14";

obj.style.color="#000";

操作多个样式用

Obj.className=”stylename”

Obj.className=”style1 stle2”

Obj.className=””//清空类

Obj.classList.add(“类名”)

Obj.classList.remove(“类名”)

Obj.classList.toggle(“类名”)

Obj.classList.hasClassName(“类名”)

以上三点的操作，需要将标记转成对象

转成对象的两种形式

通过标记名（找多个）、ID（唯一）、name(多个)

Document中找到对象的三个方法

Var objs=document.getElementsByTagName(“div”);

getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。

例如：var obj=document.getElementsByTagName("p");

y=obj[1];

Var objs=document.getElementById(“one”);

获取的是拥有唯一的ID名称的DOM元素

例如：var obj=document.getElementsById("one");

Alert(obj.innerHtml)

Var objs=document.getElementByName(“two”)

getElementsByName() 方法可返回带有指定名称的对象的集合

Document.form[i].name(表单)
Document.formname.name(表单)

3.关于dom节点

说明：

父节点、子节点和同胞节点

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）

每个节点都有父节点、除了根（它没有父节点）

一个节点可拥有任意数量的子

同胞是拥有相同父节点的节点

注:为保证兼容性,书写html的时候必须写成一行

4. nodeType属性

nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有：

如:

Var div=document.getElementById(“div”);

div.nodeType 节点的类型

div.nodeName /div.tagName 节点的名字

*div.firstchild.nodeValue* 先获取节点的子节点后再求值（文本）

div.parentNode.nodeType/nodeName/nodeValue 父节点的……

div.childNodes[0].nodeType/nodeName/nodeValue 第一个子节点的……

div. firstChild. nodeType/nodeName/nodeValue 第一个节点的……

div.lastChild.nodeType/nodeName/nodeValue 最后一个子节点的……

div. nextSibling. nodeType/nodeName/nodeValue 下一个节点的……

div. previousSibling. nodeType/nodeName/nodeValue 上一个节点的……

div.childNodes.length 子节点的个数

hasChildNodes() 判断父节点是否有子节点

tagName = nodeName [标签名/节点名]

</script>

Nodevalue注意事项

var div=document.getElementById("div");

alert(div.firstChild.firstChild.nodeValue);

</script>

5.dom元素方法列表

创建节点：

使用createElement创建元素节点，

使用createTextNode创建文本节点

document.body指向的是<body>元素

document.documentElement则指向<html>元素

如document.p[0]

如:

var createNode = document.createElement("div");

var createTextNode = document.createTextNode("hello world");

createNode.appendChild(createTextNode);

document.body.appendChild(createNode);

或document.documentElement.appendChild(createNode);

插入节点：

可以使用appendChild，insertBefore，

insertBefore接收两个参数，第一个是插入的节点，第二个是参照节点，如parentDOM.insertBefore(a,b)，则a会插入在b的前面

//插入节点

var newNode= document.createElement("div");

var TextNode = document.createTextNode("hello world");

newNode.appendChild(TextNode);

var div1 = document.getElementById("div1"); //div1为参照节点

document.body.insertBefore(newNode,div1);

parentNode.insertBefore(newNode,oldNode)

替换和删除元素，

从replaceChild和removeChild的字面意思看，就是删除子节点，因此调用者，需要包含子节点div1，不然调用会报错。返回的节点是替换的或删除的元素，被替换/删除的元素仍然存在，但document中已经没有他们的位置了。

//替换元素

parentDOM.replaceChild(newNode,oldNode);

//删除元素

parentDOM.removeChild(div1);

4属性相关操作

4-1 getAttribute获取属性

如: nodeDOM. getAttribute(“属性”);

4-2 setAttribute设置属性

如: nodeDOM. setAttribute (“属性”,”属性值”);

4-2 creatAttribute建立属性

如:

Var parentDOM=document.getElementById(“parent”); //1获取元素节点

var oAttr=document.createAttribute("class"); //2 建立属性节点--class

oAttr.value="red"; // 3 属性赋值

parentDOM.setAttributeNode(oAttr); // 4 将属性节点插入至元素节点

4-3 删除属性removeAttribute

parentDom.removeAttribute(“属性”) //删除属性的同时删除属性值

5. cloneNode克隆

Var oldNode=document.getElementById(“old”);

Var newNode=oldNode.cloneNode(true);

newNode.setAttribute(“属性”, “属性值”);

var parentNode=document.getElementById(“parent”);

parentNode.appendChild(newNode)

6.remove