查找和编辑节点

1·获取行内样式

    通过.style 获取的都是元素的行内样式,非行内样式获取不到

    例:var text= document.ElementByTagName("p");

       text.style.color = "yellow"  对样式进行设置,有赋值操作

       text.style.width;          对样式进行获取,没有赋值操作


2·获取行内及非行内样式

    window.getComputedStyle  -------     W3C标准提供的方法,符合w3c标准的浏览器通过它获取样式

    element.currentStyle:  -------      非w3c标准的浏览器获取方法(IE)

    可以通过相关属性来对浏览器进行判断

    如果BOM对象存在window.getComputedStyle属性则为w3c标准浏览器 否则为IE浏览器

    例: var text = document.getElementById("p");

        if (window.getComputedStyle){

           getComputedStyle(text).color;   获取文本color属性

        }else {

           text.cuurentStyle.color;  

        }

        text.tagName  ---  获取标签名称

        text.innerHTML ---  获取整个文本结构

        text.innerText --- 获取文本


3·查找节点

    通过父元素去查找子元素

    例:var ul = document.getElementById("ul"); (后面的例子通用)

       ul.firstChild;空格和换行也会被当做一个子元素被找到

       ul.firstElementChild  只会找到元素节点忽略空格和换行

     通过子元素找到父元素

    例:var li2 = document.getElementById("li2");

         li2.parentNode;

    通过父元素查找所有子元素

    例:ul.childNodes  返回所有节点 空格 换行

       ul.children    只返回当前标签下的元素节点

    返回整个文档

    例:ownerDocument

     返回前一个同级节点

     例:li2.previousSibling  返回 节点 空格 换行

        li2.previousElementSibling  只返回节点

     返回后一个同级节点

     例:li2.nextSibling  返回节点 空格 换行

        li2.nextElementSibling  只返回节点


4·创建和克隆节点

       createElement()  -----  创建一个全新的 标签,不包含任何内容和属性  

       appendChild() ---      把一个字元素追加到父元素后面

       cloneNode   ---        复制整元素的全部信息

       cloneNode(布尔值)---  布尔值为true  完全复制     布尔值为false 复制标签 不复制内容

       insertBefore()  ----- 在一个元素之前插入一个新的元素

       参数1:你要新增的元素

       参数2:在哪个元素之前插入

5·移除和替换节点

       removeChild  移除一个字元素

       replacechild()  用一个心元素去替换另一个元素 有两个参数

       参数1:新的元素

       参数2:想要替换的元素

       

             




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值