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. 我们常用的节点类型 元 ...
随机推荐
- js面试总结3
异步和单线程 题目: 1.同步和异步的区别? 2.一个关于setTimeout的笔试题. 3.前段使用异步的场景有哪些? 什么是异步? console.log(100) setTimeout(func ...
- （转）第04节：Fabric.js用路径画不规则图形
在Canvas上画方形.圆形.三角形都是很容易的,只要调用fabric对应的方法就可以了,但这些都是规则的图形,如果你想画一个不规则的图形,这时候你可以用fabric.js提供的路径绘图方法.所谓路径 ...
- 导入数据时出现“SqlDateTime 溢出
错误出现:导入数据时出现“SqlDateTime 溢出.必须介于 1/1/1753 12:00:00 AM 和 12/31/9999 11:59:59 PM之间.” 出现这种问题多半是因为你插入或者更 ...
- day 84 Vue学习之vue-cli脚手架下载安装及配置
Vue学习之vue-cli脚手架下载安装及配置 1. 先下载node.js,下载地址:https://nodejs.org/en/download/ 找个目录保存,解压下载的文件,然后配置环境变量 ...
- Tomcat的8080、8005、8009端口
8080是http 1.1 connector,也就是接收处理http请求的端口,如果你只用一个tomcat处理所有请求,可以只使用这个connector. 8005是 tomcat接受关闭指令的端口 ...
- namespace 命名空间
namespace作用:资源隔离 当我们不指定namespace时,默认放在default下 创建namespace kubectl create namespace 资源名称 在生产中,我们建议一个 ...
- Stern-Brocot Tree、伪.GCD 副本
Stern-Brocot Tree.伪.GCD 副本 伪.GCD 问题 1:\(f(a,b,c,n) = \sum_{i=0}^{n} [\frac{ai+b}{c}]\) Case 1: \(a\g ...
- python函数基础（函数的定义和调用）
函数的定义 python定义函数使用def关键字 return[表达式]语句用于退出函数,选择性的向调用方返回一个表达式,不带参数值的return语句返回none def 函数名(参数列表): 函数体 ...
- mysql简单的操作
启动数据库服务 net start mysql 停止数据库服务 net stop mysql 退出数据库 exit 保存操作及结果 将在命令行窗口中 ...
- Java后端WebSocket的Tomcat实现（转）
文章摘要随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了.近年来,随着HTML5的诞生,WebSocket协议被提出,它实现了浏览器与服务器的全双工通信,扩展了浏览器与服务端 ...