HTML DOM元素关系与操作
<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 == div2DOM元素操作
查找节点
//根据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元素关系与操作的更多相关文章
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
- JavaScript HTML DOM元素节点常用操作接口
在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...
- 原生JavaScript对【DOM元素】的操作——增、删、改、查
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue（4）—— vue的过滤器，监听属性，生命周期函数，获取DOM元素
过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
- vue 使用ref获取DOM元素和组件引用
在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法. HTML部分: <div id="app"> <input type=&quo ...
- DOM的查找与操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- jacascript DOM节点——节点关系与操作
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 节点关系 DOM可以将任何HTML描绘成一个由多层节点构成的结构.每个节点都拥有各自的特点.数据和方法,也 ...
- jQuery碎语(1) 基础、选择要操作的元素、处理DOM元素
1.基础 jquery对象集: $():jquery对象集合 获取jquery对象集中的元素: 使用索引获取包装器中的javascript元素:var temp = $('img[alt]')[0] ...
- jQuery操作DOM元素
作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...
随机推荐
- MySQL 的性能（上篇）—— SQL 执行时间分析
简介 文中内容均为阅读前辈的文章所整理而来,参考文章已在最后全指明 本文分为上下两篇: 上篇:MySQL 的 SQL 执行时间分析 下篇:MySQL 性能优化 后端开发必然会接触到数据库,数据层的优劣 ...
- OpenCV探索之路（七）：霍夫变换
我们如何在图像中快速识别出其中的圆和直线?一个非常有效的方法就是霍夫变换,它是图像中识别各种几何形状的基本算法之一. 霍夫线变换 霍夫线变换是一种在图像中寻找直线的方法.OpenCV中支持三种霍夫线变 ...
- 【less和sass的区别，你了解多少？】
在介绍less和sass的区别之前,我们先来了解一下他们的定义: 一.Less.Sass/Scss是什么? 1.Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量.继承.运算.函数 ...
- 关于Laravel中的artisan命令
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Helvetica; color: #454545 } p.p2 { margin: 0.0p ...
- Java学习笔记——MySQL开放3306接口与设置用户权限
系统Ubuntu16.04 LTS 1.开放3306端口查看端口状态:netstat -an|grep 3306tcp 0 0 127.0.0.1:3306 ...
- js的event事件
一 . 焦点:使浏览器能够区分区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入. 我们可以通过一些方式给元素设置焦点 1.点击 2.tab 3.js 不是所有元素都能够接受 ...
- 增强 Sublimetext3
1.让你的粘贴保留原有缩进 Preferences -> Key Binding 中新增: [ , { "keys": ["ctrl+v"], " ...
- Akka（6）： become/unbecome：运算行为切换
通过一段时间的学习了解,加深了一些对Akka的认识,特别是对于Akka在实际编程中的用途方面.我的想法,或者我希望利用Akka来达到的目的是这样的:作为传统方式编程的老兵,我们已经习惯了直线流程方式一 ...
- js扩展父类方法
在网上找了很多一直没找到关于JS扩展父类的方法,让我很是郁闷啊~要是真的开发组遇到了该咋整,于是乎自己手写了一些测试代码,没想到通过了……(难道是人品太好了?)废话不多说了直接上代码看看~ <s ...
- linux系统必学-部分链接
vi操作笔记 vim操作笔记 好网站,临时收藏 SEO十万个为什么 9RIA.com天地会--中国最大的专业Flash论坛 ===互联网=============================== ...