JS获取MOD属性和DOM方法

最新推荐文章于 2024-06-30 04:12:20 发布

冒险岛_0_

最新推荐文章于 2024-06-30 04:12:20 发布

阅读量817

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/qq_41741971/article/details/89801754

版权

Javascript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1、DOM节点（树）

DOM树：HTML下面的head和body、head下面有meta、style、title、body下面的有一些div标签，

像这种就是DOM树；

nodeType:

任何的HTML元素都有nodeType属性，值1-11，原生js属性

只需要掌握4个

值：

1 元素节点

3 文本节点（空格也是文本节点）

8 注释节点

9 document节点

2、获取DOM属性（4种）

对象.childNodes --获取对象下面的子节点，获取所有子元素，返回类数组

1、children --仅仅获取元素节点

2、parentNode ----获取父级节点，只有一个

3、previousSibling -----上一个兄弟节点

4、nextSibling ---下一个兄弟节点

<style>
    p{
        width: 100px;
        height: 100px;
        background-color: #cccccc;
        margin: 10px;
    }
</style>
<body>
    <div id="box">
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
</body>
<script>
    /* childNodes有兼容问题 */
    var oBox = document.querySelector('#box');
    console.log(oBox.childNodes[0].nodeType);//IE8级以上3 文本节点 IE8以下 1 元素节点
    console.log(oBox.childNodes[1].nodeType);//1 元素节点
    
    /* children 获取子节点*/
    console.log(oBox.children[1].nodeType);//1 元素节点  children只会获取元素节点
    
    /* parentNode 获取父节点*/
    console.log(oBox.parentNode().nodeType);// 父节点只能有一个,返回一个object对象
    
    /* previousSibling 获取上一个兄弟节点 */
    console.log(oBox.previousSibling.nodeType); //3 text
    
    /* nextSibing 获取上一个兄弟节点 */
    console.log(oBox.perviousSibing.nodeType);//3 text
</script>

2、原生JS节点操作（6种）

增、删、改、复制

增加

1、obj.createElement(str) ---创建节点，不能重复的使用

2、obj.appendChild(a) ---在子节点末尾添加子节点

3、obj.insertBefore(a,b) ---a（新儿子），b（原有标杆儿子），将节点添加到标杆节点前

/* 创建 增加 */
/*创建节点 */
var p = document.createElement('p');//创建p节点，但是还没有添加上DOM树

/* 增加节点 */
oBox.appendChild(p);

/* 给节点添加样式 */
p.innerHTML = '4';
p.style.backgroundColor = 'deeppink';

/* 在指定子节点前添加子节点 */
oBox.insertBefore(ap[2],ap[0]);

删除

4、obj.removeChild(儿子) ---父级删除儿子

/* 删除 */
oBox.removeChild(aP[0]);

/* 想删除自己必须先找到父级，再去删除自己 */
ap[1].parentNode.removeChild(ap[1]);

修改（替换）

5、replaceChild(a,b)

/* 
    replaceChild(新儿子,老儿子) 替换节点， 
    替换后老儿子会被删除掉，而新儿子会替代老儿子节点，
    这样的话总的节点会失去一个老儿子节点
*/
oBox.replaceChild(aP[0],aP[2]);

复制

6、cloneNode()

/* cloneNode()  克隆节点 克隆之后是没有父级节点的
    克隆好以后就是一个孤儿节点，必须要通过其他方法添加到DOM数上
*/
var a = aP[0].cloneNode(true); // true--深度克隆，如果没有参数就是浅克隆
oBox.appendChild(a);