关于javascript中DOM的理解和应用01

DOM(Document Object Model):
是文档对象模型,赋予js操作节点的能力。当网页被加载时,浏览器会创建页面的文档对象模型。

寻找HTML元素:
1、通过id、找到HTML元素(getElementById())
2、通过标签名找到HTML元素(getElementsByTagName())--通过该方式获取的是数组
3、通过类名找到HTML元素(getElementsByClassName())

每个载入浏览器的 HTML 文档都会成为 Document 对象

1、JavaScript 能够改变页面中的所有 HTML 元素
2、JavaScript 能够改变页面中的所有 HTML 属性
3、JavaScript 能够改变页面中的所有 CSS 样式
4、JavaScript 能够对页面中的所有事件做出反应

DOM节点(childNodes、nodeType):
节点分为文本节点和元素节点(标签)
例 `<ul id='ul1'><li><li></ul>` 
`for(var i=0;i<oUl.childNodes.length;i++){alert(oUl.childNodes[i].nodeType);}`在js中循环输出节点类型,得3 1 3 1 3;文本节点为3,元素节点为1;children可以获取子节点


可以通过类名来选择元素:
通过声明封装函数,再进行调用
function getByClass(oParent, sClass)
    {
        var aResult=[];
        var aEle=oParent.getElementsByTagName('*');

        for(var i=0;i<aEle.length;i++)
        {
            if(aEle[i].className==sClass)
            {
            aResult.push(aEle[i]);
            }
        }

        return aResult;
    }

通过createElement(标签名) 创建一个节点,appendChild(节点) 加一个节点
var XX=document.createElement(”)–创建一个节点
父级.appendChild(子节点)
创建出来的节点通过.innerHTML进行赋值 XX.innerHTML=XX.value;
.insertBefore可以让新建的节点倒序插入
removeChild(节点) 删除一个节点

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值