文档章节

javascript-DOM-操作

啃不动地大坚果
 啃不动地大坚果
发布于 2017/04/26 22:11
字数 553
阅读 56
收藏 1

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.操作表格
为<table>元素添加的属性和方法如下。
caption:保存着对<caption>元素(如果有)的指针。
tBodies:是一个<tbody>元素的 HTMLCollection。
tFoot:保存着对<tfoot>元素(如果有)的指针。
tHead:保存着对<thead>元素(如果有)的指针。
rows:是一个表格中所有行的 HTMLCollection。
createTHead():创建<thead>元素,将其放到表格中,返回引用。
createTFoot():创建<tfoot>元素,将其放到表格中,返回引用。
createCaption():创建<caption>元素,将其放到表格中,返回引用。
deleteTHead():删除<thead>元素。
deleteTFoot():删除<tfoot>元素。
deleteCaption():删除<caption>元素。
deleteRow(pos):删除指定位置的行。
insertRow(pos):向 rows 集合中的指定位置插入一行。
为<tbody>元素添加的属性和方法如下。
rows:保存着<tbody>元素中行的 HTMLCollection。
deleteRow(pos):删除指定位置的行。
insertRow(pos):向 rows 集合中的指定位置插入一行,返回对新插入行的引用。
为<tr>元素添加的属性和方法如下。
cells:保存着<tr>元素中单元格的 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 循环取值时要特别注意时时更新造成的死循环

 

© 著作权归作者所有

啃不动地大坚果
粉丝 6
博文 119
码字总数 153788
作品 0
其它
程序员
私信 提问
学习Javascript的8张思维导图

分别归类为:  javascript变量  javascript运算符  javascript数组  javascript流程语句  javascript字符串函数  javascript函数基础  javascript基础DOM操作  javascript正则表达式...

thinkyoung
2014/09/23
0
0
WebView动态注入JavaScript脚本

Demo地址:https://gitee.com/chenyangqi/YouMeDai 背景介绍 在Android与JavaScript交互一文中学习了原生和JS交互,但是如果我们想和别人开发好的web页面交互呢,很明显这个web端并没有为我们...

木头同学
2018/08/07
0
0
《JavaScript 权威指南》读书笔记 1 - 简介

原文:https://keelii.github.io/2016/06/16/javascript-definitive-guide-note-0/ 第一章 主要介绍 JavaScript 的大概情况、基本语法。之前没有 JavaScript 基础的看不懂也没关系,后续章节...

keelii
2016/06/24
0
0
javascript和web 调试技术

在前端开发中,调试技术是必不可少的技能,本文将介绍五种前端开发必备的调试技术。 Weinre移动调试 DOM 断点 debugger断点 native方法hook 远程映射本地调试 Weinre 在移动上面开发调试是很...

那山那水
2014/03/02
0
0
JavaScript是如何工作的:编写自己的Web开发框架 + React及其虚拟DOM原理

摘要: 深入JS系列19。 原文:JavaScript是如何工作的:编写自己的Web开发框架 + React及其虚拟DOM原理 作者:前端小智 Fundebug经授权转载,版权归原作者所有。 这是专门探索 JavaScript 及...

Fundebug
01/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JWT学习总结

官方 https://jwt.io 英文原版 https://www.ietf.org/rfc/rfc7519.txt 或 https://tools.ietf.org/html/rfc7519 中文翻译 https://www.jianshu.com/p/10f5161dd9df 1. 概述 JSON Web Token(......

冷基
今天
4
0
AOP的学习(1)

AOP 理解AOP编程思想(面向方法、面向切面) spring AOP的概念 方面 -- 功能 目标 -- 原有方法 通知 -- 对原有方法增强的方法 连接点 -- 可以用来连接通知的地方(方法) 切入点 -- 将用来插入...

太猪-YJ
今天
4
0
一张图看懂亮度、明度、光度、光亮度、明亮度

亮度、明度、光亮度,Luminance和Brightness、lightness其实都是一个意思,只是起名字太难了。 提出一个颜色模型后,由于明度的取值与别人的不同,为了表示区别所以就另想一个词而已。 因此在...

linsk1998
昨天
11
0
Python应用:python链表示例

前言 python链表应用源码示例,需要用到python os模块方法、函数和类的应用。 首先,先简单的来了解下什么是链表?链表是一种物理存储单元上非连续、非顺序的存储结构,数据元素的逻辑顺序是...

python小白1
昨天
5
0
Source Insight加载源码

Source Insight是一个图形化的源代码查看工具(当然也可以作为编译工具)。如果一个项目的源代码较多,此工具可以很方便地查找到源代码自建的依赖关系。 1.创建工程 下图为Snort源代码的文件...

天王盖地虎626
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部