JavaScript DOM节点

是阿信ya

于 2022-11-20 14:03:30 发布

阅读量208

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_53972864/article/details/127947828

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

attributes属性: 返回该元素节点的属性节点集合。
box.attributes //[object NamedNodeMap]
box.attributes.length; //返回属性节点个数
box.attributes[0]; //[object Attr], 返回第一个属性节点
box.attributes[0].nodeType; //1为元素节点，2为属性类型，3为文本节点
box.attributes[0].nodeName; //属性名称
box.attributes[0].nodeValue; //属性值
box.attributes[‘id’]; //返回属性名称为id的节点
box.attributes.getNamedItem(‘id’); //返回属性名称为id的节点

firstChild 和 lastChild 属性

childNodes: 子节点集合
firstChild 用于获取当前元素节点的第一个子节点，相当于 childNodes[0]；
lastChild 用于获取当前元素节点的最后一个子节点，相当于 childNodes[box.childNodes.length- 1]。
//获取第一个子节点的文本内容
console.log(box.firstChild.nodeValue);
//获取最后一个子节点的文本内容
console.log(box.lastChild.nodeValue);

parentNode/ previousSibling/ nextSibling属性

parentNode 属性返回该节点的父节点，
previousSibling 属性返回该节点的前一个同级节点，
nextSibling 属性返回该节点的后一个同级节点。
alert(box.parentNode.nodeName); //获取父节点的标签名 alert(box.lastChild.previousSibling); //获取该节点的倒数第二个子节点
alert(box.firstChild.nextSibling); /获取该节点的第二个子节点

ownerDocument 属性

ownerDocument 属性返回该节点的文档对象根节点，返回的对象相当于 document。
alert(box.ownerDocument=== document); //true，根节点

方法	说明
write()	这个方法可以把任意字符插入到文档中
createElement()	创建一个元素节点
appendChild()	将新节点追加到子节点列表末尾
createTextNode	创建一个文本节点
insertBefore	将新节点插入在前面
repalceChild()	将新节点换取旧节点
cloneNode()	复制节点
removeChild()	移除节点

offset、client

offsetWidth：元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
offsetHeight：元素的高度（包括元素高度、内边距和边框，不包括外边距）
clientWidth：元素的宽度（包括元素宽度、内边距，不包括边框和外边距）
clientHeight：元素的高度（包括元素高度、内边距，不包括边框和外边距）
offsetTop：获取当前元素到定位父节点的top方向的距离，offsetLeft、offsetRight、offsetBottom：同理

下面是代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        background-color: #ccc;
        width: 300px;
        height: 300px;
    }
</style>

<script type="text/javascript">
// 页面加载完成立即执行
window.onload=function(){
    //方法返回文档中匹配指定 CSS 选择器的一个元素。
    var box=document.querySelector(".box");
    // 按id
    var box1=document.getElementById("box1");
    

    // 返回属性个数
    console.log(box.attributes.length);
    // attributes属性：返回该节点的属性集合
    for(var i=0;i<box.attributes.length;i++){
         // 返回属性名称
        console.log(box.attributes[i].nodeName);
        // 返回属性值
        console.log(box.attributes[i].nodeValue);
        // 返回属性类型1表元素节点，2表属性 3表文本节点
        console.log(box.attributes[0].nodeType);

    }
    // 返回属性类型
    console.log(box.nodeType)
    // 返回属性名称为id的节点
    console.log(box.attributes['id'])
    console.log(box.attributes.getNamedItem('id'))

    //返回子节点集合
    var childNode=box.childNodes
    // 返回第一个子节点 即第二个盒子
    var firstChild=box.firstChild
    // 返回最后一个子节点 即第三个盒子
    var lastChild=box.lastChild


    console.log(childNode.length)

    for(let i=0;i<childNode.length;i++){
            console.log(childNode[i]) 
    }
    console.log(childNode[1].innerHTML)
    var u=box.querySelector('u')
    //获取第一个子节点的文本内容
    console.log(firstChild.nodeValue)
    //获取最后一个子节点的文本内容
    console.log(lastChild.nodeValue)
    //返回该节点的父结点
    console.log(box1.parentNode)
    //返回该属性的前一个同级节点
    console.log(u.previousSibling)
    //获取父节点的标签名
    console.log(box1.parentNode.nodeName)
    //获取该节点的倒数第二个子节点
    console.log(box1.lastChild.previousSibling)
    //返回该节点的对象根节点，返回对象相当于document
    console.log(box.ownerDocument==document)

    // box1.write("123");

    var createp=document.createElement("p")
    createp.innerHTML="123"
    //添加子节点
    box1.appendChild(createp)
    //添加节点在前面 父节点调用
    // box.insertBefore(createp,box1)
    //替换节点 父节点调用
    // box.replaceChild(createp,box1)
    //复制节点 true表节点值也复制 默认为false
    box.appendChild(createp.cloneNode(true))

    //创建一个文本节点
    var text=document.createTextNode('456')
    box.append(text)


}
</script>

<body>
    <!-- 在 HTML DOM 中，一个属性节点就是一个属性对象，代表 HTML 元素的一个属性。一个元素可以拥有多个属性 -->
    <div id="abox" name="bbox" class="box">
        <u>我是第一个盒子的u标签</u><u>我是第一个盒子的第二个u标签</u>
        <div id="box1">
            <p>我是第二个盒子的p标签</p>
        </div>
        <div>
            <u>我是第三个盒子的p标签</u>
        </div>
    </div>
</body>
</html>