文章目录

节点的操作
- 通过元素的id来获取相应的节点
- 通过元素的标签名来获取节点
- 通过元素的类名来获取节点
- 通过元素的name属性来获取节点
- 获取元素的所有子节点
- 创建元素节点
- 往父节点最后添加子节点
- 往父节点指定节点添加子节点
- 删除元素节点
- 替换节点
属性节点操作
- 添加/修改属性节点
- 删除属性节点
- 获取属性节点
文本节点操作
- 创建文本节点
- 获取文本节点
- 删除起始位置开始的num个值
- 尾部添加内容
- 中间插入内容

节点的操作

通过元素的id来获取相应的节点

document.getElementById("");

通过元素的标签名来获取节点

document.getElementsByTagName("");

<p id="demo">单击按钮来改变这一段中的文本。</p>
<button onclick="test()">点我</button>
<script>
function test(){document.getElementsByTagName("P")[0].innerHTML="Hello World";
};
</script>

结果如下

通过元素的类名来获取节点

document.getElementsByClassName("");

<div class="test">第一个</div>
<div class="test">第二个</div>
<p>点击按钮修改第一个 Div 元素的文本信息（索引值为 0 的 class="test")。</p>
<button onclick="demo()">点我</button><script>
function demo() {var demos = document.getElementsByClassName("example");demos[0].innerHTML = "Hello World!";
}
</script>

点击后结果

通过元素的name属性来获取节点

document.getElementsByName("");

<table><tr name='test'><td>这里是test的第一行</td></tr></table>
<table><tr name='test'><td>这里是test的第二行</td></tr></table><script type="text/javascript">var tests = document.getElementsByName("test");if (!tests.length){tests.style.display = "none";}else{for (var i=0;i<tests.length;i++){tests[i].style.display = "none";}}
</script>

获取元素的所有子节点

childElementCount：返回子元素(不包括文本节点和注释)的个数。
firstElementChild：指向第一个子元素；firstChild 的元素版。
lastElementChild：指向最后一个子元素；lastChild 的元素版。
previousElementSibling:指向前一个同辈元素;previousSibling 的元素版。
nextElementSibling：指向后一个同辈元素；nextSibling 的元素版。

node.childNodes;返回子元素(包括文本节点和注释)的个数

<button onclick="myFunction()">点我</button>
<script>
function myFunction(){var txt="";var c=document.body.childNodes;for (i=0; i<c.length; i++){txt=txt + c[i].nodeName + ",";};var x=document.getElementById("demo");  x.innerHTML=txt;
}
</script>
<p><strong>注意:</strong> 空格内元素看作是文本，文本是节点。</p>

结果如下

创建元素节点

document.createElement() //创建HTML元素节点
document.createTextNode() //创建文本元素节点

document.createElement(“tagName”);

function appendChild(){var father = document.getElementById("father");var child = document.createElement('p');child.innerHTML = "This is a test";father.appendChild(child);
}

往父节点最后添加子节点

test.append(childNode);
test.appendChild(childNode);

test.append()可以同时传入多个节点或字符串，没有返回值；
test.appendChild()只能传一个节点，且不直接支持传字符串

function appendChild(){var father = document.getElementById("father");var child = document.createElement('p');child.innerHTML = "This is a test";father.appendChild(child);
}

往父节点指定节点添加子节点

test.insertBefore() //两个参数，要插入的节点和作为参照的节点

function insertChildMethod(){var father = document.getElementById("father");var refChild = document.getElementById('p1');var child = document.createElement('p');child.innerHTML='This is a insert child';father.insertBefore(child,refChild.nextSibling);}

删除元素节点

fatherNode.removeChild(childNode);

<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
<p id="demo">点击按钮来删除列表中的首个项目。</p>
<button onclick="myFunction()">试一下</button><script>
function myFunction(){var list=document.getElementById("myList");list.removeChild(list.childNodes[0]);
}
</script>

点击之前

点击之后

替换节点

test.replaceChidl(newNode,oldNode);
两个参数，要插入的节点和要替换的节点
参数：
newnode : 必需，用于替换 oldnew 的对象。
oldnew : 必需，被 newnode 替换的对象。

<div><b id="oldnode">JavaScript</b>----替换效果。</div>
<button onclick="replaceMessage()"> 点击按钮</button><script type="text/javascript">function replaceMessage(){var oldnode=document.getElementsByTagName("b")[0];var newnode=document.createElement("span");newnode.innerHTML="改变的数据";oldnode.parentNode.appendChild(newnode);oldnode.parentNode.replaceChild(newnode,oldnode);}    </script>

点击之前

点击之后

属性节点操作

添加/修改属性节点

test.setAttribute(‘attr’,“attrValue”);

        var test = document.getElementById("demo");//添加style样式test.setAttribute('style','color:red');//添加值test.setAttribute('value','可以添加值');// 添加class类test.setAttribute('class','title');// 添加idtest.setAttribute('id','title');// 添加事件test.setAttribute('onClick',showMessage());

删除属性节点

