87,989
社区成员
发帖
与我相关
我的任务
分享JS提取本地HTML文件中的节点？
是这样，我现在需要调取一个本地HTML文件的div对象（我用的是IE10~11），意思大概是这样
要操作的文件在这里
要取出来的对象在这里：
但是document.getElementsByClassName方法只能搜索编辑空间内的class，各位大佬有什么别的方法提取这个节点并封装为对象吗？
另外，我试过了，getElementsByClassName在IE10~11是可以用的
小萌新求各位大佬解惑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>News</title>
</head>
<body>
<input type="file" id="upload" multiple > //只能于ie10/ie11
<script>
var Upload=document.getElementById("upload");
Upload.onchange=function(){
var fileList=Upload.files ; //通过input的files属性获得fileList
var btn = fileList[1].getElementsByClassName("container");
console.log(btn.length);
}
</script>
</body>
</html>
要操作的文件在这里
要取出来的对象在这里：
但是document.getElementsByClassName方法只能搜索编辑空间内的class，各位大佬有什么别的方法提取这个节点并封装为对象吗？
另外，我试过了，getElementsByClassName在IE10~11是可以用的
小萌新求各位大佬解惑
...全文
请发表友善的回复…
发表回复
Mokemain_tree 2019-03-21
- 打赏
- 举报
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>New2</title>
<script type="text/javascript" src="Javascript/jquery.js"></script>
</head>
<body>
<input type="file" id="upload" multiple > //只能于ie10/ie11
<script>
var Upload=document.getElementById("upload");
Upload.onchange=function(){
var fileList=Upload.files; //通过input的files属性获得fileList
var r= new FileReader();
r.onload = function() {
var $fatherObj=$(this.result).find(".content-detail");
var fatherDomObj = $fatherObj.get(0); //把jquery对象转换成dom对象
var newsDomobjArr = fatherDomObj.getElementsByTagName("p"); //提取p对象，返回数组
console.log(newsDomobjArr[1]); //提取第二个p对象
//用this.result获取你选择的html文件的源代码 ，这是个字符串，可以通过正则表达式提取源代码字符串中需要的内容。
//也可以用jquery的 $(this.result).find(".container")这样先用源代码字符串创建好dom元素，再从中选择需要的内容。
};
r.readAsText(fileList[1],"UTF-8");//"UTF-8"是读取文件的文件编码，也可以是"GB2312"。
}
</script>
</body>
</html>
天际的海浪 2019-03-21
- 打赏
- 举报
childNodes 是dom对象的属性。而你fatherObj是jquery对象，只能使用jquery对象的属性和方法 fatherObj.children()
或者把jquery对象转换成dom对象，才能使用dom对象的属性 fatherObj[0].childNodes
Mokemain_tree 2019-03-21
- 打赏
- 举报
那么我如果这么写：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>New2</title>
<script type="text/javascript" src="Javascript/jquery.js"></script>
</head>
<body>
<input type="file" id="upload" multiple > //只能于ie10/ie11
<script>
var Upload=document.getElementById("upload");
Upload.onchange=function(){
var fileList=Upload.files; //通过input的files属性获得fileList
var r= new FileReader();
r.onload = function() {
// console.log(this.result);
//console.log($(this.result).find(".content-detail"));
var fatherObj=$(this.result).find(".content-detail");
// var text2= fatherObj.documentElement;
console.log(fatherObj.childNodes);
//用this.result获取你选择的html文件的源代码 ，这是个字符串，可以通过正则表达式提取源代码字符串中需要的内容。
//也可以用jquery的 $(this.result).find(".container")这样先用源代码字符串创建好dom元素，再从中选择需要的内容。
};
r.readAsText(fileList[1],"UTF-8");//"UTF-8"是读取文件的文件编码，也可以是"GB2312"。
}
</script>
</body>
</html>最后fatherObj为什么读不出他的子节点呢？
目标文件中class= “content-detail”的节点类似如此
<div class="content-detail">
<div class="addtoany_share_save_container addtoany_content_top"> </div>
<p><img class="size-full wp-image-34933 aligncenter"/></p>
<p>北京</p>
<p>中国</p>
<p> </p>
</div>最后我需要吧“北京”“中国”这个区域读出来转成String，但是涉及到批量处理的事情，没法直接用正则
天际的海浪 2019-03-20
- 打赏
- 举报
fileList[1]是文件对象。不是dom元素。没有getElementsByClassName方法。
你要用FileReader对象读取文件的内容。
Upload.onchange=function(){
var fileList=Upload.files; //通过input的files属性获得fileList
var r= new FileReader();
r.onload = function() {
console.log(this.result);
//用this.result获取你选择的html文件的源代码 ，这是个字符串，可以通过正则表达式提取源代码字符串中需要的内容。
//也可以用jquery的 $(this.result).find(".container")这样先用源代码字符串创建好dom元素，再从中选择需要的内容。
};
r.readAsText(fileList[1],"UTF-8");//"UTF-8"是读取文件的文件编码，也可以是"GB2312"。
}
