DOM，getElement系列qureySelector系列，操作元素类型，innerHTML，innerText,value,事件绑定，操作css样式，操作属性：getArrtlibute等~

本文主要是介绍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 表单元素内容

操作非表单元素 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>'//以纯文本显示，即：内容: &lt;h3&gt;innerText设置的内容&lt;/h3&gt;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="http://www.baidu.com">百度</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>

若有错误，请指正！