JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结
JS DOM节点：
在JS DOM中节点的关系被定义为节点的属性：
通常有以下几种节点之间的关系：
（这里的关系是所有浏览器都支持的）
- parentNode 父节点
- childNodes 子节点
- firstChild 父节点里的第一个子节点
- lastChild 父节点里的最后一个子节点
- nextSibling 与子节点并列的下一个兄弟节点
- previousSibling 与子节点并列的上一个兄弟节点
火狐与谷歌支持而ie8不支持的节点关系有：
previousElementSibling
nextElementSibling
firstElementChild
lastElementChild
在实际工作中，我们可以对这些ie8不支持，但是谷歌与火狐都支持的节点属性进行封装，使他们能够在各个浏览器中都能够兼容。
4个封装实例：
/**
* 获得当前对象的上一个标签元素
* @param obj
* @returns {*}
*/
function getPreviousSibling(obj){
if(obj.previousElementSibling){ // previousElementSibling能够直接获得上一个兄弟标签节点
return obj.previousElementSibling;
}else {
var node = obj.previousSibling;//是所有的浏览器都支持的，但是得判断节点类型，previousSibling不能直接获得类型为标签的元素，所以需要判断它的节点类型。
while(node&&node.nodeType!=1){ //判断节点上一个节点是否存在与节点的类型是否是标签类型，如果不是就使用while循环继续循环判断节点直到获得为止
node = node.previousSibling;
}
return node; //将找到的标签节点返回
}
}
/**
* 获取当前元素的兄弟标签节点的函数
* @param obj
* @returns {*}
*/
function getNextSibling(obj){
if(obj.nextElementSibling){ // 火狐谷歌都支持的，只会获得标签兄弟节点，IE8不支持
return obj.nextElementSibling;
}else {
var node = obj.nextSibling;// nextSibling是所有的浏览器都会支持的，但是会获得文本节点，IE8及之前的浏览器会忽略空白文本节点
while(node&&node.nodeType!=1){
node = node.nextSibling;
}
return node;
}
} /**
* 获得兼容性的当前对象的第一个子标签节点
* @param obj
* @returns {*}
*/
function getFirstChild(obj){
if(obj.firstElementChild){
return obj.firstElementChild;//将获取到的第一个子节点元素返回
}else {
var node = obj.firstChild;//获得当前对象的第一个子节点，但是这个节点有可能是文本节点
while(node&&node.nodeType!=1){
node = node.nextSibling;
}
return node;
}
} /**
* 获得当前对象的最后一个子标签节点
* @param obj
* @returns {*}
*/
function getLastChild(obj){
if(obj.lastElementChild){
return obj.lastElementChild;
}else {
var node = obj.lastChild;
while(node&&node.nodeType!=1){
node = node.previousSibling;//当前对象的上一个兄弟姊妹节点
}
return node;
}
}
克隆节点：
cloneNode(true) 这种情况是表示克隆节点的所有内容（标签+标签里的内容）；
cloneNode(false) 这种情况是仅仅表示克隆了节点的标签；
例：
<body>
<ul id="list">
<li>111111</li>
<li>222222</li>
<li id="li3">333333</li>
<li>444444</li>
</ul>
<script>
var ul = document.getElementById("list");
var li = document.getElementById("li3");
console.log(li.cloneNode(false)); //如果是False的话，仅仅是相当于复制(克隆)了一个标签
console.log(li.cloneNode(true));// 将li标签原样克隆，包含里面的一切信息，包括子节点
console.log(ul.cloneNode(false));
console.log(ul.cloneNode(true)); // 参数为True的时候，是深度克隆，克隆当前对象的一切子节点
// 参数为false的时候，是浅克隆，只会克隆标签，不包含文本信息
</script>
Dom中Style常用的一些属性：
display(none/block):控制元素的显示，不占据原来在标准流中的位置；
visibility(visible/hidden):控制元素的显示，占据原来在标准流之中的位置
backgroundColor: 控制元素的背景颜色
backgroundImage: 控制元素背景图片的路径
color: 控制前景颜色
width:控制元素的宽度
height:控制元素的高度
border:控制边框的属性
position:控制元素使用何种定位
left/top:控制元素的定位之后的偏移（注意最后不要忘记带上单位px）
box.style.position="absolute";
box.style.left="200px";
zIndex:控制元素的层级（案例：许愿墙点击哪个卡片哪个在最上面显示）
filter:控制元素的透明度（ie8支持）
box.style.filter="alpha(opacity=30)";
而火狐与谷歌支持的是：
box.style.backgroundColor="rgba(120,120,120,.3)";
补充：下拉列表中<option></option>的selected属性
selected 属性可设置或返回选项的 selected 属性的值。
该属性设置选项的当前状态，如果为 true，则该选项被选中。该属性的初始值来自 <option> 的 selected 属性。
抽奖案例：
<body>
<select name="" id="sel">
<option value="">一等奖</option>
<option value="">二等奖</option>
<option value="">三等奖</option>
<option value="">四等奖</option>
<option value="">五等奖</option>
<option value="">六等奖</option>
<option value="">七等奖</option>
<option value="">八等奖</option>
<option value="">九等奖</option>
</select>
<input type="button" value="抽奖" id="btn"/>
<script>
var sel=document.getElementById("sel");
var options=sel.children;
var btn=document.getElementById("btn");
btn.onclick=function(){
var index=Math.floor(Math.random()*options.length);
options[index].selected=true;
}
</script>
在 DOM 中，属性也是节点。与元素节点不同，属性节点拥有文本值。
获取属性的值的方法，就是获取它的文本值。
getAttribute() 方法返回属性的值。
getAttributeNode() 方法返回属性节点。
setAttribute() 方法用于改变属性的值或创建新属性。
removeAttribute() 方法删除指定属性。
createElement() 方法创建新的元素节点;
appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
removeChild() 方法删除指定节点。当一个节点被删除时，其所有子节点也会被删除。
insertBefore() 方法用于在指定的子节点之前插入节点。在被添加的节点的位置很重要时，此方法很有用。
replaceChild() 方法用其他节点替换某个子节点。如成功，该方法返回被替换的节点，如失败，则返回 null。
JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结的更多相关文章
- 一个DOM元素同时拥有多个类名时的样式产生冲突时 属性取决于css样式表中后读取到的属性
如果一个DOM元素包含多个类名,其中的两个类名的属性产生冲突,并不是根据htnl中类名的顺序来决定DOM元素的属性, 而是根据css样式中的顺序来决定DOM元素的属性,它取决于css样式表中后读取到的 ...
- java 学习笔记——类之间的关系之封装、继承与多态的详解
封装 一个封装的简单例子 封装就是把对象的属性(状态)和方法(行为)结合在一起,并尽可能隐蔽对象的内部细节,成为一个不可分割的独立单位(即对象),对外形成一个边界,只保留有限的对外接口使之与外部发生联 ...
- Neo4j删除节点和关系、彻底删除节点标签名
https://www.jianshu.com/p/59bd829de0de 总结提前: [1]先删关系,再删节点 [2]当记不得关系名时,type(r)可以查到关系名 [3]彻底删除节点标签名,需要 ...
- 【学习】js学习笔记：对象的遍历和封装特性
1.对象的属性访问: 对象.属性 对象[属性],但中括号中必须是字符串 2.属性的遍历: for in方法举例: var ren={}; ren.name="名字"; ren.ea ...
- K3精益版给物料添加属性，并在BOM中新增字段引用该属性
1.给物料新增属性 打开“系统--基础资料--公共资料--核算项目管理”,然后双击物料,弹出核算项目类别-修改对话框.再点新增按钮: 输入你想新增字段的类型,长度,想要放置的位置. 相关属性里面选的是 ...
- 熟悉JS中的常用选择器及属性、方法的调用
选择器.属性及方法调用的配合使用: <style> #a{ width: 200px; height: 1 ...
- JS中Object常用的一些属性和方法
1⃣️属性 刚接触prototype.constructor.proto这三个玩意儿的时候,是不是有点儿傻傻分不清楚的感觉?下面来简单的说下... 举
- 关于那些Android中不常用的设置属性
很多在manifest中的属性我们经常遗忘了它们,或者经常看到但又不是很明白它的作用.那么在这里我就拿了一些属性简单的解释一下,防止以后碰到却不知道其中的意思.不是很全,以后会断断续续的补充吧 一.a ...
- html中一些常用标签及属性
html中标签分为块级标签和行级标签 块级标签常用的有 <div> <p> <h1><hr><pre><table><ul ...
随机推荐
- MyEclipse中的重命名
我们要重命名一个函数或变量时,如果手工改会很耗时而且可能会有些遗漏,造成编译错误.这个时候可以在变量或函数定义处,按下MyEclipse的Alter + SHIF + R 重命名,然后按下Enter键 ...
- SQL中ISNULL用法示例
ISNULLSQL查询示例SELECT ISNULL 使用指定的替换值替换 NULL. 语法 :ISNULL ( check_expression , replacement_val ...
- I2C控制器的Verilog建模之二
前言:接着上一篇的I2C写操作,今天要实现一个I2C的读操作.虽然在ADV7181B配置内部寄存器时没有必要使用到读操作,但是为了进一步确认寄存器是否在I2C写模块下被正确配置,这一步是必不可少的. ...
- Karma 4 - Karma 集成 Webpack 进行单元测试
可以将 karma 与 webpack 结合起来,自动化整个单元测试过程. 配置环境 1. 首先根据 1 完成基本的 karma 测试环境. 2. 安装 webpack 和 webpack 使用的 l ...
- tinyxml学习一
在TinyXML中,根据XML的各种元素来定义了一些类: TiXmlBase:整个TinyXML模型的基类. TiXmlAttribute:对应于XML中的元素的属性. ...
- sql 简单事务例子
BEGIN TRY BEGIN TRAN ) BEGIN UPDATE table SET ... END ELSE BEGIN UPDATE table SET ... UPDATE table S ...
- PHP连接SQLServer
连接前配置系统: 1.检查文件 php5.2.5/ntwdblib.dll 默认下面有一个,不能连接再替换. 下载正确版本的 ntwdblib.dll (2000.80.194.0),地址: http ...
- UICollectionView布局功能
UIConllectionView和UITableView类似,也是展示数据,但不同于UITableView那种规则的布局,UICollectionView可以实现不规则的布局,即瀑布流. 创建UIC ...
- TJI读书笔记12-接口
TJI读书笔记12-接口 抽象类和抽象方法 接口 完全解耦和策略模式 接口间的继承关系 工厂模式 乱七八糟不知道怎么归类的知识点 接口和抽象类为我们提供了更强又有力的接口和实现分离的方法. 抽象类和抽 ...
- C++多重继承子类和父类指针转换过程中的一个易错点
这两天有个C++新手问了我一个问题,他的工程当中有一段代码执行不正确,不知道是什么原因.我调了一下,代码如果精简下来,大概是下面这个样子: class IBaseA { public: ; int m ...