DOM操作

最新推荐文章于 2020-02-01 22:07:46 发布

EddieRoyal

最新推荐文章于 2020-02-01 22:07:46 发布

阅读量480

点赞数

分类专栏： javascript 文章标签： dom javascript

本文链接：https://blog.csdn.net/IE_World/article/details/50285533

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

标签：css
元素：JS
节点：DOM

获取元素的方法：
getElmentById
getElementsByTagName

DOM document

获取子节点：

var oUl = document.getElementById("ul1");
//获取子节点childNodes
oUl.childNodes   //11
//这个不仅仅是获取我们想要的子节点，还会获取多余的子节点(会将期间的空格算作一个子节点)

这是一段文字  //文本节点

<span>这是一段文字</span?     //元素节点

nodeType（节点的类型）

for(var i=0;i<oUl.childNodes.length;i++){
    if(oUl.childNodes[i].nodeType==1){
        oUl.childNodes[i].style.background="red";
    }
}

childNodes(获取子节点)
children(只获取元素)
parentNode(获取父节点)
offsetParent(此元素相对于哪一个父元素的定位)可用来检测此个元素的相对于哪一个元素进行的定位的父级
firstChild(childNodes)、firstElementChild
lastChild、lastElementChild
兄弟节点 nextSibling、nextElementSibling
previousSibling、previousElementSibling
DOM方式操作元素属性
- 获取：getAttribute（名称）
- 设置：setAttribute(名称，值)
- 删除：removeAttribute(名称)

var oDiv2 = document.getElementById("div2");

alert(oDiv2.offsetParent); //body

<body>
<div id="div2">
</div>
</body>

//封装getElmentsByClassName的方法

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;
}

创建一个节点 creatElement();

追加一个节点：appendChild();

appendChild()会先删除原有的Elment,然后再添加到新的目标标签之后

插入元素

insertBefore(节点，原有节点) //在已有元素前插入


父级.appendChild(子节点)；
父级.insertBefore(子节点,原有节点)

if(ali.length>0) {
    oUl.insertBefore(oLi,ali[0]);
}else {
    oUl.appendChild(oLi);
}

删除元素

removeChild()

父级.removeChild();

文档碎片

文档碎片可以提高DOM操作性能
文档碎片原理
document.createDocumentFragment()

var oUl = document.getElementById("ul1");

var oFrag = document.createDocumentFragment();

for(var i=0;i<10000;i++)  {
    var oLi = document.createElement('li');
    oFrag.appendChild(oLi);
}
oUl.appendChild(oFrag);

表格

tBodies
thead(唯一)
tFoot（唯一）
rows
cells

<table>
    <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>解开了</td>
            <td>12</td>
        </tr>
    </tbody>
</table>

search

str.search(ad);  //没有，返回-1，存在返回ad所在序列位置数字

split()

分割字符

var str = " 1 2 ";

str.split(" ");  //[1,2]

sort()进行排序

//只能使用Arry数组排序
arr.sort（function(n1,n2) {
    return n1-n2;
}）；

表单

//后台通过name获得数据
<form action="http://baidu.com/">
    用户名：<input type="text" name="user" /><br>
    密码：<input type="password" name="password" />
    <input type="submit" />
</form>

onreset 重置

表单验证

阻止用户输入非法字符阻止事件
输入时、失去焦点时验证 onkeyup、onblur
提交时检查 onsubmit
后台数据检查

EddieRoyal

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM操作

标签：css 元素：JS 节点：DOM获取元素的方法： getElmentById getElementsByTagNameDOM document获取子节点：var oUl = document.getElementById("ul1");//获取子节点childNodesoUl.childNodes //11//这个不仅仅是获取我们想要的子节点，还会获取
复制链接

扫一扫