011day DOM获取页面元素节点，元素节点，属性节点

最新推荐文章于 2022-08-04 14:00:30 发布

码小白的求学之路

最新推荐文章于 2022-08-04 14:00:30 发布

阅读量420

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Yanxiaona111/article/details/107893118

版权

一、DOM介绍
js由三部分构成：
1：ECMAScript：语言的基本语法、类型、流程控制、函数
2：DOM：规定了如何通过js访问页面元素。
3：BOM：规定了如何通过js访问浏览器对象。
DOM：
2：js要能访问浏览器对象。各个浏览器给js提供了一个对象window，js通过window对象来和浏览器窗口交互。在window对象中我们最关心的对象是页面文档。所以window对象的一个属性对象：document对象。代表了整个页面的文档对象。
js 访问页面文档的核心对象就是document对象。直接在js代码中使用即可。
3: DOM(document object model): 文档对象模型。学习DOM，主要学习document的属性和方法的使用。
在DOM模型中。document对象是整个树形模型结构的根节点(root).
然后根据根节点可以访问所有的其他的子节点。
总结：学习DOM就是学习如何通过document对象来操作页面中的各个节点。
页面中的节点的类型：
1：元素节点、标签节点 ***
2：注释节点
3：文本节点
4：属性节点
5：文档节点 document ***

二、页面节点的介绍
对于任何的节点都有如下的三个属性：
nodeName、 nodeType、nodeValue
页面中的节点的类型：
1：元素节点、标签节点
nodeName: 标签名字大写
nodeType: 1
nodeValue: null
2：注释节点
nodeName: #comment
nodeType: 8
nodeValue: 注释的内容
3：文本节点
nodeName: #text
nodeType: 3
nodeValue: 节点内容
4：属性节点
nodeName: 属性的名字
nodeType: 2
nodeValue: 属性的值
5：文档节点 document ***
nodeName: #document
nodeType: 9
nodeValue: null

<script>
    //1元素节点
    var div = document.getElementById("box");
    console.log (typeof div);//object
    console.log (div.nodeName);//DIV
    console.log (div["nodeType"]);//1
    console.log (div.nodeValue);//null

    var pTag = document.getElementsByTagName("p")[0];
    console.log (pTag.nodeName);//P
    console.log (pTag.nodeType);//1
    console.log (pTag.nodeValue);//null

    console.log ("--------------");
    //注释节点  得到div节点的前面的前面的节点对象
    var com = div.previousSibling.previousSibling;
    console.log (typeof com);//object
    console.log (com.nodeName);//#comment
    console.log (com.nodeType);//8
    console.log (com.nodeValue);//I am comments
    console.log ("--------------");
    //文本节点
    var text = div.firstChild;
    console.log (typeof text);//object
    console.log (text.nodeName);//#text
    console.log (text.nodeType);//3
    console.log (text.nodeValue);//千万里我追寻着你
    console.log ("--------------");
    //属性节点
    var attr = div.getAttributeNode("id");
    console.log (typeof attr);//object
    console.log (attr.nodeName);//#text
    console.log (attr.nodeType);//3
    console.log (attr.nodeValue);//千万里我追寻着你
    console.log ("--------------");
    //文档节点
    console.log (typeof document);//object
    console.log (document.nodeName);//#document
    console.log (document.nodeType);//9
    console.log (document.nodeValue);//null
</script>

三、DOM获取页面元素节点的方式

<div id="div1">我第div1</div>
<div id="div2">我是div2</div>
<span>span1</span>
<span>span2</span>
<ul>
    <li class="sty">1</li>
    <li>2</li>
    <li class="sty">3</li>
    <li>4</li>
    <li>5</li>
</ul>
<div id="box">
    <span>div-span1</span>
    <span>div-span2</span>
</div>

<input type="checkbox" name="hobby" >抽烟
<input type="checkbox" name="hobby" >喝酒
<input type="checkbox" name="hobby" >烫头

获得页面元素节点的方式：
**1：document.getElementById()
  a: 因为id具有唯一性，所以通过id获取页面元素的效率比较高。
  b：兼容性比较好。
  c：返回该id的第一个元素对象。
  d：id 大小写敏感
