DOM基础，classList属性提供的方法和属性，DOM中节点的操作，追加节点

1. 什么是DOM:

Document Object Modei :文档对象模型

2.DOM核心：document对象

3.DOM作用：

可以访问和操作xtml和HTML文档中的标签，标签的属性，节点的属性和方法

xtml:自己定义标签<studentName></studentName>

4.在DOM中将整个HTML文档看作一颗倒立的树(树状结构):一个HTML页面就是一个DOM对象，是一颗DOM HTML树

(1)DOM HTML数的根节点：HTML(根标签，只有一个)

(2)元素(Element)：HTML文档中的标签

(3)节点(node):文档中的内容

5.DOM树：浏览器的JavaScript引擎(谷歌的v8引擎)在解析页面时，采用树形结构来存放页面元素

DOM树中的节点的分类：

(1)标签节点：所有标签

(2)属性节点：标签的属性---内置属性，自定义属性

(3)文本节点：标签中的文本,换行符，空格等

(4)注释节点：

6.节点的基本概念

(1)根节点：根节点是HTML，有且只有一个

(2)子节点：某个节点的下一级节点

(3)父节点：某个节点的上一级节点

(4)兄弟节点：拥有相同父节点的节点

通过document对象来操作HTML页面中的元素

1.getElenentByid('id属性值'):

通过标签的ID属性获取标签

2.getElenentsByName('name属性值')：

通过标签的name属性获取标签，返回值是NodeList(伪数组）

3.getElenentByTagName('标签名')：

通过标签名来获取标签，返回值的类型是HTMLCollcetion

4.getElenentsByClassName('class属性值')：

通过标签的class属性获取标签，返回值的类型是HTMLCollcetion

5. querySelector('#id值'):

返回一个指定id属性值的标签

querySelector('.class属性值')：

返回第一个指定class属性的标签

querySelector('标签名')：返回第一个指定标签名的标签

6.querySelectorAll('.class属性值')：

返回所有指定class属性值的标签，返回值类型NodeList

querySelectorAll('标签名')：

返回所有指定标签名的标签，返回值类型NodeList

获取操作的元素

document对象的属性

1.document.body：

返回对象的body元素，所有元素（标签）都可以得到

2.document.documentElement:

返回文档的HTML元素，包含head和body里面的标签

3.document.forms:

返回文档的form(表单)对象(是一个集合，length为form表单的数量)，只有一个表单时长度为1

Element对象的属性和方法:

在JavaScript代码中HTML的标签（Element）的属性和方法

(1)children:

用来获取某个元素的子元素

强调：HTMLCollcetion和NodeList区别

(1)HTMLCollcetion:通过document对象或Element对象调用

（2)NodeList对象：document对象调用调用getElementByName()方法在Chrome和FireFox浏览器返回的是NodeList对象。IE11返回的是HTMLCollcetion

(2)HTMLCollcetion对象用于元素操作

(3)Element对象用于节点操作

元素的属性和方法

(1)属性：

1.innerHTML:设置返回起始标签和结束标签之间的HTML（包括标签）

2.innerText:设置返回起始标签和结束标签之间的文本（不能解析标签---不识别标签）

3.textContent:设置或返回指定节点的内容(不识别console.log自带的换行)

(2)方法

1.document.write('html内容')：在文档中写入指定的内容

2.document.writeln('html内容')：在文档中写入指定的内容之间加一个空格

标签的属性

1.attributes:返回标签的所有属性集合

2.setAttributes(name,value):设置标签的属性值。参数name表示属性名，参数value表示属性值

3.getAttribute(name)：获取标签的某个属性值

4.removeAttribute(name):删除标签的某个属性

--元素的样式

用法：

(1) 元素名.style.样式属性名 ='属性值'

注意:'样式属性名'在使用时需要将单词之间的'-'删除，第二个单词首字母大写

(2)html5对象样式的操作

1.一个元素的class属性可以有多个值:在保留原有样式的基础上添加新的样式

2.如何在js的程序运行中动态的添加class属性值：

classList属性(只读)：是元素的类属性(class)的列表

练习：点击标签，标签下面出现相应的数字

(3).classList属性提供的方法和属性

1.属性：length--某个标签的class属性值得个数

2.方法：

