DOM，getElement系列qureySelector系列，操作元素类型，innerHTML，innerText,value,事件绑定，操作css样式，操作属性：getArrtlibute等~
DOM（Document Object Model）： 文档对象模型
其实就是操作 html 中的标签的一些能力
我们可以操作哪些内容
- 获取一个元素
- 移除一个元素
- 创建一个元素
- 向页面里面添加一个元素
- 给元素绑定一些事件
- 获取元素的属性
- 给元素添加一些 css 样式
- ...
DOM 的核心对象就是 docuemnt 对象
document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
DOM： 页面中的标签，我们通过 js 获取到以后，就把这个对象叫做 DOM 对象
document文档对象
window.document
属性和方法：（分为getElement系列和qureySelector系列）
- getElementById('id属性值')（id是唯一值，多个id相同一起测试，会返回第一个元素）
- getElementsByClassName('class属性')（返回是一组元素，长得像数组，称伪数组，类数组！）
类数组和数组Array区别
1.类数组不能用Array的常用方法
2.类数组可以遍历，可以使用 [ ] 访问元素
function test2(){var divEles = document.getElementsByClassName('d1')console.log(divEles)for(var i =0; i < divEles.length; i++){console.log(divEles[i])}- getElementsByTagName('标签名')（返回是一组元素，长得像数组）通过标签名获取，必须使用索引才能准确的得到DOM元素。
- getElementsByName('name属性')
- querySelector:按照选择器的方式来获取元素，只能获得一个元素，并且是页面中第一个满足条件的元素。
- querySelectorAll:按照选择器的方式来获取元素，可以获取所有满足条件的元素，以一个伪数组的形式返回，获取到的是一组数据，需要用索引来获取每个DOM元素。
将以上方法对照起来看，会更加直观的理解
<body><div id="box">我第一</div> <div class="box">我第二</div><div>我第三</div><div id="box">我第四</div> <div class="box">我第五</div><div>我最小</div><script>// var boxEle=document.getElementById('box') //获取页面中id为box的div标签,只能获得一个元素// console.log(boxEle)// var boxEle=document.getElementsByClassName('box') //获得一组元素// console.log(boxEle)// var boxEle=document.getElementsByTagName('div')//获得一组元素// console.log(boxEle)// console.log(boxEle[0])// console.log(document.querySelector('div')) //获取第一个div元素// console.log(document.querySelector('.box')) //获取第一个类名为box的// console.log(document.querySelector('#box'))//获取页面中第一个id名为box的元素// console.log(document.querySelectorAll('div')) //获取全部div元素// console.log(document.querySelectorAll('.box')) //获取全部类名为box的// console.log(document.querySelectorAll('#box'))//获取页面中全部id名为box的元素</script>操作其内容 ：
1. 获取内容 * .innerHTML
<div><p><span>hello</span></p></div><!-- 获取div中的结构！！！) --><script>var div=document.querySelector('div')console.log(div.innerHTML)</script>2. *.innerHTML = '新内容' // 设置内容
<body><div></div><script>var div=document.querySelector('div')div.innerHTML='<span>你好</span>'</script>
</body>3. innerText 获取内容
<div><p><span>hello</span></p></div> <!-- 获取div中的内容hello！！！) --><script>var div=document.querySelector('div')console.log(div.innerText)</script> <div></div><!-- 会把 <p>hello</p>作为文本出现在Div元素里面，而不会把P解析成标签--><script>var div=document.querySelector('div')div.innerText='<p>hello</p>'</script>
innerText 和 innerHTML 区别:
1. innerText 以纯文本形式显示
2. innerHTML
value 表单元素内容
<input type="text"/>
操作非表单元素 innerText 和 innerHTML
<body><h2 id="title">元素一</h2><input type="text" name="message" placeholder="请输入内容" value="rose"><script>function test1(){var h2Ele = document.querySelector('#title')// h2Ele.innerHTML = '<h3>innerText设置的内容</h3>' //以内容显示h2Ele.innerText = '<h3>innerText设置的内容</h3>'//以纯文本显示，即：内容: <h3>innerText设置的内容</h3>console.log('内容 :',h2Ele.innerHTML);}test1()</script>
</body>操作表单元素 value：
<h2 id="title">元素一</h2><input type="text" name="message" placeholder="请输入内容" value="rose"> function test2(){var inputEle = document.querySelector('input[name="message"]')inputEle.value = 'jack'console.log( inputEle.value )}test2()
运用综合知识，来写一个岛上书店的案例，现实点击按钮时，会有相关的操作~
<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>操作内容示例</title><style type="text/css">body,input,div,p {margin: 0;padding: 0;}body {font-size: 14px;font-family: "微软雅黑";line-height: 25px;}.content {width: 550px;margin: 0 auto;}.content img {float: left;width: 150px;}.r {float: left;width: 400px;}input[name="changeBook"] {width: 100px;height: 28px;line-height: 28px;text-align: center;font-size: 14px;font-family: "微软雅黑";margin: 10px 0 10px 0;}input[name="season"] {width: 50px;text-align: center;}.input {border: 1px solid green;font-size: 18px;font-weight: bold;}</style>
</head><body><div class="content"><img src="images/book.jpg" alt="岛上书店" /><div class="r"><div id="book">书名：岛上书店</div><input id="updatename" name="changeBook" value="换换名称" type="button"onclick="onUpdateBookName()" /><br>四季名称：<input name="season" type="text" value="春" /><input name="season" type="text" value="夏" /><input name="season" type="text" value="秋" /><input name="season" type="text" value="冬" /><br><br><input name="b2" type="button" value="input内容" onclick="onShowInput()" /><input name="b3" type="button" value="四季名称" onclick="onSeason()" /><input name="b4" type="button" value="清空页面内容" onclick="onClear()" /><p id="replace"></p></div></div><script type="text/javascript">/*做什么?点击换换名称按钮，更换书名1. 绑定点击事件2. 更改名内容*/function onUpdateBookName() {var divEle = document.querySelector('#book')divEle.innerHTML = '书名：javascript高级编程'}/*做什么?点击input内容按钮，将所有input按钮内容值拼接成字符串设置给p标签作为内容显示1. input内容按钮点击事件2. 将所有input标签内容值拼接成字符串3. 操作p标签内容*/function onShowInput() {var inputEles = document.querySelectorAll('input') //类数组//循环遍历类数组var str = ''for(var i = 0; i < inputEles.length; i++){var inputEle = inputEles[i] // input元素str = str + inputEle.value + ' '}var pEle = document.querySelector('#replace')pEle.innerHTML = str}/*做什么?点击四季名称按钮，拼接四季名称显示*/function onSeason() {var seasonInputs = document.querySelectorAll('input[name="season"]')var str = ''for(var i = 0; i < seasonInputs.length; i++){var inputEle = seasonInputs[i]str = str + inputEle.value + ' ' }var pEle = document.querySelector('#replace')pEle.innerHTML = str}function onClear() {document.write('')}</script>
</body></html>dom操作样式
使用js代码动态操作样式
1. 行间样式 style
ele.style.样式名=>样式值
ele.style.样式名 = 样式值
2. 类样式
ele.className=类名
注: 后面的类名会覆盖前面的类名
ele.classList.add(类名1)
ele.classList.add(类名2)
'类名1 类名2 '
获取非行间样式
window.getComputedStyle(元素).样式名
=>样式值
<style>.d1 {width: 200px;height: 200px;background-color: skyblue;}.d2{text-align: center;}.d3{width: 200px;height: 200px;background-color: pink;}</style></head><body><h2 style="color: red;">操作样式</h2><div>元素一</div><h3 class="d3">元素二</h3><p></p><button onclick="getStyleTest()">获取style样式</button><button onclick="setStyleTest()">设置style样式</button><button onclick="setClassStyle()">设置class样式</button><button onclick="getClassStyle()">获取非行间样式</button><script>// 获取h2标签的行内样式，显示h2的颜色function getStyleTest(){var h2Ele = document.querySelector('h2')var colorValue = h2Ele.style.color //行内式var pEle = document.querySelector('p')pEle.innerHTML = colorValue}// 更改h2字体大小为44px ，背景色为蓝色function setStyleTest(){var h2Ele = document.querySelector('h2')h2Ele.style.fontSize = '44px' // js代码操作样式名， 样式名用驼峰命令 font-size -> fontSizeh2Ele.style.backgroundColor = 'skyblue'}function setClassStyle(){var divEle = document.querySelector('div')// divEle.className = 'd1'// divEle.className = 'd2'divEle.classList.add('d1')divEle.classList.add('d2')}// 控制台输出w为200pxfunction getClassStyle(){var h3Ele = document.querySelector('h3')var w = window.getComputedStyle(h3Ele).widthconsole.log('w :',w);}</script>操作属性：js代码动态获取属性值或设置属性
1.获取 ele.getAttribute(属性名)=>属性值
ele.属性值 只针对本身拥有的属性，不能拿到自定义的属性
设置属性：
ele.setAttribute(属性名，属性值)
ele.属性名=属性值
移除属性：ele.removeAttribute(属性名)
data-属性名
<h2 id="title" class="d1" a="100" b="200">元素一</h2><h3>元素二</h3><a href="">百度</a><img src="./06练习岛上书店/images/11239.png" alt="图片"><img src="" alt="图片2"><!-- 自定义属性 --><h4 data-index="1001" data-score="98">元素三</h4><button onclick="getAttr()">获取属性</button><button onclick="setAttr()">设置属性</button><button onclick="removeAttr()">移除属性</button><button onclick="getMyAttr()">获取自定义属性</button><script>function getAttr(){var h2Ele = document.querySelector('h2') // 获取h2元素var imgEle = document.querySelector('img') // 获取img元素var idValue = imgEle.getAttribute('src') // 获取h2元素id属性值console.log(idValue)console.log(imgEle.src)}function setAttr(){var h3Ele = document.querySelector('h3')h3Ele.setAttribute('id','titl2')h3Ele.setAttribute('a','1000')var imgEle = document.querySelectorAll('img')[1]// imgEle.setAttribute('src','./06练习岛上书店/images/book.jpg')imgEle.src='./06练习岛上书店/images/book.jpg'}function removeAttr(){var h2Ele = document.querySelector('h2') // 获取h2元素h2Ele.removeAttribute('a')}function getMyAttr(){var h4Ele = document.querySelector('h4')var index = h4Ele.dataset.scoreconsole.log(index)}
操作事件：
给元素绑定点击事件 ，直接给元素添加onclick属性事件
更提倡另外一种 ：将元素和事件行为分离
<button>按钮</button><div>元素一</div><script>var btn = document.querySelector('button')btn.onclick = function(){alert('绑定事件')}var divEle = document.querySelector('div')divEle.onclick = function(){divEle.innerHTML = '今天是周五'}</script>若有错误，请指正！
样式， 属性，事件
发布者：admin，转转请注明出处：http://www.yc00.com/web/1730974110a3589683.html
评论列表（0条）