2：根据元素的class属性获得。
    document.getElementsByClassName("sty");
   a: 返回的是一个类数组对象，集合。通过下标去访问某一个元素。
   b: 该方法存在兼容问题。低版本IE不兼容。
   c：大小写敏感
3：document.getElementsByTagName()
    通过元素的标签获得元素节点
    a：返回类数组对象 HTMLCollection. 通过下标访问具体的节点。
    b：大小写不敏感
4: document.getElementsByName()
    通过元素的 name 属性获得所有的元素。
    a：一般是获得表单元素的
    b: 返回一个类数组对象，NodeList
**5:document.querySelector()
    通过选择器获得
    a: 获得符合选择器的所有的元素中的第一个元素。
6：document.querySelectorAll
    通过选择器获得所有的元素
    返回的是NodeList ，类数组对象，通过下标获取元素。
补充：
    如果想获取某个元素内的子元素，
    a：可以直接使用选择器
    b：获得父元素，然后在获得子元素。

<script>
    //1：document.getElementById()
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");

    // 2：根据元素的class属性获得。
    var eles = document.getElementsByClassName("sty");
    console.log (eles);//HTMLCollection(2) [li.sty, li.sty]
    //通过下标访问某一个元素。
    console.log (eles[0]);
    console.log (document.getElementsByClassName("sty")[1]);

    //3 document.getElementsByTagName()
    var tags = document.getElementsByTagName("SPAN");
    console.log (tags);//HTMLCollection(4) [span, span, span, span]
    console.log (tags[1]);

    //4 document.getElementsByName()
    var hobbys = document.getElementsByName("hobby");
    //NodeList(3) [input, input, input]
    console.log (hobbys);
    console.log (hobbys[1]);

    // document.querySelector
    var ele = document.querySelector(".sty");
    console.log (ele);

    //document.querySelectorAll
    var list = document.querySelectorAll(".sty");
    // NodeList(2) [li.sty, li.sty]
    console.log (list);
    var spans = document.querySelectorAll("span");
    console.log (spans);

    //获得某个元素的子元素
    var spans1 = document.querySelectorAll("#box span");
    console.log (spans1);
    //可以先获得父元素。然后通过父元素对象去获取所有的子元素。
    var box = document.getElementById("box");
    var spans2 = box.getElementsByTagName("span");
    console.log (spans2);

</script>

四、getElentsByTagName和querySelectorAll的区别
getElementsByTagName和querySelectorAll的区别
1: getElementsByTagName 返回的是 HTMLCollection
querySelectorAll 返回的是NodeList
2: getElementsByTagName返回的结果，会随着页面元素的变化而变化，是动态的，querySelectorAll 不会变化，是静态的。

<div>我是div1</div>
<div>我是div2</div>
   
    

<script>
    var divs = document.getElementsByTagName("div");
    var div1s = document.querySelectorAll("div");

    console.log (divs);
    console.log (div1s);

    //动态的给页面中添加一个div
    //创建了一个div的对象
    var div = document.createElement("div");
    //设置div的内容
    div.innerHTML = "我是新的div";
    //添加到页面中
    document.body.appendChild(div);

    console.log (divs);
    console.log (div1s);

</script>

五、元素节点中内容的操作
元素节点中的内容的操作：
元素节点的四个属性。innerHTML、innerText、value、textContent
**innerHTML
获得：获得是元素内的所有的内容，包括标签。
设置：如果设置了标签，那么标签生效。
innerText：兼容性不太好。在低版本的狐火兼容性有问题。
获得：只能获得元素内的所有的纯文本内容。不能获得标签。
设置：如果设置的内容中包含了标签，那么标签也作为普通内容显示。不作为标签使用。
**value：主要应用于表单的内容的设置和获取。
textContent：
使用：和innerText使用一致。
textContent 的兼容性更好。

<div id="box">helloworld<span>I am span</span></div>
<input type="text" value="千万次的问">
<button>点我</button>
<script>
    //获得页面的元素
    var box = document.getElementById("box");
    //innerHTML
    //获得元素中的内容 helloworld<span>I am span</span>
    console.log (box.innerHTML);
    //设置元素中的内容
    box.innerHTML = "time time agian, you ask me.";
    //设置内容，如果包含标签，标签作用生效。
    box.innerHTML = "<i>问我到底....</i>"

    //innerText
    console.log (box.innerText);//问我到底...
    box.innerText = "<i>time time again ,I ask myself</i>";

    //获得input
    var ipt = document.querySelector("input");
    console.log (ipt.value);//获得里面的内容。
    var btn = document.querySelector("button");
    //给按钮添加单击事件。单击的时候触发执行。
    btn.onclick = function () {
        //设置内容。
        ipt.value += 1;
    }