a.add('字符串')：给元素添加类名。一次只能添加一个

b.remove('字符串')：将元素的类名删除。一次只能删除一个

c.toggle('字符串')：若类名存在则删除。不存在则添加

d.item(index):根据index来获取元素的类名

e.contains('类名'):判断元素是否含有给定的类名，若有返回true，没有返回false

DOM节点的操作：采用操作节点的方式来操作页面元素

(1)获取节点时使用的属性：

a.firstChild:获取当前节点的首个子节点

注意：换行符，空格等也是节点

b.nextSibling:返回同一层级中指定节点之后紧跟的节点

c.lastChild:获取当前节点的最后一个子节点

d.preniousSibling：返回同一层级中指定节点之前紧跟的节点

e.nodeName:节点的名称（标签的名称）

f.nodeValue:节点的值

g.nodeType：节点类型

1:表示当前节点的类型是标签

2.表示属性节点

3:表示是文本节点

getAttribute('id属性值')

getAttributeNode('id属性').nodeType

h.parentNode:当前节点的父节点

i.childNodes:当前节点的所有子节点

强调：childNodes与children的区别:

相同点:都可以获取子元素

不同点：

childNodes属性用于节点操作，不仅包含文本节点，也包含其他的元素节点，返回值类型是NodeList

children属性用于元素操作,返回的元素节点(标签)，返回值类型是HTMLcollection

追加节点:

(1)创建元素节点:

document.createElement()

(2)在指定节点的末尾追加节点

appendChild(newNode)

(3)在指定节点之前添加一个节点

insertBefore(newNode,node):将节点newNode插入到节点node之前(找node的父节点)

该方法需要插入节点(node)父节点的调用

(4)创建文本节点：

document.createTextNode()

DOM基础，classList属性提供的方法和属性，DOM中节点的操作，追加节点相关推荐

element元素取属性_JS-DOM Element方法和属性
setAttribute方法: var a=document.createElement("div"); //新建一个DIV a.id="div1" ...
转载---SQL Server XML基础学习之7--XML modify() 方法对 XML 数据中插入、更新或删除...
/*------------------------------------------------------------------------------+ #| = : = : = : = : ...
JS对DOM节点的操作--增加节点，删除节点
(1):DOM :DOM文档树的全称是document object model ,也就是文档对象模型,在js中,把整页面当成一个dom树,而我们可以对每一个节点都可以进行相应的操作,比如创建一个节点 ...
点击切换属性html,jQuery_$方法、属性、点击切换
jQuery_$方法 1.$.each():遍历数组或对象中的数据 2.$.trim():去除字符串两边的空格 3.$.type(obj):得到数据的类型 4.$.isArray(obj):判断是否为 ...
vue改变class内的属性_vue 绑定添加class 属性 4种方法添加style 3中方法 v-bind /：...
一.添加class .red{color: skyblue;} .thin{font-weight: 200;} .italic{font-style: italic;} .active{letter ...
JS-DOM Element方法和属性
JS-DOM Element方法和属性 S-DOM Element方法和属性一,获取html元素 1.getElementByID(id) 通过对元素的ID访问,这是DOM一个基础的访问页面元素的方 ...
JavaScript面向对象：类、方法、属性
JavaScript是一种基于对象的语言,与传统面向对象语言(C#.C++)相比,JavaScript中没有类的概念,其继承有两种基本形式:基于对象的继承和基于类型的继承(原型链继承).无论哪种形式的 ...
面向对象(三、类私有属性和私有方法)
目录私有属性和私有方法 01. 应用场景及定义方式 02. 伪私有属性和私有方法(科普) 继承 01. 单继承 1.1 继承的概念.语法和特点 1) 继承的语法 2) 专业术语 3) 继承的传递性 ...
Python的特殊属性和特殊方法
Python的特殊属性和特殊方法特殊属性特殊方法对象创建过程分析特殊属性 __dict__: 获得类对象或实例对象所绑定的所有属性或方法的字典 __class__: 获得实例对象所属的类 __ ...

DOM基础，classList属性提供的方法和属性，DOM中节点的操作，追加节点

DOM基础，classList属性提供的方法和属性，DOM中节点的操作，追加节点相关推荐

最新文章

热门文章