• 当前标签:DOM节点

程序开发 DOM节点 - 属性节点

<!doctype html>  <html>      <head>          <meta charset="utf-8">          <title>DOM属性节点</title>          <style>              .red-text{                  color: red;                  font-size: 40px;                  font-weight: bold;              }              .kaiti-text{                  font-family: '楷体';              }              .italic-text{                  font-style: italic;              }              .blue{                  color: blue;              }          </style>      </head>      <body >          <p id="fff">今天又下雨了</p>          <a id="baidu" class="red-text kaiti-text"  href="https://www.baidu.com" target="_blank">百度搜索[shift + alt + B]</a>          <script>              var link =document.getElementById('baidu')                           console.log(link.attributes)              // NamedNodeMap 对象表示一个无顺序的节点列表。              // attributes获取属性列表(所有属性)              for(var i = 0; i < link.attributes.length;i++){                  var attr = link.attributes[i]                  // alert(attr.value)                  // value获取属性的值                  // alert(attr.name)                  // name获取属性的名字              }              // var target = link.getAttribute('target')              // alert(target)              // getAttribute获取属性值              // alert(link.href)              // 获取属性值                            link.setAttribute('title','百度一下 你就知道')              // alert(link.getAttribute('title'))              // alert(link.title)              link.title = '百度一下  你就忘了'              // 设置属性值              link.accessKey = 'B'              // alt + shift + b  火狐              // alt + b  谷歌               // link.contentEditable = 'true'              // 标签内容是否可以编辑                //   link.removeAttribute('href')              // 彻底移除属性                // alert(link.hasAttribute('accesskey'))              // hasAttribute检查是否有指定的属性 有 true 无 false                // alert(link.hasAttributes())              // alert(document.body.hasAttributes())              // 是否有属性 任意都算                // class属性              // link.class= 'italic-text'              // link.className = 'italic-text'              // class是关键字 不能使用class              // 使用className控制元素的class属性                // console.log(link.classList)              // link.classList.remove('red-text')              // 移除样式类              // link.classList.add('red-text')              // 添加样式类              // alert(link.classList.contains('red1-text'))              // 是否包含指定样式表              link.classList.toggle('red-text')              link.classList.toggle('red-text')                                 // function ccc(){              var p =document.getElementById('fff')            console.log('ccccc')             p.classList.toggle('red-text')          // //    切换样式类 如果有 则无 如果无 则有          // //    p.classList.toggle('red-text')          // }            p.className = 'red-text blue'          // console.log(p.classList)            // p.classList.add('blue')          // 在元素中添加一个或多个类名            // p.classList.remove('red-text','blue')          // 移除元素中一个或多个类名            // alert(p.classList.contains('blue'))          // 是否包含指定样式类            // alert(p.classList.item(0))              // 修改style属性          p.style.width = '300px'          p.style.height = '200px'          p.style.backgroundColor = 'red'          p.style.padding = '20px'          p.style.display = 'inline-block'          p.style.border = '5px solid blue'          // alert(p.style.border)          // alert(p.style.fontSize)          // 只能获取标签元素style属性定义的样式                    var style = window.getComputedStyle(p,':after')          // 获取所有应用在元素上的有效样式值          console.log(style.fontSize)              </script>      </body>  </html>  

2017-07-14 22:47:25 55 0 0
阅读详情

程序开发 DOM节点 - 元素节点

