js前端开发Dom操作

全屏前端开发简历|前端开发的简历模板|网页前端开发流程
js Dom 操作
一.document获取节点的基本方法
1.document.getElementById(‘id’); //通过id来获取元素,返回指定的唯一元素。
2.document.getElementsByName(“name”); //通过name来获取元素,返回name=’name’的集合。
3.document.getElementsByClassName(“classname”) //用classname来获取元素,返回的是一个class=”classname”的集合(不兼容IE8及以下)。
4.document.getElementsByTagName(‘div’); //用元素的标签获取元素,返回所有标签=“div”的集合。
getElementsByClassName不兼容ie8及以下,所以需要做兼容,搜集到以下两种方式:
[code]//兼容IE getElementsByClassName取标签 方法一
//写成一个函数,每次调用这个函数
function getElementsByClassName(className,root,tagName) { //root:父节点,tagName:该节点的标签名。 这两个参数均可有可无
if(root){
root=typeof root==”string” ? document.getElementById(root) : root;
}else{
root=document.body;
}
tagName=tagName||”*”;
if (document.getElementsByClassName) { //如果浏览器支持getElementsByClassName,就直接的用
return root.getElementsByClassName(className);
}else {
var tag= root.getElementsByTagName(tagName); //获取指定元素
var tagAll = []; //用于存储符合条件的元素
for (var i = 0; i < tag.length; i++) { //遍历获得的元素
for(var j=0,n=tag[i].className.split(‘ ‘);j<n.length;j++){ //遍历此元素中所有class的值,如果包含指定的类名,就赋值给tagnameAll
if(n[j]==className){
tagAll.push(tag[i]);
break;
}
}
}
return tagAll;
}
}
//兼容IE getElementsByClassName 方法2
//重新定义getElementsByClassName方法
if(!document.getElementsByClassName){//判断是否是ie
document.getElementsByClassName = function(className, element){
var children = (element || document).getElementsByTagName(‘*’);
var elements = new Array();
for (var i=0; i<children.length; i++){
var child = children[i];
var classNames = child.className.split(‘ ‘);
for (var j=0,len=className.length; j<len; j++){
if (classNames[j] == className){
elements.push(child);
break;
}
}
}
return elements;
};
}[/code]
二.js 节点操作方法
1.获取节点
document.documentElement //获取整个html Dom结构
element.childNodes //得到element的全部子节点
element.parentNode //得到element的父节点
element.nextSibling //得到element的下一个兄弟节点
element.previousSibling //得到element的上一个兄弟节点
element.firstChild //得到element的第一个节点
element.lastChild //得到element的最后一个节点
* example : console.log(element.nextSibling.previousSibling);
2.节点 获取/设置 属性
*element.setAttribute(“class”,”class1″) //设置元素属性
*element.getAttribute(“class”) //获取元素属性
*element.removeAttribute(“class”) //删除元素属性
* example : element.parentNode.setAttribute(“id”,”bannerUl”);
3.创建节点
createElement() //创建标签名为tagname的元素
createTextNode() //创建包含文本text的文本节点
createDocumentFragment() //创建文档碎片节点
* example: document.createElement(“p”);
* example: document.createTextNode(“Hellow world”);
* document.createDocumentFragment()说白了就是为了节约使用DOM。每次JavaScript对DOM的操作都会改变页面的变现,并重新刷新整个页面,从而消耗了大量的时间。为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中。
4.添加、移除、替换、复制节点。
element.appendChild() //向节点的子节点列表末尾增加一个新的节点
element.insertBefore(newchild,refchild) //向某个子节点的前面插入一个节点 newchild新的节点 refchild指定的节点
element.removeChild() //删除某个节点 只能删除下一级的节点
element.replaceChild(newnode,oldnode) //替换DOM节点的方法 newnode新的节点 oldnode需要替换的节点
element.cloneNode(Boolean) //设置为 true,克隆节点及其属性,以及后代, 设置为 false,则只克隆节点及其属性,不克隆后代节点
element.cloneNode //不同于一般的赋值 varli = childodeClear(ul2).childNodes[0].cloneNode(true) != varli = childodeClear(ul2).childNodes[0]; 后者是赋值一个内存地址,所以操作会改变原来的节点
常见问题:
用element.childNodes获取一个节点的子元素集合的时候(ul获取li集合),如果里面有很多空格/回车,子集的长度会不符合子集个数。需要手动清除回车、空格
代码片段 1
<div id=”banner”>
    <ul class=”ul”>
        <li>
            <a>1</a>
        </li>
        <li>
            <a>2</a>
        </li>
        <li class=”li3″>
            <a>3</a>
        </li>
        <li>
            <a>
                <i>4sdfsfsdfsfsdfsfsfsdf</i>
            </a>
        </li>
    </ul>
</div>
<script type=”text/javascript”>
    var banner = document.getElementById(‘banner’);
    var ul = banner.getElementsByTagName(‘ul’)[0];
    console.log(“清除前的ul子集个数:” + ul.childNodes.length);
    var ul2 = childodeClear(ul);
    console.log(“清除后的ul子集个数:” + ul2.childNodes.length);
/*
    *函数名:childodeClear清除掉父元素多余的空白节点(兼容不同浏览器);
    */
    function childodeClear(elem) {
        var elem_child = elem.childNodes;
        for (var i = 0; i < elem_child.length; i++) {
            if (elem_child[i].nodeName == “#text” && !/\s/.test(elem_child.nodeValue)) {
                elem.removeChild(elem_child[i]);
            }
        }
        return elem;
    }
</script>
前端开发的简历模板|网页开发前端书籍|前端网页开发代码编辑器
» 本文来自:前端开发者 » 《js前端开发Dom操作》
» 本文链接地址:https://www.rokub.com/5032.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!