DOM节点

document
页面中最大的节点，有且只有一个。不属于元素节点，是页面中所有节点的容器。根节点。
html
页面中最大的元素节点。根元素节点。
元素节点
html标签
文本节点
每一段文本内容都是一个文本节点
包含换行和空格
一般来说作为元素节点的子节点存在。
属性节点：
属性节点不能单独存在，必须依赖于元素节点。
注释节点
页面中的注释，作为说明文本使用户。

自定义获取元素节点方法

       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;}elementsByClassName(node,classStr)

node 表示传入的节点，获取该节点的元素节点。
classStr 表示传入的classname ，通过classname匹配元素节点

操作元素节点的属性

标签上的属性分类：
1.原生属性
2.自定义属性
3.H5 自定义属性

原生属性
语法：元素.属性名

 window.onload = function() {var oDiv = document.getElementsByTagName("div")[0];// 获取idconsole.log(oDiv.id);}
<body><div class="box" id="box1" data-list="idBox">这是div标签</div>
</body>

获取id属性

修改/新增：
元素.属性名 = “值”

id被修改

获取：
元素.属性名

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

自定义属性
不能直接使用
元素. 这个语法来获取。
三个方法去操作：
获取
getAttribute(“属性名”);

   <script>var oDiv = document.getElementsByTagName("div")[0];console.log(oDiv.getAttribute("id"));</script><body><div class="container" id="box" index="index" data-id="idBox">我是div标签</div></body>

返回值：字符串

设置
setAttribute(“属性名”,“属性值”)

<script>window.onload = function() {var oDiv = document.getElementsByTagName("div")[0];oDiv.setAttribute("id", "box2");
</script>
<body><div class="container" id="box" index="index" data-id="idBox">我是div标签</div>
</body>

id的属性发生变化

删除
removeAttribute(“属性名”)

<script>window.onload = function() {var oDiv = document.getElementsByTagName("div")[0];//删除idoDiv.removeAttribute("id");
</script>
<body><div class="container" id="box" index="index" data-id="idBox">我是div标签</div>
</body>

这里id被删除。

操作元素的类名

按照原生属性的方式来操作
获取
元素.className
设置
元素.className = “值”

    <script>window.onload = function() {var oDiv = document.getElementsByTagName("div")[0];//设置元素的值oDiv.className = "addd";</script><body><div class="box" id="box1" data-list="idBox">这是div标签</div></body>

div的类发生改变

追加：
元素.className += " 值";
【注意】追加时，值的前面要加一个空格。

    <script>window.onload = function() {var oDiv = document.getElementsByTagName("div")[0];// 追加Bdiv.className += " divBox a b";console.log(Bdiv.className);</script><body><div class="box a b c" id="idBox">这是一个div标签</div></body>

div的类在后面追加。
删除：
重新设置一遍。

    <script>window.onload = function() {var oDiv = document.getElementsByTagName("div")[0];// 删除Bdiv.className = "box a b";console.log(Bdiv.className);</script><body><div class="box a b c" id="idBox">这是一个div标签</div></body>

H5标准给我们一个API
元素节点都有一个属性叫做：classList
里面包含了所有的class值。
获取：
元素.classList 获取class值的集合。
想要获取单个，使用下标。
获取全部数为数组

    <script>window.onload = function() {var oDiv = document.getElementsByTagName("div")[0];// 获取class值的集合，数组。Bdiv.classList;console.log(Bdiv.classList);</script><body><div class="box a b c" id="idBox">这是一个div标签</div></body>

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

    <script>window.onload = function() {var oDiv = document.getElementsByTagName("div")[0];// 新增类名Bdiv.classList.add("d");console.log(Bdiv.classList);</script><body><div class="box a b c" id="idBox">这是一个div标签</div></body>

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

    <script>window.onload = function() {var oDiv = document.getElementsByTagName("div")[0];// 删除类名。Bdiv.classList.remove("a", "b");console.log(Bdiv.classList);</script><body><div class="box a b c" id="idBox">这是一个div标签</div></body>

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

    <script>window.onload = function() {var oDiv = document.getElementsByTagName("div")[0];// 替换Bdiv.classList.replace("a", "bood");console.log(Bdiv.classList);</script><body><div class="box a b c" id="idBox">这是一个div标签</div></body>

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

    <script>window.onload = function() {var oDiv = document.getElementsByTagName("div")[0];// 切换 ，用有删除，没有添加。Bdiv.classList.toggle("a");console.log(Bdiv.classList);</script><body><div class="box a b c" id="idBox">这是一个div标签</div></body>

操作元素节点中的内容

innerHTML
获取元素节点中除了本身的标签外，所有的HTML代码。
获取：
元素.innerHTML
设置：
元素.innerHTMl = “新的内容”

     <script>window.onload = function(){var box = document.getElementById("box");var inp = document.getElementById("inp");box.innerHTML = "<h1>我是新的innerHTML</h1>";</script><body><div id="box">我是div标签<br><p>我是后面的内容</p><input type="text" id="inp"></div></body>

运行后里面的内容被更改。

【注意】 innerHTML 会覆盖原有的内容，而且会解析其中的标签。

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

     <script>window.onload = function(){var box = document.getElementById("box");var inp = document.getElementById("inp");//innerHTMLbox.innerText = "<h1>我是新的innerText</h1>";</script><body><div id="box">我是div标签<br><p>我是后面的内容</p><input type="text" id="inp"></div></body>

这里添加的是文本内容没有添加上标签。

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

     <script>window.onload = function(){var box = document.getElementById("box");var inp = document.getElementById("inp");inp.value = "输入的信息";console.log(inp.value);</script><body><div id="box">我是div标签<br><p>我是后面的内容</p><input type="text" id="inp"></div></body>

函数的执行

里面若涉及到了变量
在定义的时候不解析变量，而是按照变量名保存，
只有在函数调用时，才会解析变量
this:
在函数中，this保存的是函数调用者的地址信息。
谁调用了当前的函数，this就表示谁。

操作元素节点的样式

元素节点的样式：

行内样式：
原生属性的方式获取
元素.style.样式的属性名
【注意】如果属性名是多个单词，第二个单词首字母大写，删除中划线。
该方法只能获取行内。
获取元素的有效样式
标准浏览器：
getComputedStyle(要获取样式的元素)
获取元素的属性：

   <script>window.onload = function() {var box = document.getElementById("box");console.log(getComputedStyle(box).width);</script><body><button id="btn">变色</button><div id="box" style="height: 100px;background-color: hotpink;"></div>
</body>

获取box的宽

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

   <script>window.onload = function() {var box = document.getElementById("box");// 点击事件点击按钮更换颜色btn.onclick = function(){box.style.backgroundColor = "blue";}</script><body><button id="btn">变色</button><div id="box" style="height: 100px;background-color: hotpink;"></div>
</body>

开始的颜色

点击之后更换属性值。

属性节点：

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

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

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

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

获取属性名。

通过节点关系获取节点

获取父节点。
节点.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
获取所有子节点
1.获取所有子节点
语法：node.childNodes
返回的是子节点的伪数组（元素节点，文本节点，注释节点）
2.获取所有的元素子节点
语法：node.children
返回元素节点。使用最多的方法。

节点的属性
属性：事物的特征

nodeName: 节点名称
注释节点： #comment
文本节点： #text
元素节点：大写的标签名
属性节点：属性名
nodeType：节点类型
注释节点：8
文本节点：3
元素节点：1
属性节点：2
nodeValue：节点的值
注释节点：注释内容
文本节点：文本内容
元素节点：null
属性节点：属性值

这里制作一个点名器

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.name {width: 400px;height: 200px;background-image: linear-gradient(rgb(126, 214, 248), rgb(233, 140, 210), rgb(243, 233, 89));box-shadow: 0 0 20px 20px rgb(165, 108, 221);position: absolute;left: 50%;top: 50%;margin-left: -200px;margin-top: -100px;font-size: 80px;letter-spacing: 8px;text-align: center;line-height: 200px;color: #fff;animation: ani 1s linear infinite;}@keyframes ani {0% {box-shadow: 0 0 20px 20px rgb(165, 108, 221);}50% {box-shadow: 0 0 20px 5px #e74c3c;}}</style><script>window.onload = function() {var arr = ["亚索", "提莫", "卡莎", "辛德拉", "石头人", "赵信", "盖伦", "永恩"];var box = document.getElementsByClassName("name")[0];var bth = nullfunction oncl() {box.innerHTML = arr[Math.floor(Math.random() * 8)];}click.onclick = function() {if (bth == null) {clearInterval(bth);bth = setInterval(oncl, 80);} else {clearInterval(bth);bth = null;}}}</script>
</head><body><div class="name" id="click">亚索</div>
</body>
</html>

js ，DOM节点，制作点名器相关推荐

8、Js DOM节点，星星案列
DOM节点:描述网页各个组成之间的关系 var.obj=document.getElementById("id名"): 火狐浏览器中的空白也算一个节点 ParentNode:父节点 ...
JS DOM节点增删改查属性设置
一.节点操作增 createElement(name)创建元素 appendChild();将元素添加删获得要删除的元素获得它的父元素使用removeChild()方法删除改第一种方式: ...
js DOM节点操作之创建、添加、删除和克隆节点
1. 创建节点 document.createElement("tagName"):tagName为HTML标签名,创建一个标签名为tagName的元素节点. <body&g ...
js获取节点的DOM操作
一直感觉DOM节点什么的乱七八糟的不能理解,可能博客也没办法写清楚,只能把知道的一些信息大致写下来慢慢再补充了. HTML DOM类型 Node类型 Javascript中的所有节点类型都继承自Nod ...
前端：JS/25/DOM官方定义，DOM分类，HTML节点树（节点关系，节点类型，），核心DOM中公共的属性和方法（节点访问，查找DOM节点，节点属性，节点的创建，追加和删除）
DOM官方定义 DOM,Document Object Model,文档对象模型,我们可以把网页中的所有"东西"看成是对象": DOM的官方定义:DOM可以使用脚本,动态 ...
原生js由html创建节点,[js高手之路]HTML标签解释成DOM节点的实现方法
最近在封装一个开源框架,已经写了500行, 已经具备jquery的大多数常用功能,后面还会扩展大量的工具函数和MVVM双向驱动等功能.跟jquery的使用方法完全一样,jquery的选择器,几乎都能支 ...
js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例
本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: /p> "http://www.w3.org/TR/xht ...
原生JS中DOM节点相关API合集
原生JS中DOM节点相关API合集节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Te ...
js添加多个子节点_JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
本文实例讲述了JS实现DOM节点插入操作之子节点与兄弟节点插入操作.分享给大家供大家参考,具体如下: www.jb51.net JS节点插入 function showinsert(){ //添加子节 ...

js ，DOM节点，制作点名器