<ul>         <li>HTML5</li>         <li>CSS3</li>         <li>JavaScript</li>         <li>Java</li>     </ul> var ul = document.getElementsByTagName('ul')[0] var li2 = ul.childNodes[3] // 获取子节点 包含文本节点 会受到HTML文档中空白字符的干扰 var li2 = ul.children[1] // children获取子元素/标签 不包含空白字符 console.log(li2) alert(li2.outerHTML) // 获取包含本身在内的所有html代码 document.write('123') document.write('456') document.writeln('123') document.writeln('456') document.write('<pre>') for(var k in li2){     document.writeln(k)     // 可以在</body>之前 向HTML文档或当前页面写入新的文本 } document.write('</pre>') alert(li2.previousElementSibling.outerHTML) // previousElementSibling 属性返回同一树层级中 // 指定节点的前一个节点 // 被返回的节点以Node 对象的形式返回 alert(li2.nextElementSibling.outerHTML) // nextElementSibling属性返回同一树层级中       alert(li2.childElementCount) // 子元素的数量  console.log(ul) alert(ul.firstChild.nodeName) alert(ul.lastChild.nodeName) // 返回第一个或最后一个节点 alert(ul.firstElementChild.outerHTML) alert(ul.lastElementChild.outerHTML) // 返回第一个或最后一个元素 var newli =document.createElement('li') // 创建一个新的标签元素 newli.innerText = 'PHP' ul.appendChild(newli) // 拼接子元素 添加到最后一个子节点之后 var removed = ul.removeChild(ul.firstElementChild) // removeChild 移除子节点 ul.appendChild(removed) ul.replaceChild(removed,newli) // 替换子节点 ul.insertBefore(removed,ul.firstChild) // insertBefore() 方法在您指定的已有子节点之前插入新的子节点。 // ul.insertBefore('插入内容','在...节点之前') ul.insertAdjacentText('beforeBegin','外面的外面') // 插入文本 // beforeBegin 在...开始之前 ul.insertAdjacentHTML('afterBegin','<li>里面的前面</li>') // afterBegin 在...里面的前面 ul.insertAdjacentHTML('beforeEnd','<li>里面的后面</li>') // beforeEnd 在...里面的后面 ul.insertAdjacentText('afterEnd','外面的后面') // afterEnd 在...外面的后面 ul.insertAdjacentElement() // 插入标签元素 // ul.insertAdjacentHTML() // 插入代码

2017-07-14 21:37:23 77 0 0
阅读详情

程序开发 DOM节点 - 文本节点

DOM节点类型: 类型 值 说明 ELEMENT_NODE 1 元素节点 ATTRIBUTE_NODE 2 属性节点 TEXT_NODE 3 文本节点 COMMENT_NODE 8 注释节点 DOCUMENT_NODE 9 文档节点   <ul>         <li>HTML5</li>         <li>CSS3</li>         <li>PHP</li>         <li>JavaScript</li>     </ul> var list = document.querySelector('ul')         console.log(list.childNodes)         // childNodes属性返回子节点的集合 以childNodes对象         console.log(list.childNodes.length)  //9         console.log(list.childNodes[0].nodeType)  //3         console.log(list.childNodes[0])  //#text //<ul>和<li>直接的空白节点         console.log(list.childNodes[1])  //<li>HTML5</li>         for(var i = 0;i < list.childNodes.length;i++){             // console.log(list.childNodes[i].nodeName)             // nodeName得到节点类型的名称 是字符串 #text表示文本 li表示标签             // console.log(list.childNodes[i].nodeType)             // nodeType得到的是节点类型的值 数字1表示元素节点 3表示文本节点             // console.log(list.childNodes[i].nodeType)             // nodeValue 属性规定节点的值              // 元素节点是undefined 或 null              // 文本节点是文本本省             // 属性节点是属性值         var node = list.childNodes[i]         if(node.nodeType != Node.TEXT_NODE){             console.log(node.nodeName)             var liChildren = node.childNodes             console.log(liChildren[0].nodeValue)             var liChild = liChildren[0]             console.log(liChild.nodeName)             console.log(liChild.nodeValue)         }         } var textNode = list.childNodes[1].childNodes[0]         console.log(textNode.textContent) textContent 和 nodeValue 都可以弹出文本节点的内容    textNode.appendData(':HTML5的第五个版本')  //HTML5:HTML5的第五个版本 // 在结尾处添加新的文本 textNode.insertData(1,'----')  //H----TML5:HTML5的第五个版本 // 在指定的位置插入新文本 textNode.replaceData(5,5,'****')  //H----****HTML5的第五个版本 // 替换指定区域的文本 // 三个参数 (指定的位置,替换的数量,'替换的字符') textNode.deleteData(1,5) //H***HTML5的第五个版本 // 删除指定区域的文本 alert(textNode.substringData(7,10))  //L5的第五个版本 // 获取指定区域的文本 substringData(开始位置,字符的数量) alert(textNode.length) // 获取文本节点的个数 alert(textNode.data) // 获取文本节点的内容 alert(textNode.wholeText) // 获取文本节点的内容 textNode.remove() // 移除文本节点

2017-07-14 17:18:39 55 0 0
阅读详情
  • 1
前往