</script>

六、属性节点的获取
属性节点的获取
1：通过所在的元素节点对象的属性attributes 获得。
语法：元素节点.attributes
返回：类数组对象。通过下标访问具体的属性节点。
2：通过所在的元素对象的方法。getAttributeNode 获得。
语法：元素节点.getAttributeNode(属性)
返回：属性节点对象。
3: 如果获取不成功，返回null。

<script>
    //1
    var box = document.getElementById("box");
    var attrs = box.attributes;
    //NamedNodeMap {0: id, 1: title, id: id, title: title, length: 2}
    console.log (attrs);
    console.log (attrs[0]);
    console.log (typeof attrs[0]);//object
    //2
    var node = box.getAttributeNode("id");
    console.log (node);
    console.log (box.getAttributeNode("id1"));//null
</script>

七、属性节点的属性值的获取
属性节点的属性值的获取。
1：获得属性节点，然后通过节点对象的nodeValue属性获取。
2: 通过元素节点的方法 getAttribute(“属性名”) 获得对应的属性值。
3：*** 通过元素节点.属性名获得。
4：*** 通过元素节点[属性名] 获得。
补充：对于自定义属性值的获得，只能通过方式1和方式2获得。
方式3和4只能操作元素的默认具有的属性。

<div id="box" title="hello" myattr="helloworld"></div>
<script>
    var box = document.getElementById("box");
    //方式-1
    var attr = box.getAttributeNode("id");
    var value = attr.nodeValue;
    console.log (value);//box

    //方式-2
    var value = box.getAttribute("title");
    console.log (value);//hello

    //方式-3
    console.log (box.id);//box
    //方式-4
    console.log (box["title"]);//hello

    //自定义属性的获得
    console.log (box.getAttributeNode("myattr").nodeValue);//OK
    console.log (box.getAttribute("myattr"));//OK
    console.log (box.myattr);//undefined
    console.log (box["myattr"]);//undefined

</script>

八、属性值的设置
属性值的设置和属性值的获取的方式基本一致。
一共四种方式。
1: 使用属性节点的nodeValue设置。
2：通过元素节点的 setAttribute方法设置。
3：元素.属性名=值设置 ***
4：元素[“属性名”] = 值设置。 ***

<div id="box" title="hello" myattr="helloworld"></div>
<script>
    var box = document.getElementById("box");
    //方式-1
    var node = box.getAttributeNode("title");
    node.nodeValue = "world";

    //方式-2
    box.setAttribute("title","helloworld");

    //方式-3
    box.title = "hello-3";

    //方式-4
    box["title"] = "hello-4";

    //自定义属性的值的设置
    box.getAttributeNode("myattr").nodeValue = "你好";//OK
    box.setAttribute("myattr","你好不好");//OK
    //下面的两种方式不可以。
    box.myattr = "我好不好";//
    box["myattr"] = "说你好你就好，不好也好";
</script>

九、class属性的操作
元素的class属性的操作
class是js中的一个关键字，所以在使用的时候需要特殊处理。
使用点引用符和中括号获取和设置class属性的时候，都要将class
修改为className.
后两种方式的修改：
class—className

<style>
        div{
            width: 200px;
            height: 200px;
        }
        .sty1{
            background-color: red;
        }
        .sty2{
            background-color: pink;
        }
        .sty3{
            background-color: blue;
        }
        .sty4{
            background-color: chocolate;
        }
        .sty0{
            background-color: orange;
        }
    </style>
</head>
<body>

<div id="box" class="sty0"></div>

<!--元素的class属性的操作
    class是js中的一个关键字，所以在使用的时候需要特殊处理。
    使用点引用符和中括号获取和设置class属性的时候，都要将class
    修改为className.
    后两种方式的修改：
    class---className-->

