使用js操作元素节点

Posted 2020-11-21 哈希尔~兰登

1 节点的访问关系以属性形式存在?

box1.nextElementSibling           获取box1的下一个兄弟节点 ;

 

box1.parentNode.childNodes    获取所有的子节点

box1.parentNode.children         获取所有的子节点

box1.parentNode.firstElementChild        选中自己

 

 

2 节点的操作?

    创建节点: var  aaa = document.createElement(‘li‘);

    添加节点: box1.appendChild(aaa);    

                   box1.insertBefore(bbb,aaa);

                   box1.insertAfter();

    删除节点: box1.removeChild(aaa);

                   aaa.parentNode.removeChild(aaa);       //删除自己

   替换节点:  box1.replaceChild(aaa,targetNode);

 

3 设置或获取元素节点的两种方式?

   

    <img src="images/jd.jpg" alt="狗" title=‘图片‘ class=‘box‘ id=‘aaa‘>

 

    var eleNode = document.getElmentsByTagName(‘img‘)[0];

    //设置值

    eleNode.src = ‘images/tm.png‘;

    eleNode.bbb = ‘huihua‘;

    eleNode.setAttribute(‘id‘,‘dog‘);

    eleNode.setAttribute(‘ccc‘,‘huihua‘);

 

    //获取值

    console.log(eleNode.tagName);

    console.log(eleNode.getAttribute(‘id‘));

 

    //删除值

    eleNode.removeAttribute(‘id‘);