test.removeAttribute(“attr”);

 <div id="txt" class="title" onclick="shous()">文本</div><script>var test = document.getElementById("demo");//删除style样式test.removeAttribute('style');//删除值test.removeAttribute('value');// 删除class类test.removeAttribute('class');// 删除idtest.removeAttribute('id');// 删除事件test.removeAttribute('onClick');</script>

获取属性节点

test.getAttribute(“style”);

<div name="test"></div>
<div onclick="blank()"></div>
<div class="title"></div>
<div style="color:red"></div>
<div id="idtest"></div><p id="demo">请点击按钮来显示上面这个链接的 target 属性值。</p>
<p id="demo1">请点击按钮来显示上面这个链接的 target 属性值。</p>
<p id="demo2">请点击按钮来显示上面这个链接的 target 属性值。</p>
<p id="demo3">请点击按钮来显示上面这个链接的 target 属性值。</p>
<p id="demo4">请点击按钮来显示上面这个链接的 target 属性值。</p><button onclick="myFunction()">试一下</button><script>
function myFunction(){var a=document.getElementsByTagName("div")[0];var a1=document.getElementsByTagName("div")[1];var a2=document.getElementsByTagName("div")[2];var a3=document.getElementsByTagName("div")[3];var a4=document.getElementsByTagName("div")[4];document.getElementById("demo").innerHTML=a.getAttribute("name");document.getElementById("demo1").innerHTML=a1.getAttribute("onclick");document.getElementById("demo2").innerHTML=a2.getAttribute("class");document.getElementById("demo3").innerHTML=a3.getAttribute("style");document.getElementById("demo4").innerHTML=a4.getAttribute("id");
}
</script>

点击之前

点击之后

文本节点操作

创建文本节点

var test= document.createTextNode(“hello”);

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>创建文本节点createTextNode</title>
<style type="text/css">
.message{    width:200px;height:100px;background-color:#CCC;}
</style>
</head>
<body>
<script type="text/javascript">var element = document.createElement("p");element.className = "message";//创建文本节点var textNode = document.createTextNode("文本节点内容内容!");element.appendChild(textNode);document.body.appendChild(element);
</script> </body>
</html>

结果如下

获取文本节点

var test= div.childNodes;
定义和用法
childNodes 属性返回包含被选节点的子节点的 NodeList。

提示：如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。如需循环子节点列表，使用 nextSibling 属性，要比使用父对象的 childNodes 列表效率更高。

返回值： NodeList 对象, 代表节点集合。

<body><p id="demo">单击“按钮”获取有关身体元素的子节点的信息</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){var txt="";var c=document.body.childNodes;for (i=0; i<c.length; i++){txt=txt + c[i].nodeName + "<br>";};var x=document.getElementById("demo");  x.innerHTML=txt;
}
</script>
<p><strong>注意:</strong> 空格内元素看作是文本，文本是节点。</p></body>

点击之前

点击之后

删除起始位置开始的num个值

test.deleteData(starNum,num);

尾部添加内容

test.appendData(“后面哦”);

中间插入内容

test.insertData(1,“中间哦”);

JavaScript常用DOM集合相关推荐

dom html api,JavaScript常用DOM的API
在介绍DOM的API之前,先介绍下一些DOM基本概念. DOM,文档对象模型,把文档树当成对象来看的模型. DOM 是 JavaScript 操作网页的接口,全称为"文档对象模型" ...
JavaScript常用DOM操作方法和函数
查找节点 ocument.querySelector(selectors) //接受一个CSS选择器作为参数,返回第一个匹配该选择器的元素节点. document.querySelectorAll(s ...
Javascript操作DOM常用API总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念在讲解操作DOM的api之前, ...
【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
JavaScript之DOM常用属性及方法详解
一.什么是DOM? DOM:文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口. W3C 已经定义了 ...
JavaScript基础笔记集合（转）
JavaScript基础笔记集合 JavaScript基础笔记集合 js简介 js是脚本语言.浏览器是逐行的读取代码,而传统编程会在执行前进行编译 js存放的位置 html脚本必须放在< ...
javascript之DOM总结
1.简介当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树,这种结构被称为节点树: 节点树中的节点彼此拥有层级关系 ...
JavaScript操作DOM对象
目录一.DOM操作 (一).DOM操作分类 (二).节点和节点的关系 (三).访问节点 (四).节点信息二.操作节点 (一)操作节点的属性 (二).创建和插入节点 (三).删除和替换节点 (四). ...
Javascript常用的设计模式详解
Javascript常用的设计模式详解阅读目录一:理解工厂模式二:理解单体模式三:理解模块模式四:理解代理模式五:理解职责链模式六:命令模式的理解: 七:模板方法模式八:理解javas ...

JavaScript常用DOM集合

文章目录

节点的操作

通过元素的id来获取相应的节点

通过元素的标签名来获取节点

通过元素的类名来获取节点

通过元素的name属性来获取节点

获取元素的所有子节点

创建元素节点

往父节点最后添加子节点

往父节点指定节点添加子节点

删除元素节点

替换节点

属性节点操作

添加/修改属性节点

删除属性节点

获取属性节点

文本节点操作

创建文本节点

获取文本节点

删除起始位置开始的num个值

尾部添加内容

中间插入内容

JavaScript常用DOM集合相关推荐

最新文章

热门文章