<script>
    var box = document.getElementById("box");
    //获取class属性
    console.log (box.getAttributeNode("class").nodeValue);//ok
    console.log (box.getAttribute("class"));//ok
    // console.log (box.class)//undefined
    console.log (box.className);//ok
    console.log (box["className"]);//ok

    //设置class属性
    box.getAttributeNode("class").nodeValue = "sty1";
    box.setAttribute("class","sty2");
    box.className = "sty3";
    box["className"] = "sty4";
</script>

十、select和checked属性的操作

<body>

<input type="checkbox" name="hobby" checked>读书
<input type="checkbox" name="hobby" >运动
<input type="checkbox" name="hobby" checked>旅游
<br>
<select name="" id="">
    <option value="">西游记</option>
    <option value="">红楼梦</option>
    <option value="" selected>三国演义</option>
    <option value="">水浒传</option>
</select>
<br>
<button id="btn">点我</button>

<!--
    selected、checked 作为属性，属性名和属性值是一样的。
    selected、checked 属性的值为布尔值。
    选中的状态则为true，否则为false。

    设置上述的两个属性：也是通过设置该属性为true和false来设置的。
-->
<script>
    var ipts = document.querySelectorAll("input");
    console.log (ipts[0].checked);//true
    console.log (ipts[1].checked);//false
    console.log (ipts[2].checked);//true

    var opts = document.getElementsByTagName("option");
    console.log (opts[0].selected);//false
    console.log (opts[2].selected);//true


    //实现：将没有选中的变为选中，选中的变为不选中。
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        for (let i = 0; i <ipts.length ; i++) {
            //将它的选中的相反的状态赋值给自己。
            ipts[i]["checked"] = !ipts[i].checked;
        }
    }

</script>

十一、属性节点的创建
属性节点的创建：
1：*** 通过属性节点的setAttribute 方法来添加属性节点。
元素.setAttribute(属性名,属性值);
2: document.createAttribute(属性名)
在内存中创建了一个属性节点对象。
然后需要通过元素.setAttributeNode(属性节点)
添加到元素中。
上述两种方式都可以用来添加自定义的属性。

<script>
    //添加属性  方式-1
    var box = document.getElementById("box");
    box.setAttribute("title","hello");
    box.setAttribute("myattr","world");

    //方式-2
    var attr = document.createAttribute("class");
    attr.nodeValue = "sty";
    box.setAttributeNode(attr);

    var attr1 = document.createAttribute("myattr1");
    attr1.nodeValue = "how are you";
    box.setAttributeNode(attr1);
</script>

十二、属性节点的删除
属性节点的删除：
通过使用元素对象的方法 removeAttribute
语法：元素对象.removeAttribute(属性名)；
返回：undefined。

<div id="box" title="hello" myattr="world"></div>
<script>
    var box = document.getElementById("box");
    box.removeAttribute("title");
    console.log (box.removeAttribute("myattr"))
</script>

十二、节点之间的关系
节点之间的关系：
1:元素的子节点：
childNodes: 返回类型为类数组NodeList
2：第一个孩子节点
firstChild : 返回第一个子节点对象。
3：最后一个孩子节点
lastChild：返回最后一个孩子节点对象。
4: 节点的父节点：
parentNode: 获取节点的父节点对象
5：下一个兄弟节点：
nextSibling ：获取下一个兄弟节点
6：上一个兄弟节点：
previousSibling：获取上一个兄弟节点

<script>
    //获得父元素对象
    var ul = document.querySelector("ul");
    //1:元素的子节点：
    //NodeList(13) [text, li, text, li#li2, text, comment, text, li, text, li, text, li, text]
    var nodes = ul.childNodes;
    console.log (nodes);

    // 2：第一个孩子节点
    var first = ul.firstChild;
    console.log (first);

    // 3：最后一个孩子节点
    var lastChild = ul.lastChild;
    console.log (lastChild);

    // 4: 节点的父节点：
    var li2 = document.getElementById("li2");
    var parent = li2.parentNode;
    console.log (parent);

    // 5：下一个兄弟节点：
    var li2 = document.getElementById("li2");
    var comment = li2.nextSibling.nextSibling;
    console.log (comment);

    //6：上一个兄弟节点
    var li2 = document.getElementById("li2");
    var li1 = li2.previousSibling.previousSibling;
    console.log (li1);

    //html元素节点
    console.log (li2.parentNode.parentNode.parentNode);
</script>

