JS Dom节点操作demo!

通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习

需求:使用js创建一个4*3的表格table.

onload = function(){
        function c(tagName){
            return document.createElement(tagName);
        }
        var table = c(‘table‘);
        var tbody = c(‘tbody‘);
        table.appendChild(tbody);
        for(var i = 0;i<4;i++){
            var tr = c(‘tr‘);
            for(var j = 0;j<3;j++){
                var td = c(‘td‘);
                //在td中放置文本
                var txt = document.createTextNode(‘‘);
                td.appendChild(txt);
                tr.appendChild(td);
                td.width = 200;
                td.height = 50;
            }
            tbody.appendChild(tr);
        }
        table.setAttribute(‘border‘,‘1‘);
        document.body.appendChild(table);
    };
时间: 2024-10-17 13:26:03

JS Dom节点操作demo!的相关文章

原生JS的DOM节点操作

DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节点. 操作DOM节点的方式无非就是:创建.添加(插入).移除.替换.查找(获取).克隆DOM节点. 创建文本节点:var newText = document.createTextNode('文本节点');创建标签节点:var newNode = document.createElement('di

(转载)html dom节点操作(获取/修改/添加或删除)

DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下 HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.在 HTML DOM 中,所有事物都是节点.DOM 是被视为节点树的 HTML. 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节

深入理解DOM节点操作

× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节点操作方法 前提 DOM提供节点操作的方法是因为DOM节点关系指针都是只读的 下列代码中想通过修改myUl的父级节点来修改其节点关系,但由于parentNode属性是只读的,所以修改无效,在IE8-浏览器下甚至会报错 <div id="myDiv"></div> &

jQuery DOM节点操作 - 父节点、子节点、兄弟节点

------------------------------------------------------------------- 源文地址: http://www.cnblogs.com/yunlei0821/p/7577400.html ,转载请务必保留此出处. 子(/孙)节点: .children([selector]). 获得匹配元素集合中每个元素的所有直接子元素(选择器可选). 实例: <div> <a href="#"><span>w

javasript 的DOM 节点操作:创建,插入,删除,复制以及查找节点

DOM 含义: DOM 是文档对象模型(Document Object Model) 是一种基于浏览器编程的一套API 接口,我W3C 出台推荐的标准.其赋予了JS 操作节点的能力,当网页被加载时,浏览器就会创建页面的文档对象模型. 节点: 根据W3C的HTML DOM 标准,HTML 文档中的所有内容都是节点. 1. 整个文档是一个文档节点 2. 每个HTML元素是元素节点 3. HTML元素内的文本是文本节点 4.每个HTML属性都是属性节点 5.每个注释都是注释节点 所以HTML DOM

JavaScript基础及函数,BOM,DOM的节点及DOM节点操作

使用js的三种方式 1.直接在HTML标签中,使用事件属性,调用js代码: <button onclick="alert('点我呀')">点我啊!<tton> 2.在页面的任意位置,使用script标签 <script type="text/javascript"> alert('哈哈哈') </script> 3.外部:使用script标签 src属性选择外部地址, type属性选择"text/javasc

JS DOM基础 操作属性、类、CSS样式

操作属性和类 一.属性节点操作 文本节点内容的获取和修改: 语法:elementNode.attributeName ( 元素节点.属性名)     也可以使用“[ ]” ( 元素节点[属性名]) 注意:一般我们操作属性节点时是不需要获取属性节点的,而是直接通过元素节点获取(/修改)属性节点的值.      特别的,有些属性名称与js关键字或者保留字冲突了,只能用另外的名字: class属性:要写成className(class是关键字). label标签的for属性:写成htmlFor. 通过

jQuery DOM 节点操作

DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面中的元素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建.插入.替换.克隆.删除等等一些列的元素操作. 一.创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. $('div').append('<strong>节点</strong>'); //向 div 内部插入 strong 节点 $('di

DOM 节点操作

DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面中的元 素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建. 插入.替换.克隆.删除等等一些列的元素操作. 一.创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. //创建一个节点  var box=$('<div id="box">节点</div>'); //将节点插入到&