如何获取html的代码（手机上如何查看HTML代码）

本文目录

• 手机上如何查看HTML代码
• 如何自动获取HTML5的data-*属性示例代码详解

手机上如何查看HTML代码

在手机端打开 HTML 源代码有几种方法，下面列出了其中的几种常见方法：
1. 使用浏览器开发者工具：大多数移动设备的现代浏览器都提供了开发者工具，类似于桌面浏览器的开发者工具。你可以通过在浏览器中输入特定的命令或手势来打开开发者工具，然后在其中找到源代码视图或类似的选项。在开发者工具中，你可以查看和网页的 HTML 源代码。
2. 使用文本器应用：如果你想在移动设备上查看 HTML 源代码并进行，可以下载适用于移动设备的文本器应用，如 QuickEdit、Jota Text Editor、Dcoder 等。这些应用通常提供了语法高亮显示和其他代码功能，方便你查看和 HTML 源代码。
3. 在线 HTML 器：使用在线 HTML 器可以方便地在手机上查看和 HTML 源代码。有一些在线工具（例如 CodePen、JSFiddle、JS Bin 等）提供了实时预览和功能，你可以在其中输入 HTML 代码并查看结果。
需要注意的是，使用手机浏览器查看和 HTML 源代码可能会受到屏幕尺寸和设备限制的影响。对于复杂的代码和操作，使用桌面环境更为方便。但是对于简单的查看和需求，上述方法可以帮助你在手机上查看和修改 HTML 源代码。

如何自动获取HTML5的data-*属性示例代码详解

项目中需要设计一系列的自定义标签，于是涉及到标签的属性如何访问。使用 HTML5 的 data-* 属性的话，获取元素后直接访问 dataset.属性名称 即可，dataset 的类型为 DOMStringMap {}，一个 MAP 对象，仍是 key / value 式的对象，使用上比较方便。但却遇到一个兼容性的问题， 在 Android 2.3 等的一些旧有浏览器上尚不支持。
对此，我们可以写一个兼容性的补丁。主要原理是在“劫持” document.querySelector/querySelectorAll 这类获取元素的方法之后，通过提供自定义的字段 dataset = {....} 即可实现类似标准写法。当然，简单地，你可以通过一个 API 方法来提供类似 getDataAttrib() 获取属性，效果一样。我们之所以不采取这种方式，而采用另外一种方式，是为了更好向标准靠拢，使用大家都一致的访问方式。
我的实现如下：
// 如浏览器不支持 HTML5 data-* 属性，设置一个。
;(function(){
// 测试元素
var el;
el = document.createElement(’p’);
el.setAttribute(’data-id’, ’111’);
if(!el.dataset){
Element.prototype.dataset = {};

var querySelectorAll = document.querySelectorAll; // 保存一个
document.querySelectorAll = function(){
var resultEls = querySelectorAll.apply(this, arguments);
for(var resultEl, i = 0, j = resultEls.length; i 《 j; i++){
resultEl = resultEls;
resultEl.dataset = getAttrib(resultEl.attributes)
}

return resultEls;
}

// 也就是单个的 document.querySelectorAll()。不保存，直接覆盖
document.querySelector = function(){
var resultEls = document.querySelectorAll.apply(this, arguments);
return resultEls ? resultEls : null;
};

}
el = null; // 要完全移除 dummy 元素，是否这样就 ok？

/**
* 把元素保存为 JSON 对象
* @param {Element.attributes} 元素属性集合
* @return {Object}
*/
function getAttrib(attributes) {
if (!attributes) return;
var hash = {};

for (var attribute, i = 0, j = attributes.length; i 《 j; i++) {
attribute = attributes;
if(attribute.nodeName.indexOf(’data-’) != -1){
hash = attribute.nodeValue;
}
}

return hash;
}
})();考虑到 querySelector 获取元素的方式已经足够，故所以当前没有提供 documeny.getElementByID(“#id”) 方法。
请注意：对于非 document 对象身上执行的 querySelector /querySelectorAll 将不支持，仍不会返回 dataset。 针对该问题，已于2013.1.16 通过重写 Element.prototype 方法解决。详细过程如下：
if(!canSupportDataSet()){
Element.prototype.dataset = {};
modifyQuerySelectorAll_By(document); // document 的好像不一样??
modifyQuerySelectorAll_By(Element.prototype);
}
/**
* 覆盖系统的 querySelector/querySelectorAll 方法。
* @param host {Element.prototype/Document}
*/
function modifyQuerySelectorAll_By(host){
var querySelectorAll = host.querySelectorAll; // 保存一个
host.querySelectorAll = function(){
var resultEls = querySelectorAll.apply(this, arguments);
for(var resultEl, i = 0, j = resultEls.length; i 《 j; i++){
resultEl = resultEls;
resultEl.dataset = getAttrib(resultEl.attributes)
}
return resultEls;
}
// 也就是单个的 document.querySelectorAll()。不保存，直接覆盖
host.querySelector = function(){
var resultEls = host.querySelectorAll.apply(this, arguments);
return resultEls ? resultEls : null;
};
}测试例子：
《listview id="foo" data-id="1"》
Hello World
《p data-id="2"》《/p》
《/listview》
《script》
var el = document.querySelector(’#foo’);
alert(el.querySelector(’p’).dataset.id);
《/script》问题小结：
浏览器必须能够支持 querySelector/querySelectorAll 方法，否则该方法也没有意义；
只能从获取元素的方法提供 dataset。比如事件处理器中参数 e 的 e.tartget. dataset 则是空对象。
如上代码所示，单个的 querySelector() 是经过 querySelectorAll()，当中有遍历数组的操作，能否适当优化一下，使用原生的来做？
对于 CSS Selector Engine 速度敏感的同学，本方法不适用。因为修改系统方法，可见必然性能会下降。但可以保证，这种下降是属于小幅度的；
尚不支持 documeny.getElementByID，待增加之。