正文
javascript目录,nodejs目录
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
Javascript中使用A标签获取当前目录的绝对路径方法
这篇文章主要介绍了Javascript中使用A标签获取当前目录的绝对路径方法,本文讲解的方法比较特别,需要的朋友可以参考下
一谈到路径相关的问题，大家都会往window.location上想，确实这个对象提供了相当多的路径信息，其中常用的就包括：
1.location.href：当前页面的完整URL
2.location.pathname：当前URL中的路径名
3.location.hash：当前URL中的锚点
4.location.search：当前URL中的查询参数
然而，location没有一个属性能直接获得当前目录（不含文件名）的绝对路径。通过Google我发现了一些错误的方法，比如说把URL通过“/”分离成数组，把数组的最后一项去掉以后再连接成字符串。但如果URL中没有指定文件名，结果就大错特错了。
根据以往编码的经验，a元素的href属性总是会返回绝对路径，也就是说它具有把相对路径转成绝对路径的能力。使用下面的代码尝试了一下，果然成了：
代码如下:
var
a
=
document.createElement('a');
a.href
=
'./';
alert(a.href);
a
=
null;
很不幸地，此方法在老旧的IE
6/7下无效，当执行alert(a.href)时，弹出的仍然是“./”。后来，我发现在Stackoverflow上也有人提出了这个问题，而解决方法也是很简单的，只要把a通过innerHTML注入就可以了：
代码如下:
var
div
=
document.createElement('div');
div.innerHTML
=
'a
href="./"/a";
alert(div.firstChild.href);
div
=
null;
有人可能会问：为何不用正则表达式？我的答案是：要考虑有无文件名的情况、有无锚点的情况、有无查询参数的情况，这条正则表达式可能会挺复杂的。
相关问答
Q1: javascript实现分级目录
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
link rel="stylesheet" type="text/css" href="css/style.css"/
titleSelect/title
script type="text/javascript" src="js/prototype-1.6.0.3.js"
/script
script type="text/javascript"
function action(m){
content = $(m.id + '_content');
if (content.style.display == 'none') {
content.style.display = '';
}
else {
content.style.display = 'none';
}
}
/script
/head
body
div id="d1" style="top:20px; left:100px; width:200px; height:500px"
div id="d_head" style="height:20px"
Menu
/div
div id="d_body" align="left" style="height:400px"
ul class="menu"
li
span id="m1" onclick="action(this);"Core Java/span
/li
ul id="m1_content" style="display:none"
li
a href="#"Language/a
/li
li
a href="#"IO/a
/li
li
a href="#"Thread/a
/li
/ul
li
span id="m2" onclick="action(this);"Web Client/span
/li
ul id="m2_content" style="display:none"
li
a href="#"JavaScript/a
/li
li
a href="#"HTML/a
/li
li
a href="#"CSS/a
/li
/ul
li
span id="m3" onclick="action(this);"Web Server/span
/li
ul id="m3_content" style="display:none"
li
a href="#"JDBC/a
/li
li
a href="#"Servlet/JSP/a
/li
li
span id="m31" onclick="action(this);"Framewroks/span
/li
ul id="m31_content" style="display:none"
li
a href="#"Struts/a
/li
li
a href="#"Hibernate/a
/li
li
a href="#"Spring/a
/li
/ul
li
a href="#"Web Service/a
/li
/ul
/ul
/div
/div
/body
/html
Q2: javascript中如何实现获取当前文件根目录.
不清楚你说的根目录是哪个根目录，JavaScript运行于浏览器沙盒模式中，无法和系统进行交互，所以你就别指望能直接获取物理计算机的磁盘目录了，如果是获取url的某曾目录，可以使用正则表达式匹配，或者检索字符串等等。
Q3: js三级目录(原生js)
粗糙运用原生js完成三级目录
!DOCTYPE html
html
head
meta charset="utf-8"
title/title
style type="text/css"
*{margin: 0;padding: 0;}
body{
font-size: 12px!important;
}
.box{
width: 66px;
margin:66px auto;
}
/* 一级li样式 */
li{list-style: none;}
.yijimulu{
width: 66px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
background-color: orange;
color: #333333;
position: relative;
cursor: pointer;
}
/* 二级ul样式 */
.erjiul{
position: absolute;
top: -1px;
left: 65px;
display: none;
}
.erjili,.sanjiLi{
width: 66px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
background-color: orange;
color: #333333;
position: relative;
cursor: pointer;
}
.sanjiul{
position: absolute;
top: -1px;
left: 65px;
display: none;
}
/style
/head
body
div class="box"/div
script
var obox = document.querySelector('.box')
function Message(box) {
this.box = box
// 创建一级目录方法
this.CreatOne()
// 创建二级目录方法
this.CreatTwo()
// 创建三级目录
this.CreatThree()
}
// 创建一级目录
Message.prototype.CreatOne = function (){
// 创建一级ul
this.ul = document.createElement('ul')
// 创建一级li
this.ul.innerHTML = `
li一级目录/lili一级目录/lili一级目录/lili一级目录/lili一级目录/li
`
// 添加一级ul到div内
this.box.appendChild(this.ul)
// console.log(this.ul)
// 获取一级ul内所有li并起名
this.oli = this.ul.querySelectorAll('li')
// 循环出一级ul内所有li并起名设置样式
for (let i = 0;i this.oli.length;i++) {
this.oli[i].className = 'yijimulu'
// 设置一级样式鼠标划入效果
this.oli[i].addEventListener('mouseenter',()={
// 清空一级目录鼠标移入效果
for(let i = 0;i this.oli.length;i++) {
this.oli[i].style.border = 'none'
this.oli[i].style.color = '#333333'
this.bulname[i].style.display = 'none'
}
this.oli[i].style.border = '1px solid red'
this.oli[i].style.color = 'white'
this.bulname[i].style.display = 'block'
},false)
// 设置一级目录鼠标移出效果
this.oli[i].addEventListener('mouseleave',()={
this.oli[i].style.border = 'none'
this.oli[i].style.color = '#333333'
this.bulname[i].style.display = 'none'
},false)
}
}
// 创建三级目录
Message.prototype.CreatTwo = function () {
// this.oli是一级子li目录
// 创建二级目录ul
this.bul = document.createElement('ul')
// 添加到一级li里 this.oli
for (let i = 0;i this.oli.length;i++) {
this.oli[i].innerHTML = '一级目录ul/ul'
}
// 获取所有二级ul
this.bulname = this.ul.querySelectorAll('ul')
for (let i = 0;ithis.bulname.length;i++){
// 给二级ul起名
this.bulname[i].className = 'erjiul'
// 创建二级li
this.bulname[i].innerHTML = `li二级目录/lili二级目录/lili二级目录/lili二级目录/lili二级目录/li`
this.bli = this.bulname[i].querySelectorAll('li')
// console.log(this.bli)
for (let i = 0;ithis.bulname.length;i++) {
this.bli[i].className = 'erjili'
}
}
// 获取所有二级Ul下的li
// 先通过所有二级ul的类名获取到所有的二级ul
}
// 创建三级目录
Message.prototype.CreatThree = function () {
// 先获取到所有的二级li
this.twoli = this.ul.querySelectorAll('.erjili')
// console.log(this.twoli)
// 创建三级ul
for (let i = 0;ithis.twoli.length;i++) {
// console.log(this.twoli)
this.twoli[i].addEventListener('mouseenter',()={
// console.log(this.twoli[i])
for(let i = 0;ithis.twoli.length;i++){
this.twoli[i].style.border = 'none'
this.twoli[i].style.color = '#333333'
this.culclass[i].style.display = 'none'
}
this.twoli[i].style.border = '1px solid red'
this.twoli[i].style.color = 'white'
this.culclass[i].style.display = 'block'
},false)
this.twoli[i].addEventListener('mouseleave',()={
this.twoli[i].style.border = 'none'
this.twoli[i].style.color = '#333333'
this.culclass[i].style.display = 'none'
},false)
}
this.cul = document.createElement('ul')
for (let i = 0;ithis.twoli.length;i++) {
this.twoli[i].innerHTML = '二级目录ul/ul'
this.culname = this.twoli[i].querySelector('ul')
this.culname.className = 'sanjiul'
this.culname.innerHTML = `li三级目录/lili三级目录/lili三级目录/lili三级目录/lili三级目录/li`
// 获取所有三级Li
this.culclass = this.ul.querySelectorAll('.sanjiul')
for (let i = 0;ithis.culclass.length;i++) {
this.cli = this.culclass[i].querySelectorAll('li')
for (let i = 0;ithis.cli.length;i++){
// this.cli = this.culclass[i].querySelectorAll('li')
this.cli[i].className = 'sanjiLi'
}
}
this.threeli = this.ul.querySelectorAll('.sanjiLi')
console.log(this.threeli)
for (let i = 0;i this.threeli.length;i++) {
this.threeli[i].addEventListener('mouseenter',()={
for (let i = 0;ithis.threeli.length;i++) {
this.threeli[i].style.border = 'none'
this.threeli[i].style.color = '#333'
}
this.threeli[i].style.border = '1px solid red'
this.threeli[i].style.color = 'white'
},false)
}
}
}
var msg = new Message(obox)
/script
/body
/html
