动态脚本

在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);


阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6