js中的DOM节点

最新推荐文章于 2024-07-29 13:58:45 发布

吃瓜瓜瓜

最新推荐文章于 2024-07-29 13:58:45 发布

阅读量339

点赞数 1

文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_53125449/article/details/112490705

版权

文章目录

1.DOM

我们的页面是由节点组成的，每一个组成部分都是一个节点。
节点的分类：

元素节点 html标签 img body input div
文本节点文字部分
属性节点标签内的属性
注释节点

1.document

页面中最大的节点，有且只有一个。不属于元素节点，是页面中所有节点的容器。根节点。

2.html

页面中最大的元素节点。根元素节点。

3.元素节点

html标签

4.文本节点

每一段文本内容都是一个文本节点
包含换行和空格
一般来说作为元素节点的子节点存在。

5.属性节点：

属性节点不能单独存在，必须依赖于元素节点。

6.注释节点

页面中的注释，作为说明文本使用户。

2.自定义获取元素节点方法

 <script>
        /**
        node 表示传入的节点，获取该节点的元素节点。
        classStr 表示传入的classname ，通过classname匹配元素节点
        */
        function elementsByClassName(node,classStr){
            // 1.获取node这个节点下面的所有子节点。
            var nodes = node.getElementsByTagName("*");
            // 2.存放符合条件的节点
            var arr = [];
            //3.遍历所有的子节点
            for (var i = 0; i < node.length; i++) {
                //4.判断子节点的class是否与传入的classStr相等
               if(nodes[i].className === classStr){
                   //5.若相等，则将其放入数组中。
                   arr.push(nodes[i]);
               }
            }
            return arr;
        }
    </script>

3.操作元素节点的属性

标签上的属性分类：

原生属性
自定义属性
H5 自定义属性
1.原生属性
语法：元素.属性名
修改/新增：
元素.属性名 = “值”
获取：
元素.属性名

<script>
var r = document.getElementsByClassName('xc')[0];//获取属性值；
r.className=("box"); //修改:元素.属性名="值"，alass属性修改需要使用className；
<script>


<body>
    <div id="xx" class="xc" data-index="rush" ></div>
</body>

【注意】class属性是例外，不能直接通过属性名获取，而是用className

2.自定义属性

不能直接使用元素. 这个语法来获取。
三个方法去操作：
获取：
1. getAttribute(“属性名”);
2. 返回值：字符串
设置：