十三、元素节点之间的关系
元素节点之间的关系
1：元素所有的子元素节点
父元素.children
2：元素的第一个子元素节点
父元素.firstElementChild
3：元素的最后的一个子元素节点
父元素.lastElementChild
4：元素的父元素节点
元素.parentElement
5：元素的下一个兄弟元素节点
元素.nextElementSibling
6：元素的上一个兄弟元素节点
元素.previousElementSibling

<ul>
    <li>第1个li</li>
    <li id="li2">第2个li</li>
    <!--我是注释-->
    <li>第3个li</li>
    <li>第4个li</li>
    <li>第5个li</li>
</ul>
<script>
    var ul = document.querySelector("ul");
    // 1：元素所有的子节点
    var children = ul.children;
    //HTMLCollection(5)
    console.log (children);

    // 2：元素的第一个子节点
    var first = ul.firstElementChild;
    console.log (first);

    // 3：元素的最后的一个子节点
    var last = ul.lastElementChild;
    console.log (last);

    // 4：元素的父节点
    var li2 = document.querySelector("#li2");
    var parent = li2.parentElement;
    console.log (parent);

    // 5：元素的下一个兄弟节点
    var li5 = li2.nextElementSibling.nextElementSibling.nextElementSibling;
    console.log (li5);

    // 6：元素的上一个兄弟节点
    var li1 = li2.previousElementSibling;
    console.log (li1);
</script>

十四、文档中的特殊节点
文档中的特殊的节点：
html元素节点：document.documentElement
head元素节点：document.head
title元素节点：document.title 获得和设置标题
body元素节点：document.body
文档节点：document

<script>
    var html = document.querySelector("html");
    console.log (html);
    html = document.documentElement

    console.log (document.head);

    //获得设置title
    console.log (document.title);
    document.title = "头头是道";

    console.log (document.body);

    console.log (document)
</script>

十五、document对象的属性
document 对象的属性：
document.doctype:文档类型说明节点
**document.documentURI:加密之后的地址栏地址。
**document.readyState: 代表了当前文档加载的状态。只能取三个值。
loading : 文档正在加载中。
interactive：加载外部资源文件。
complete：加载完毕
document.URL: 地址栏中的地址。

*document.domain: 地址栏中的地址中的域名
http://war.163.com/photoview/4T8E0001/2309579.html
对于任意一个url地址来说都是由四部分构成：
http：传输协议。
war.163.com：域名对应着网络中的一台主机。
本质上来将，定义网络中的一台主机，是通过主机的IP地址的。
但是IP地址不好记忆。所以每一个IP都被赋予了一个别名，通过该名字可以同样的访问该主机。
这个名字就被称为这台主机的域名。
DNS：一台服务器。域名解析服务器。负责将域名转换为IP地址的工作。
photoview/4T8E0001/2309579.html：对应着域名主机中的一个文件。
隐藏的端口号：通过哪个端口来访问要访问的服务器。http协议来说默认的端口号是80.

document.images: 所有的页面中的img标签元素。
document.scripts: 页面中的所有的script标签元素。
document.links: 所有的超链接
document.forms：所有的表单
document.lastModified：文档最后一次修改的时间

document.charset: 页面字符集
***document.location：代表了地址栏对象。可以直接使用。因为该对象也是window对象的属性。
location 对象有一个很重要的属性 href：代表了地址栏中地址。
可以通过修改该属性，实现页面的跳转。会产生浏览记录。

<button id="btn">百度一下</button>
<script>
    //文档类型说明节点
    console.log (document.doctype);
    /*http://localhost:63342/web-js/18.document%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B1%9E%E6%80%A7.html?_ijt=5i4juhrkt543pbd1dlrf7ko5ef*/
    console.log (document.documentURI);
    console.log (decodeURIComponent(document.documentURI));
    console.log (decodeURI(document.documentURI));

    //每隔50毫秒执行一次匿名函数
    // setInterval(function () {console.log (document.readyState); },50)

    console.log (document.URL);

    // document.images;
    // document.scripts;
    // document.links
    // document.forms
    // console.log (document.lastModified);
    // console.log (document.charset);
    // console.log (document.location);

    var btn = document.querySelector("button");
    btn.onclick = function () {
        document.location.href = "http://www.baidu.com";
    }

</script>