javascript-DOM-操作

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

1.动态脚本
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "client.js";
document.body.appendChild(script);

var script = document.createElement("script");
script.type = "text/javascript";
var code = "function sayHi(){alert('hi');}";
try {
script.appendChild(document.createTextNode("code"));
} catch (ex){
script.text = "code";
}
document.body.appendChild(script);


2.动态样式
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "style.css";
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);

var style = document.createElement("style");
style.type = "text/css";
try{
style.appendChild(document.createTextNode("body{background-color:red}"));
} catch (ex){
style.styleSheet.cssText = "body{background-color:red}";
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);

3.操作表格

元素添加的属性和方法如下。
caption:保存着对元素的 HTMLCollection。
tFoot:保存着对元素(如果有)的指针。
tHead:保存着对元素(如果有)的指针。
rows:是一个表格中所有行的 HTMLCollection。
createTHead():创建元素,将其放到表格中,返回引用。
createTFoot():创建元素,将其放到表格中,返回引用。
createCaption():创建元素。
deleteTFoot():删除元素。
deleteCaption():删除元素添加的属性和方法如下。
rows:保存着元素中行的 HTMLCollection。
deleteRow(pos):删除指定位置的行。
insertRow(pos):向 rows 集合中的指定位置插入一行,返回对新插入行的引用。
为元素添加的属性和方法如下。
cells:保存着元素中单元格的 HTMLCollection。
deleteCell(pos):删除指定位置的单元格。
insertCell(pos):向 cells 集合中的指定位置插入一个单元格,返回对新插入单元格的引用。

eg:
//创建 table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";
//创建 tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);
//创建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));
//创建第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));
//将表格添加到文档主体中
document.body.appendChild(table);

4.使用NodeList
NodeList NamedNodeMap 和 HTMLCollection都是“动态的”;换句话说,每当文档结构发生变化时,它们都会得到更新。对NodeList 循环取值时要特别注意时时更新造成的死循环

 

转载于:https://my.oschina.net/dajianguo/blog/887950

你可能感兴趣的:(javascript-DOM-操作)

元素(如果有)的指针。
tBodies:是一个
元素,将其放到表格中,返回引用。
deleteTHead():删除
元素。
deleteRow(pos):删除指定位置的行。
insertRow(pos):向 rows 集合中的指定位置插入一行。