javascript DOM基本操作

1.DOM(Document Object Model 文档对象模型)

2.节点：

  • 文档节点：document
  • 元素节点：html、head、body、title、meta、h1、p等
  • 属性节点：attr
  • 文本节点：text

2.1节点获取

  • documen.getElementById("元素ID")                       //返回含有该ID的元素
  • document.getElementsByName("元素name属性")     //返回带有指定名称元素的集合
  • document.getElementsByTagName("元素标签")       //返回指定元素的集合

2.2属性节点处理

  • elementNode.hasAttribute("attrName")                 // 检测所选元素是否有attrName属性  eg:documen.getElementById("nav").hasAttribute("class")
  • elementNode.getAttribute("attrName")                 //获取元素attrName属性的值
  • elementNode.setAttribute("attrName","attrValue") //设置属性，创建或改变元素属性值
  • elementNode.removeAttribute("attrName")           //移除属性
  • 注意：在获取属性和移除属性时，用hasAttribute()方法判断此属性是否存在

2.3文本节点处理

  • 通过innerHTML属性获取和设置文本节点属性
  • documen.getElementById("content").innerHTML="<p>hello!</p>"

3遍历DOM

  • 父节点.firstChild       //获取元素的首个子节点
  • 父节点.lastChild       //获取元素最后一个子节点
  • 父节点.childNode     //获取元素子节点列表
  • 子节点.parentNode  // 获取已知节点父节点
  • 兄弟节点.previousSibling    //获取已知节点前一个节点
  • 兄弟节点.nextSibling          //获取已知节点后一个节点
  • 注意：使用以上属性（除parentNode）,有些浏览器将空格作为文本节点，因此浏览器就会将文本节点当做元素的兄弟节点来处理。
  • 通过添加nodeType判断，若下一个或上一个是文本节点则继续寻找，直到找到元素节点
  • nodeType 获得标签类型，nodeName 获得标签名称
  • 元素节点的nodeType属性值是1，属性节点的nodeType属性值为2，文本节点的nodeType属性值3
  • 如果该nextSibling.nodeName = #text，则通过nextSibling.nodeValue来获知其文本值；
  • 否则，可以通过nextSibling.innerHTML等其他常用标签元素属性来获取其属性

4.节点操作

4.1创建节点

  • document.createElement(元素标签)      // 创建元素节点
  • document.createAttribute(元素属性)    // 创建属性节点
  • document.createTextNode(文本内容)   // 创建文本节点

4.2插入节点

  • appendChild(所添加的新节点)                    //向节点的子节点末尾添加子节点
  • insertBefore(所要添加的新节点，已知节点)   //在已知子节点前面插入子节点

4.3替换节点

  • replaceChild(要插入新元素，将要替换元素)

4.4复制节点

  • 需要被复制节点.cloneNode(true/false)    //创建指定节点副本，true复制当前节点及其子节点；false仅复制当前节点不包括文本

4.5删除节点

  • removeChild(要删除节点)                     // 删除指定节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

</head>

<body>

 <ul id="tar_area"><li id="p1">1</li><li id="p2">2</li><li id="p3">3</li><li id="p4">4</li><li id="p5"></li>5</ul>

 <input type="button" value="点我有惊喜！" onclick="test()" />

<script>

//向DOM中添加新元素

 var targetArea=document.getElementById("tar_area");

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

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

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

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

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

 //添加节点

 var p=document.createElement("p");                          //创建元素

 var text=document.createTextNode("这是js动态创建的元素");   //创建文本节点

 p.appendChild(text);                                        //向节点的子节点末尾添加子节点

 targetArea.appendChild(p);

 //替换节点

 targetArea.replaceChild(p,p2);

 //复制节点

 var newNode=p3.cloneNode(true);    //默认为true

 targetArea.replaceChild(newNode,p1);

 //动态删除元素

 targetArea.removeChild(p4);

 function test(){

      var tar=document.getElementById("tar_area");

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

     var px=document.createElement("p");

     var txt=document.createTextNode("hello!");

     px.appendChild(txt);

     tar.insertBefore(px,p5);                            //在已知节点前面插入子节点

 }

</script>

</body>

</html>

javascript DOM基本操作的更多相关文章

  1. JavaScript思维导图—DOM基本操作

    JavaScript思维导图-来自@王子墨http://julying.com/blog/the-features-of-javascript-language-summary-maps/ DOM基本 ...

  2. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

  3. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  4. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  5. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  6. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  7. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  8. javaScript DOM JQuery AJAX

    http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...

  9. JavaScript : DOM文档解析详解

    JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...

随机推荐

  1. Hdu 5274 Dylans loves tree (树链剖分模板)

    Hdu 5274 Dylans loves tree (树链剖分模板) 题目传送门 #include <queue> #include <cmath> #include < ...

  2. Uva 816 Abbott的复仇（三元组BFS + 路径还原）

    题意: 有一个最多9*9个点的迷宫, 给定起点坐标(r0,c0)和终点坐标(rf,cf), 求出最短路径并输出. 分析: 因为多了朝向这个元素, 所以我们bfs的队列元素就是一个三元组(r,c,dir ...

  3. [OJ#40]后宫佳丽

    [OJ#40]后宫佳丽 试题描述 如果机房要关门了,或者有妹子在等你,你可以直接看最后一句话. Fyq 是一只饥渴的鸭子. Fyq 有一个充实的后宫,可惜他总是体力不支,为此他经常苦恼,总是想方设法让 ...

  4. Linux find常用命令

    今天研究一下find的一些常用的命令. find格式:find filepath [-option] [-print|-exec|-ok...] 其中常用的option主要有 -type d|f|s| ...

  5. docker容器-快速部署Jenkins

    1.在本地虚拟机环境.安装CentOS 7,并安装docker容器 2.在docker容器中执行  docker pull jenkinsci/blueocean 3.查看已经下载的Jenkins镜像 ...

  6. Linux下keepalived下载安装与配置

    一.下载(原文链接:http://www.studyshare.cn/blog-front//software/details/1158/0 ) 网盘下载:https://pan.baidu.com/ ...

  7. 使用HttpClient调用第三方接口

    最近项目中需要调用第三方的Http接口,这里我用到了HttpClient. 首先我们要搞明白第三方接口中需要我们传递哪些参数.数据,搞明白参数以后我们就可以使用HttpClient调用接口了. 1.调 ...

  8. Android GIS开发系列-- 入门季（13）Gdal简单写个shp文件

    Gdal是用来读写栅格与矢量数据的,在Gdal官网,可以下载相关的资源进行平台的编译.其实Arcgis底层也是用Gdal来读取shp文件的,那在Android中可以直接读写shp文件吗,是可以的.这里 ...

  9. TCP/IP协议族-----22、万维网和HTTP

  10. Web端口复用正向后门研究实现与防御

    0×01背景 现在的很多远控/后门因为目前主流防火墙规则的限制,基本上都采用TCP/UDP反弹回连的通讯形式:但是在较高安全环境下,尤其负责web相关业务的环境,因为安防设备(防火墙,IDS,IPS等 ...