js节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.main{width: 400px;height: 400px;border: 1px solid #000;position: relative}
.box{width: 200px;height: 200px;background: yellowgreen;position: absolute;bottom:20px;overflow: hidden;}
</style>
</head>
<body>
<div class="main">
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
<script>
var main=document.getElementsByClassName("main")[0];
var box=document.getElementsByClassName("box")[0];
var box2=document.getElementsByClassName("box2")[0];
var box3=document.getElementsByClassName("box3")[0];
var box4=document.getElementsByClassName("box4")[0];
var box5=document.getElementsByClassName("box5")[0]; console.log(main.childNodes); //.获取子节点包括文本节点
console.log(main.firstChild ); //.获取第一个子节点包括文本节点
console.log(main.lastChild ); //.获取最后一个子节点包括文本节点
console.log(main.parentNode); //.获取父节点
console.log(box.nextSibling ); //.获取下一个相邻兄弟节点包括文本节点
console.log(box2.previousSibling); //.获取上一个相邻兄弟节点包括文本节点
console.log(main.firstElementChild); //获取第一个子元素节点
console.log(main.lastElementChild); //获取最后一个子元素节点
console.log(box.nextElementSibling); //获取下一个相邻兄弟元素节点
console.log(box2.previousElementSibling); //获取上一个相邻兄弟元素节点
console.log(box.children); //获取所有的子元素节点,不包括孙子元素
console.log(main.nodeValue); //nodeValue 输出节点 如果是文本节点或者注释节点,则会打印输出内容;如果是元素节点,则打印输出null;
console.log(main.nodeName); // 输出节点名称
console.log(main.nodeType); // 输出节点类型 main.setAttribute("id","id");//设置属性 setattribute("属性名","属性值");
main.removeAttribute("id");//删除属性 removeAttribute("value"); var span=document.createElement("span");//创建节点
document.body.appendChild(span);//插入节点；
main.insertBefore(span,box);//将元素节点a插入到元素节点b之前insertBefore(a,b)将元素节点a插入到元素节点b之前
main.replaceChild(box4,box3);//b节点被a节点替换,a节点消失
main.removeChild(box5);//删除节点 </script>
</body>
</html>
js节点的更多相关文章
- js 节点 document html css 表单节点操作
js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...
- js节点解析
在JS中,每一个节点都有一个nodeType 属性,用于表明节点的类型.节点类型由在Node 类型中定义的下列12个数值常量来表示,任何节点类型必居其一: Node.ELEMENT_NODE(1); ...
- 原生JS节点操作
获取子节点 1. children 不是标准的dom属性,但是几乎被所有浏览器支持.获取子元素的元素节点(只包括元素节点) 注意:在IE中,children包含注释节点. 2. childNodes ...
- js节点操作实例
写了一个简单的小例子来引用js实例 1. 初步节点操作: 2.兼容性节点操作: 3.节点的类型,名字: 4.使用setAttribute设置属性 5.节点复制操作: 6.删除和替换节点 如有错误,还望 ...
- JS系列：js节点
节点(node) 在html文档中出现的所有东西都是节点 元素节点(HTML标签) 文本节点(文字内容) 注释节点(注释内容) 文档节点(document) … 每一种类型的节点都会有一些属性区分自己 ...
- js节点操作
在看<javascript高级程序设计>,看到节点操作这一块,觉得我只知道用appendChild(),太肤浅了,记录下学到的东西. 每个节点都有一个 parentNode 属性,该属性指 ...
- js 节点属性
节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...
- js节点属性
在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...
- Js节点属性与方法
属性: Attributes 存储节点的属性列表(只读) childNodes 存储节点的子节点列表(只读) dataType 返回此节点的数据类型 Definition 以D ...
- js ·节点的知识点
1. DOM document object model (1) 节点树状图 Document>documentElement>body>tagname 2. 我们常用的节点类型 元 ...
随机推荐
- MYSQL - 外键、约束、多表查询、子查询、视图、事务
MYSQL - 外键.约束.多表查询.子查询.视图.事务 关系 创建成绩表scores,结构如下 id 学生 科目 成绩 思考:学生列应该存什么信息呢? 答:学生列的数据不是在这里新建的,而应该从学生 ...
- 使用ProGuard混淆JAR包
1.在Input/OutPut选项下面,add input 导入需要混淆的jar包2.点击add output,设置混淆后输出jar包的名字和路径.如下图:3.在下面的编辑区右边点击add增加要混淆的 ...
- 如何解决nodemon运行报错问题
原因 nodemon没有被正确安装 解决方法 如果yarn global add nodemon --verbose安装没用的话,然后输入npm i nodemon -g --verbose使用NPM ...
- (15)python打包
.py文件在没有安装python软件的电脑上是不能被执行的
- Linux 中执行Shell 脚本的方式（三种方法）
Shell 脚本的执行方式通常有如下三种: (1)bash script-name 或者 sh script-name:(2)path/script-name或者./script-name:(3)so ...
- [kuangbin带你飞]专题一 简单搜索 - D - Fliptile
#include<iostream> #include<cstdio> #include<cstring> #include<algorithm> us ...
- 如何查找一个命令由哪个rpm安装&&rpm 的相关查询方法
[root@test-can-nginx src]# which python3 /usr/bin/python3 [root@test-can-nginx src]# rpm -qf /usr/bi ...
- java获取服务器路径
java获取服务器一些信息的方法(服务器地址/相对路径/端口/项目名字 request.getServletContext().getRealPath("/") 获取项目所在服务 ...
- angularJs FileUpload插件上传同一文件无效问题记录
参考:https://blog.csdn.net/qq_34829447/article/details/83780392 问题:使用FileUpload插件进行文件上传时,发现无法上传与上个文件相同 ...
- Maven使用初步
一.安装: 1.下载:http://maven.apache.org/download.cgi 2.设置环境变量 1.创建"M2_HOME",值为Maven安装路径(如:D:\Ja ...