动态脚本
在HTML中动态加载脚本可以使用这种方法:
function loadScript(source){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = source;
document.body.appendChild(script);
}
loadScript('a.js');
JavaScript代码的行内方式,为了兼容IE,采用下面这种方法:
function loadScriptString(code){
var script = document.createElement("script");
script.type = "text/javascript";
try {
script.appendChild(document.createTextNode(code));
} catch (ex){
script.text = code;//IE 写法
}
document.body.appendChild(script);
}
//调用函数
loadScriptString("function sayHi(){alert('hi');}");
动态样式
function loadCss(css){
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = css;
document.getElementsByTagName('head')[0].appendChild(link);
}
loadCss('style.css');
或者是:
function loadStyleString(css){
var style = document.createElement("style");
style.type = "text/css";
try{
style.appendChild(document.createTextNode(css));
} catch (ex){
style.styleSheet.cssText = css;//IE写法
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
}
loadStyleString("body{background-color:red}");
操作表格
table属性:
- rows:是一个表格中所有行的HTMLCollection。
- deleteRow(pos):删除指定位置的行。
- insertRow(pos):向rows 集合中的指定位置插入一行。
tr元素的属性:
- cells:保存着元素中单元格的HTMLCollection。
- deleteCell(pos):删除指定位置的单元格。
- insertCell(pos):向cells 集合中的指定位置插入一个单元格,返回对新插入单元格的引用。
HTML5
getElementsByClassName()
HTML5新增getElementsByClassName()方法,getElementsByClassName()方法接收一个参数,即一个包含一或多个类名的字符串,返回带有指定类的所有元素的NodeList。
classList 属性
通过className属性操作class很不方便,因为className 中是一个字
符串,所以即使只修改字符串一部分,也必须每次都设置整个字符串的值。例如要从多个类名中删除’user’类:
<div class="bd user disabled">...</div>
//删除"user"类
//首先,取得类名字符串并拆分成数组
var classNames = div.className.split(/\s+/);
//找到要删的类名
var pos = -1,
i,
len;
for (i=0, len=classNames.length; i < len; i++){
if (classNames[i] == "user"){
pos = i;
break;
}
}
//删除类名
classNames.splice(i,1);
//把剩下的类名拼成字符串并重新设置
div.className = classNames.join(" ");
classList属性:
- add(value):将给定的字符串值添加到列表中。如果值已经存在,就不添加了。
- contains(value):表示列表中是否存在给定的值,如果存在则返回true,否则返回false。
- remove(value):从列表中删除给定的字符串。
- toggle(value):如果列表中已经存在给定的值,删除它;如果列表中没有给定的值,添加它。
这样,操作class就变得简单了:
//删除"disabled"类
div.classList.remove("disabled");
//添加"current"类
div.classList.add("current");
//切换"user"类
div.classList.toggle("user");
//确定元素中是否包含既定的类名
if (div.classList.contains("bd") && !div.classList.contains("disabled")){
//执行操作
)
//迭代类名
for (var i=0, len=div.classList.length; i < len; i++){
doSomething(div.classList[i]);
}
焦点管理
元素获得焦点的方式有页面加载、用户输入(通常是通过按Tab 键)和在代码中调用focus()方法
var button = document.getElementById("myButton");
button.focus();//设置按钮焦点状态
alert(document.activeElement === button); //true
hasFocus方法检测焦点:
var button = document.getElementById("myButton");
button.focus();
alert(document.hasFocus()); //true
通过检测文档是否获得了焦点,可以知道用户是不是正在与页面交互。
HTMLDocument变化
1、readyState属性:
- loading,正在加载文档;
- complete,已经加载完文档。
if (document.readyState == "complete"){//文档加载完毕
//执行操作
}
2、兼容模式
if (document.compatMode == "CSS1Compat"){//标准模式
alert("Standards mode");
} else {//兼容模式
alert("Quirks mode");
}
扩展
children属性
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
var ul = document.getElementsByTagName('ul')[0];
alert(ul.children.length);//3
alert(ul.childNodes.length);//7
children属性只返回子元素节点。
插入HTML/插入文本
四个方法:innerHTML,outerHTML,innerText,outerText。
innerHTML:在读模式下,innerHTML 属性返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的HTML 标记。在写模式下,innerHTML 会根据指定的值创建新的DOM树,然后用这个DOM树完全替换调用元素原先的所有子节点。
outerHTML:在读模式下,outerHTML 返回调用它的元素及所有子节点的HTML 标签,包括元素本身。在写模式下,outerHTML会根据指定的HTML 字符串创建新的DOM 子树,然后用这个DOM子树完全替换调用元素。
innerText:通过innertText 属性可以操作元素中包含的所有文本内容,包括子文档树中的文本。。在通过innerText 读取值时,它会按照由浅入深的顺序,将子文档树中的所有文本拼接起来。在通过innerText 写入值时,结果会删除元素的所有子节点,插入包含相应文本值的文本节点。
outerText:在读取文本值时,outerText 与innerText 的结果完全一样。但在写模式下,outerText 就完全不同了:outerText 不只是替换调用它的元素的子节点,而是会替换整个元素(包括子节点)。
div.outerText = "Hello world!";
//这行代码实际上相当于如下两行代码:
var text = document.createTextNode("Hello world!");
div.parentNode.replaceChild(text, div);