为什么这段 js 出不了我想要的结果呢？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2953 天前的主题，其中的信息可能已经有所发展或是发生改变。

我现在需要用 js 处理一段以字符串形式输入的 html 。我发现下面这段程序无法打印出我要的结果，研究了好久实在看不出哪里有问题，特来求助！

<html>

<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
<script>
var str = '<html><head></head><body><h1 id="myclass">content</h1></body></html>';
var doc = $.parseHTML(str);
var title = $(doc).find('#myclass');
alert($(title).html());
</script>
</body>

</html>

</html>

27 条回复 • 2016-10-17 11:35:39 +08:00

starvedcat

2016-10-17 08:19:49 +08:00

就是先 parseHTML ，然后 find id 为 myclass 的元素（就是那个<h1>），但是为什么提示 undefined 呢？

murmur

2016-10-17 08:25:22 +08:00

有问题么整个代码里没看到 title 元素当然是 undefined 了
就算是也是$("title") 只有 document 用的不是引号的

FelixXie

2016-10-17 08:25:29 +08:00

$(document)？

LimboRunner

2016-10-17 08:34:16 +08:00

doc 就是 #myclass

finian

2016-10-17 08:35:55 +08:00

调试一下不就知道了么

cismous

2016-10-17 08:40:54 +08:00

id="myclass" 外面再包裹一层 div

starvedcat

2016-10-17 08:43:16 +08:00

@cismous …………………………………………谢谢！可是，这是为什么，是不是没有<div>就找不到了？？

starvedcat

2016-10-17 08:46:09 +08:00

感谢 cismous 的回复，把上面代码<h1>外面再加一层<div>之后这段代码就可以正常 alert 出 title 了。所以现在我又有新的疑问了：这是为什么？？

iyangyuan

2016-10-17 08:47:40 +08:00 via iPhone

原因是 jquery 从 body 的直接子元素开始解析，所以 h1 是顶级节点，自己 find 自己，当然 find 不到

murmur

2016-10-17 08:52:37 +08:00

@starvedcat 因为 parse 后的结果就是<h1 id="myclass">content</h1>
其余的标签被去掉了

murmur

2016-10-17 08:56:12 +08:00

@iyangyuan 这句话求出处，官方文档我刚才查了他是调用的"native method"去做的解析，所以跟 jq 无关，问题出在 parse 那句，单独用 jquery 操作 body html header 里的东西都是没问题的

zeusLeeJh

2016-10-17 08:56:19 +08:00

打印一下 str 的值在 parse 后的变化嘛。你会发现只有 h1 标签，那么你怎么 find 出来呢

loading

2016-10-17 08:58:35 +08:00 via Android

楼主可以看看 alert($(doc).html)

starvedcat

2016-10-17 09:02:18 +08:00

http://stackoverflow.com/questions/4429851/parse-complete-html-page-with-jquery

maijiawei

2016-10-17 09:12:03 +08:00

console.log($(str).find('#myclass').html());

kingze1992

2016-10-17 09:13:55 +08:00

我建议楼主先把 html 基础和 jQuery 基础看一看吧。
第一，调试的时候，你先用 console.log()把变量输出到控制台看一看，比如这个例子里 console.log(title)的结果为 []， console.log(doc)的结果才是 h1 元素。
第二， jQuery 的 find(selector): Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
其中 descendant 的意思是后代，子孙，你在 h1#myclass 元素里，用.find()查找后代中 id 为 myclass 的元素，当然找不到。

再次建议：找本书把基础学一学。

FrankFang128

2016-10-17 09:14:09 +08:00

parseHTML 用错了

liuyanjun0826

2016-10-17 09:17:26 +08:00

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ppi</title>
</head>
<body>
<script>
function ppicomputing() {
var height = document.getElementById('height').value;
var width = document.getElementById('width').value;
var diagonal = document.getElementById('diagonal').value;
var ppi= (Math.sqrt(height * height + width * width)) / diagonal;
var ppivalue = document.getElementById('ppivalue');
document.getElementById("ppivalue").value = ppi.toString().substr(0,4);
}
</script>
height<br>
<input type="text" id="height">height<br>
width<br>
<input type="text" id="width">width<br>
diagonal<br>
<input type="text" id="diagonal">diagonal<br>
ppi<br>
<input type="text" id="ppivalue"><br>
<button onclick="ppicomputing()">computing</button>
</body>
</html>

kingze1992

2016-10-17 09:18:09 +08:00

还有，如果自己练习的时候，需要引用库文件，比如 jquery.min.js ， jquery.js ，建议从官网上下载下来，然后在本地引用，不然每次打开浏览器调试的时候，都要多等几秒钟（可能是我网络不好），不着急吗？

zhenjiachen

2016-10-17 09:53:17 +08:00

`
var str = '<html><head></head><body><h1 id="myclass">content</h1></body></html>';
var doc = $.parseHTML(str);
var $title = $(doc).find('#myclass');
alert($title.html());
`

murmur

2016-10-17 10:10:09 +08:00

@kingze1992 这我感觉反倒是个好习惯，对于 jquery 这种超大众库以后肯定是蹭 cdn 的，哪里有用自己流量刷静态资源的

kingze1992

2016-10-17 10:13:31 +08:00

@murmur 自己平时练习没必要用 cdn 吧？我打开的时候要等三秒左右加载，影响个人心情。

tonghuashuai

2016-10-17 10:28:30 +08:00

<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<script>
var str = '<html><head></head><body><h1 id="myclass">content</h1></body></html>';
var doc = $.parseHTML(str);
var title = doc.find('#myclass');
alert(title.html());
</script>
</body>

</html>

看第 9 、 10 行， doc 和 title 已经是变量（看前面的 var ），直接用就可以，$(doc) 这种用法感觉你 jQuery 用混乱了，建议先写原生 js ，明白其中的原理以后再用框架。

现在大量使用 jQuery ，导致很多新手只知道 $('#id') 而不知道 document.getElementById('id')。

quxiangxuanqxx

2016-10-17 10:43:15 +08:00

@murmur 开发环境和生产环境不一样啊，这并不是一个好习惯。

murmur

2016-10-17 10:47:15 +08:00

@quxiangxuanqxx
开发系统和生产环境当然越接近越好最多域名、硬件配置不一样
以前是一个网站全相对资源，现在是几乎所有的东西都在别的服务器上，图片有图床，静态有 cdn ，数据源有一些服务器，然后一个登录还要给所有的域名上 cookie ，如果开发的时候图省事全放一个服务器上，等真拆分了有些本来早就应该发现的问题就暴露出来了
其实很多大的类库都有在线的 cdn 地址给你用

quxiangxuanqxx

2016-10-17 10:53:43 +08:00

@murmur 配置一下呀，上线自动切换成生产环境， dev 环境是可以设置的。这是比较基础的知识吧

starvedcat

2016-10-17 11:35:39 +08:00

@kingze1992 谢谢，我在本地的确是下载下来调试的，发到 V2EX 上的时候改成 CDN 了。。。。:)