<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. Ubuntu热键控制spotify播放和音量调节

    安装xbindkeys sudo apt-get install xbindkeys 新建配置文件 xbindkeys -d > ~/.xbindkeysrc 编辑热键 vim ~/.xbind ...

  2. JDBC进阶

    PreparedStatement的使用: conn = DriverManager.getConnection("jdbc:mysql://localhost/mydata?" ...

  3. Nodejs基础：stream模块入门介绍与使用

    本文摘录自<Nodejs学习笔记>,更多章节及更新,请访问 github主页地址.欢迎加群交流,群号 197339705. 模块概览 nodejs的核心模块,基本上都是stream的的实例 ...

  4. 开涛spring3(4.1) - 资源 之 4.1 基础知识

    4.1.1  概述 在日常程序开发中,处理外部资源是很繁琐的事情,我们可能需要处理URL资源.File资源资源.ClassPath相关资源.服务器相关资源 (JBoss AS 5.x上的VFS资源)等 ...

  5. java web 数据库开发1

    一个完整的数据库部署架构通常由客户端和服务器端两部分组成.客户端封装数据库请求将其发送给服务器端,服务器端执行完毕将其及结果返回给服务器端. 以mysql为例 介绍java应用程序对数据库的访问 JD ...

  6. 360你吃屎啊你，hao123,12345等等

    请看到这个文章的小伙伴将文章看完,看看我的感受是有多深,谢谢了 现在浏览器已经是人们经常用的东西,相信都有时不时就差度娘的习惯吧 也就是说每个人都有自己喜欢的主页 可电脑有时候就是遭不住,360什么的 ...

  7. javascript基础-正则表达式

    概述 正则表达式被用来检索.替换那些符合某个模式的文本 标准正则表达式语法 javascript对正则表达式的支持 替代写法 逆向环视 //需求:替换mpre.cnsuning.com为${pre}, ...

  8. Ubuntu下用cue文件对ape和wav文件自动分轨

    很多音乐CD的镜像文件都带cue格式的分轨文件,在Ubuntu Linux下可以通过一些工具来实现自动分轨. 一.Ubuntu下需要安装的工具有flac,shntool,libav-tools $ s ...

  9. Ubuntu上使用Web QQ

      Linux下的pidgin已经不支持QQ了,只能用Web QQ了.Firefox应用市场(Firefox Marketplace)中有一款QQ的Web应用,比你打开浏览器输入网址用得稍微方便点.不 ...

  10. 平衡树初阶——AVL平衡二叉查找树+三大平衡树（Treap + Splay + SBT）模板【超详解】

    平衡树初阶——AVL平衡二叉查找树 一.什么是二叉树 1. 什么是树. 计算机科学里面的树本质是一个树状图.树首先是一个有向无环图,由根节点指向子结点.但是不严格的说,我们也研究无向树.所谓无向树就是 ...