<html>
    <head><title>DOM元素关系与操作</title></head>
    <body>
        <!-- div水平居中-->
        <div class="content" id="div1">
            <div id="div2" class="h_center">水平居中</div>
        </div>
        <!--垂直水平居中-->
        <div class="content" id="div3">
            <div id = "div4" class="h_v_center">水平垂直居中</div>
        </div>
    </body>
</html>

DOM关系判断

var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
//1.判断是否为包含关系
div1.contains(div2);
//2.如果 parentNode 为包含者,则为父子关系
div2.parentNode == div1
//3. 兄弟关系
div1.nextElementSibling == div2

DOM元素操作

查找节点

//根据id 查找
var div1 = document.getElementById('div1');
//根据tab查找
var divs = document.getElementsByTagName('div');
//根据name属性值查找
var divs = document.getElementsByName('div');
//根据class属性查找
var divs = document.getElementsByClassName("content")

创建&&添加&&移动

//创建一个元素并设置属性
var newE = document.createElement('ss');
newE.id = newE;
newE.name = new;
newE.innerHTML ="Hello";
//appendChild 只能添加已经有的元素 ,会改变已有的元素的位置
div1.appendChild(newE);

//append可以添加没有的元素
div1.append("<div>直接创建并添加</div>");

//将div3移动到div1内的div2之前  即div1必须包含div2 将其他元素移到到div2之前
div1.insertBefore(div3,div2)

移除

div1.remove(div2);

替换元素

//将div3替换div1内的div2  即div1必须包含div2 将其他元素替换div2
div1.replaceChild(div3,div2)

复制

//深复制
var deepList = div1.cloneNode(true);
//浅复制
var shallowList = div1.cloneNode(false);

HTML DOM元素关系与操作的更多相关文章

  1. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  2. JavaScript HTML DOM元素节点常用操作接口

    在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...

  3. 原生JavaScript对【DOM元素】的操作——增、删、改、查

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue（4）—— vue的过滤器，监听属性，生命周期函数，获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

  5. vue 使用ref获取DOM元素和组件引用

    在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法. HTML部分: <div id="app"> <input type=&quo ...

  6. DOM的查找与操作

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. jacascript DOM节点——节点关系与操作

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 节点关系 DOM可以将任何HTML描绘成一个由多层节点构成的结构.每个节点都拥有各自的特点.数据和方法,也 ...

  8. jQuery碎语(1) 基础、选择要操作的元素、处理DOM元素

    1.基础 jquery对象集: $():jquery对象集合 获取jquery对象集中的元素: 使用索引获取包装器中的javascript元素:var temp = $('img[alt]')[0] ...

  9. jQuery操作DOM元素

    作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...

随机推荐

  1. robotframe 学习笔记(之一)

    在robot framework中,通过 Set variable关键字来定义变量 连接对象: 通过Catenate关键字可以连接多个信息 加上"SEPARATOR=",可以对多个 ...

  2. 深度解析MySQL启动时报“The server quit without updating PID file”错误的原因

    很多童鞋在启动mysql的时候,碰到过这个错误, 首先,澄清一点,出现这个错误的前提是:通过服务脚本来启动mysql.通过mysqld_safe或mysqld启动mysql实例并不会报这个错误. 那么 ...

  3. java关键字transient与volatile小结

    本文转自:http://heaven-arch.iteye.com/blog/1160693 transient和volatile两个关键字一个用于对象序列化,一个用于线程同步,都是Java中比较高阶 ...

  4. SpringMVC 3.2集成Spring Security 3.2

    参考:http://www.cnblogs.com/Beyond-bit/p/springmvc_and_springsecurity.html SpringMVC 3.2集成Spring Secur ...

  5. 项目管理之 Objective-C 编码规范

    目录: 一.格式化代码 二.命名 命名要求 1. 类的命名: 规则: 大驼峰命名法,每个单词的首字母都采用大写字母.一般添加业务前缀.后缀一般是当前类的种类. ViewController:后缀:Vi ...

  6. Linux下让一个程序开机自动启动

    1.chkconfig但是要在脚本中满足一定的条件(/etc/init.d/)下存在相关服务 2.将启动的程序写入到/etc/rc.local 选择建议: /etc/rc.local可以作为开机启动程 ...

  7. 弹性盒模型 flex box

    弹性盒子模型 布局方案 传统的布局方案大多采用div+css+float+position+display来实现,但是随着css3中弹性盒子模型的推出,在前端布局方案中就又多出了一项彪悍的选项. 而因 ...

  8. pod trunk push --verbose 失败的原因总结

    用 pod trunk push --verbose  添加一个 pod 的时候,经常出现如下的错误 [!] The podspec does not validate. /Library/Ruby/ ...

  9. HTTPS系列干货（一）：HTTPS 原理详解

    HTTPS(全称:HyperText Transfer Protocol over Secure Socket Layer),其实 HTTPS 并不是一个新鲜协议,Google 很早就开始启用了,初衷 ...

  10. 可视化之Earth NullSchool

    上两篇我们分别介绍了<Berkeley Earth>和<AQICN>两个网站,今天来看一下Earth NullSchool. 这个网站的特色是风向图,之前有一篇可视化之风向图, ...