setAttribute(“属性名”,"属性值；
删除：
removeAttribute(“属性名”）

<script>
 var v = document.getElementsByTagName("div")[0];
 v.setAttribute("index","gogo");//修改自定义属性，修改为属性值：gogo；
 v.removeAttribute("index");//删除自定义属性，返回之前属性值：rush；
</script>


<body>
    <div id="xx" class="xc" data-index="rush" ></div>
</body>

【注意】这三个方法也可以操作原生属性

3.H5 自定义属性

每一个元素节点上都有一个属性：dataSet
里面包含了所有的H5自定义属性。
键值对结构：例子;data-id =“idBox”
key：data-XXX xxx的内容。
value:属性值

获取：
元素.dataset.key

设置：

元素.dataset.key = “值”
删除：
delete 元素.dataset.key

4.操作元素的类名

1.按照原生属性的方式来操作
获取：

元素.className
设置：
元素.className = “值”
追加：
元素className +=”值“

注;追加时元素前面加上空格
删除：

重新设置一遍
获取classname属性值、
按照空格去分割字符串
数组的join方法

2.H5标准给我们一个API

元素节点都有一个属性叫做：classList
里面包含了所有的class值。

获取：

元素.classList 获取class值的集合。
想要获取单个，使用下标。

新增：

元素.classList.add(“新增的类名”)

删除：
元素.classList.remove(“删除的类名”)

替换：

元素.classList.replace(“旧类名”,“新类名”) ;

toggle() 切换

语法：元素.classList.toggle(类名)
当元素拥有这个类名时，将类名删除
当元素没有这个类名时，将类名添加

<script>
            //h5标准
            var s = document.getElementsByTagName("div")[0];
            //新增
            s.classList.add('s','a');
            //删除
            s.classList.remove('s')
            //替换
            s.classList.replace('a','b')
            //切换，当元素没有这个类名是，将新增这个元素；元素有这个类名是将删除元素；
            s.classList.toggle('d');//新增d
            s.classList.toggle('b');//上方已经拥有了b属性所以会删除b
            //获取
            console.log(s.classList);
</script>


<body>
    <div id="xx" class="xc" data-index="rush" ></div>
</body>

5.操作元素中的节点按钮

1.innerHTMl

获取元素节点中除了本身的标签外，所有的HTML代码。
获取：
元素.innerHTML
设置：
元素.innerHTMl = “新的内容”
【注意】 innerHTML 会覆盖原有的内容，而且会解析其中的标签。

2.innerText

获取元素节点中的文本内容,会覆盖原有的内容，不会解析内容中的标签。
获取:
.元素.innerHTML
设置：
元素.innerHTMl = “新的内容”
【注意】 innerHTML 会覆盖原有的内容，而且会解析其中的标签。

2.innerText

获取元素节点中的文本内容,会覆盖原有的内容，不会解析内容中的标签。
获取：
元素.innerText
设置：
元素.innerText = “新的内容”;

3.value

主要使用在表单元素中。
操作表单元素节点的value属性。
获取：
表单元素节点.value
设置：
表单元素节点.value = “值”

<script>
        window.onload = function(){
            var box = document.getElementById("box");
            var inp = document.getElementById("inp");
           //  box.innerHTML = "<h1>我是新的innerHTML</h1>";
           //  box.innerText = "<h1>我是新的innerText</h1>";
           // console.log(typeof box.innerText);
           // box.value = "box1";
           // console.log(box.value);
           inp.value = "输入的信息";
           console.log(inp.value)
 </script>

6. 函数的执行

函数的执行

里面若涉及到了变量
在定义的时候不解析变量，而是按照变量名保存，
只有在函数调用时，才会解析变量

this:

在函数中，this保存的是函数调用者的地址信息。
谁调用了当前的函数，this就表示谁。

 var num = 20;
        function func(){
            console.log(num);
        }
        num = 40;
        func();

7.操作元素节点的样式

元素节点的样式：
样式：

行内式
内嵌
外链

行内样式：

原生属性的方式获取
元素.style.样式的属性名
【注意】如果属性名是多个单词，第二个单词首字母大写，删除中划线。该方法只能获取行内。

获取元素的有效样式

标准浏览器：

getComputedStyle(要获取样式的元素)；
IE低版本：（IE8以下）
元素.currentStyle.样式属性名.box.currentStyle.width .

设置样式：

语法：元素.style.样式名 = “值”;

 <script>
         window.onload = function(){
             var box = document.getElementById("box");
            //  console.log(box.style.width);
            // console.log(getComputedStyle(box).width);
            // console.log(box.currentStyle["width"]);
            console.log(getStyle(box,"width"));
            btn.onclick = function(){
                box.style.backgroundColor = "blue";
            }
         }
        //  node 要获取样式的元素节点  cssStyle 要获取样式的属性名
         function getStyle(node,cssStyle){
            return node.currentStyle?node.currentStyle[cssStyle]:getComputedStyle(node)[cssStyle];
         }
     </script>

8. 属性节点

属性节点：

获取元素节点的属性节点
元素.attributes

单个属性节点：
元素.元素.attributes.getNamedItem(“属性名”)；

    <script>
        window.onload = function(){

            var box = document.getElementById("box");
            console.log(box.attributes.getNamedItem("name"));
        }
    </script>
    
<body>
    <div id="box" name="boxName" class="home"></div>
</body>

9.通过节点关系获取节点

DOM节点不是孤立存在，我们可以通过节点之间的关系去获取他们。

节点的关系，是以属性的方式存在的。
获取父节点。

节点.parentNode

获取兄弟节点:
1.下一个节点

node.nextSibling
对于标准浏览器，标签，空文档，换行都属于节点。
IE低版本：指下一个元素节点。

2.下一个元素节点

node.nextElementSibling
兼容写法：下一个兄弟节点 = 节点.nextElementSibling||节点.nextSibling

3.上一个节点

node.previousSibling

4.上一个元素节点

node.previousElementSibling

获取单个子节点：
1.第一个子节点

node.firstChild

2.获取第一个元素节点

node.firstElementChild

3.获取最后一个子节点

node.lastChild

4.获取最后一个元素节点

node.lastElementChild
获取所有子节点
语法：node.childNodes
返回的是子节点的伪数组（元素节点，文本节点，注释节点）

2.获取所有的元素子节点

语法：node.children
返回元素节点。使用最多的方法。

节点的属性:

属性：事物的特征
nodeName: 节点名称
注释节点： #comment
文本节点： #text
元素节点：大写的标签名
属性节点：属性名

nodeType：节点类型：

注释节点：8
文本节点：3
元素节点：1
属性节点：2

nodeValue：节点的值

注释节点：注释内容
文本节点：文本内容
元素节点：null
属性节点：属性值

 <script>
        window.onload = function(){
            // var box = document.getElementById("box");
            // console.log(box.parentNode);
            // console.log(box.nextSibling);
            // console.log(box.nextElementSibling);
            // console.log(box.previousSibling);
            // console.log(box.previousElementSibling);
            // console.log(document.body.firstElementChild);
            console.log(document.body.childNodes);
            var firstChild = document.body.firstChild;
            var sec = firstChild.nextSibling;
            var h1 = document.body.firstElementChild;
            var title = h1.attributes.getNamedItem("id");
            // console.log("注释节点：nodeName="+firstChild.nodeName);
            // console.log("注释节点：nodeType="+firstChild.nodeType);
            // console.log("注释节点：nodeValue="+firstChild.nodeValue);
            // console.log("文本节点：nodeName="+sec.nodeName);
            // console.log("文本节点：nodeType="+sec.nodeType);
            // console.log("文本节点：nodeValue="+sec.nodeValue);
            // console.log("元素节点：nodeName="+h1.nodeName);
            // console.log("元素节点：nodeType="+h1.nodeType);
            // console.log("元素节点：nodeValue="+h1.nodeValue);
            console.log("属性节点：nodeName="+title.nodeName);
            console.log("属性节点：nodeType="+title.nodeType);
            console.log("属性节点：nodeValue="+title.nodeValue);
        }
    </script>
</head>
<body><!-- 我是注释 -->三是规模<h1 id="title">我是一级标题</h1>
    <div id="box">我是div标签</div>
    <p>我是p标签</p></body>

吃瓜瓜瓜

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js中的DOM节点

DOM我们的页面是由节点组成的，每一个组成部分都是一个节点。节点的分类：元素节点 html标签 img body input div文本节点文字部分属性节点标签内的属性注释节点1.document页面中最大的节点，有且只有一个。不属于元素节点，是页面中所有节点的容器。根节点。2.html页面中最大的元素节点。根元素节点。3.元素节点html标签4.文本节点每一段文本内容都是一个文本节点包含换行和空格一般来说作为元素节点的子节点存在。5.属
复制链接

扫一扫