属性、Element对象的属性和方法、元素的属性和方法、标签的属性、元素的样式、DOM中节点的操作、追加节点］"/>
DOM［document操作html页面、document对象的属性、Element对象的属性和方法、元素的属性和方法、标签的属性、元素的样式、DOM中节点的操作、追加节点］
一.DOM？
1.Document Object Model：文档对象模型
2.DOM的核心：document对象
3.DOM的作用：可以访问和操作XML和HTML文档中标签、属性、节点的属性和方法
4.在DOM中将整个HTML文档看作是一个倒立的树（树状结构）：一个html页面就是一个DOM对象，是一颗DOM HTML树
（1）DOM HTML的根节点：html
（2）元素（Element）:html文档中的标签
（3）节点（Node）:html文档中的内容
5.DOM树中节点的分类：
（1）标签节点：所有的标签
（2）属性节点：标签的属性---内置属性、自定义属性
（3）文本节点：标签中的文本、换行、空格等
（4）注释节点：<!-- 注释内容 -->
6.基本概念
（1）根节点：html,有且只能有一个
（2）子节点：某个节点的下一级节点
（3）父节点：某个节点的上一级节点
（4）兄弟节点：拥有相同父节点的节点
<body><div id="box"></div><script>let div = document.getElementById('box')console.log(div)console.log(div.__proto__)//__proto__:表示元素的原型</script>
</body>二.通过document对象来操作html页面中的元素
1.getElementById('id值')：通过标签的id属性来获取标签
2.getElementsByName('name值')：通过标签的name属性来获取标签,返回值的是NodeList
3.getElementsByTagName('标签名')：通过标签名获取标签，返回值的类型是HTMLCollection
4.getElementsByClassName('class值')：通过标签的class值来获取标签，返回的类型是HTMLCollection
5.querySelector('#id值/.class值/标签名')：第一个
#id值：返回一个指定id属性值的标签
.class值：返回第一个指定class属性值的标签
标签名：返回第一个指定标签名的标签
6.querySelectorAll('.class值/标签名')： 所有
.class值：返回所有指定class属性值的标签。返回值的类型是NodeList
标签名：返回所有指定标签名的标签。返回值的类型是NodeList
<body><div id="box"></div><input type="checkbox" name="chk">西安<input type="checkbox" name="chk">北京<input type="checkbox" name="chk">南京<input type="checkbox" name="chk">洛阳<p class="pt">春天</p><p class="pt">夏天</p><p class="pt">秋天</p><p class="pt">冬天</p><script>let chk_arr1 = document.getElementsByName('chk')console.log(chk_arr1)let chk_arr2 = document.getElementsByTagName('input')console.log(chk_arr2)let arr = document.getElementsByClassName('pt')console.log(arr)let d1 = document.querySelector('#box')console.log(d1)console.log(d1.__proto__)let chk_arr3 = document.querySelectorAll('.pt')console.log(chk_arr3)</script>
</body><body><form action="#" method="get">用户名：<input type="text" name="userName" id="userName"><br/>密码：<input type="password" name="pwd" id="pwd"><br/></form><button type="button" id="btn_reset">重置</button><button type="button" id="btn_sumbit">提交</button><script>// 重置let reset = document.getElementById('btn_reset')reset.addEventListener('click',function (){document.getElementById('userName').value=''document.getElementById('pwd').value=''})// 提交let submit = document.getElementById('btn_submit')submit.addEventListener('click',function(){document.getElementById('userName').value=''document.getElementById('pwd').value=''})</script>
</body>三.document对象的属性【DOM对象核心】
1.document.body：返回文档的body元素
2.document.documentElement:返回文档的html元素
3.document.forms:返回文档的form(表单)对象
<body><form action="#" method="get">用户名：<input type="text" name="userName"><br/>密码：<input type="password" name="pwd" id=""><br/><input type="reset"><input type="submit"></form><script>console.log(document.body)console.log(document.documentElement)console.log(document.forms)//返回的是集合，长度为1console.log(document.forms[0].tagName)//FORMconsole.log(document.forms[0].method)//get</script>
</body>四.Element对象的属性和方法：在JavaScript代码中使用html的标签（Element）属性和方法
1.children属性：用来获取某个元素的子元素
强调：HTMLCollection和NodeList的区别：
（1）HTMLCollection：通过document对象或Element对象调用getElementsByClassName()方法、getElementsByTagName()方法、children属性等返回的对象集。
（2）NodeList：document对象调用getElementsByName()方法在Chrome和FireFox浏览器中返回的是NodeList对象，IE11返回的是HTMLCollection对象。
（3）HTMLCollection对象用于元素操作
（4）NodeList对象用于节点操作
<body><p>四大传说</p><ul id="ul"><li>梁山伯与祝英台</li><li>白蛇传</li><li>牛郎织女</li><li>孟姜女哭长城</li></ul><script>let list = document.getElementById('ul')console.log(l更多推荐
DOM［document操作html页面、document对象的属性、Element对象的属性和方法、元素的属性和方法、标签的属性、元素的样式、DOM中节点的操
发布评论