Js高程第十章DOM-document-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_24270109/article/details/100108024

本文详细介绍了如何使用JavaScript操作HTML文档，包括获取HTML元素、属性、注释以及动态引入CSS和JS的方法。深入探讨了getElementById,getElementsByTagName等API的使用技巧，并展示了如何通过JavaScript动态加载样式和脚本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

取得html各属性

    var html = document.documentElement //html	
        body = document.body //body
        doctype = document.doctype//不同浏览器支持不一致 用处有限
        title = document.title	//网页title
        url = document.URL	//URL
        domain = document.domain	//域名

URL与domain是相关联的若URL=‘http://www.XXX.com/aaaa/’ 则domain=‘www.XXX.com’

在html外部注释
eg:

<!--第一条注释 --> 
<html> 
 <body> 
 </body> 
</html> 
<!--第二条注释 -->

通常认为有三个子节点第一条 html 第二条
在不同浏览器之间对注释的节点创建不一致
同样，浏览器间的这种不一致性也导致了位于html元素外部的注释没有什么用处。

查找元素

1.getElementById()
2.getElementByTagName()

<div id='mydiv'></div>
var box = document.getElementById('myDiv')

在IE8及较低版本不区分ID大小写现在最好大小写匹配若有多个ID相同则返回第一次寻找到的

TagName

    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <img src="xxx" alt=" ">
    let item = document.getElementsByTagName('li')
    let im = document.getElementsByTagName('img')
    console.log(item.length) // 8
    item[0] // <li></li>
    im[0].src  //可以访问第一个图像的src
    console.log(item.namedItem('myLi'))	//通过namedItem()可以取到想要的含name的元素
    console.log(item['myLi'])	//这种方式也可以获取
    document.getElementsByTagName("*")	//返回页面中的所有元素

js动态引入css js

    const loadScriptString = (code) => {
      let script = document.createElement("script")
      script.type = 'text/javascript'
      try {
        script.appendChild(document.createTextNode(code))
      } catch (ex) {
        //ie
        script.text = code
      }
      document.body.appendChild(script)
    }
    loadScriptString("function sayHi() {alert('hi')}")

css外部文件

    const loadStyles = (url) => {
      let link = document.createElement("link")
      link.href = url
      link.rel = 'stylesheet'
      link.type = 'text/css'
      let head = document.getElementsByTagName("head")[0]
      head.appendChild(link)
    }
    loadStyles('jslearn2.css')

嵌入式css

    const loadStylesString = (css) => {
      let style = document.createElement("style")
      style.type = 'text/css'
      try {
        style.appendChild(document.createTextNode(css))
      } catch (ex) {
        //ie
        style.styleSheet.cssText = css
      }
      let head = document.getElementsByTagName("head")[0]
      head.appendChild(style)
    }