JS-DOM

DOM

Document Object Model --- 文档对象模型
顶级对象：document

document属于window的对象 即DOM内含于BOM

对html基本结构的操作

获取 body元素 及其所有内容
document.body
    [本质：返回body对象]
    [使用console.dir()查询对象的信息]

获取 html元素 及其所有内容
document.documentElement
    [本质：返回html对象]

获取 head元素 及其所有内容
document.head
    [本质：返回head对象]

获取、设置 title标签 网页标题内容

  1. document.title
  2. document.title = str

获取元素

  1. 通过id名获取元素
    document.getElementById('标签id名')
        [括号中不需要填井号#]

  2. 通过标签名获取元素
    document.getElementsTagName('标签名')
        [返回一个数组 所以需要调用时 需要以访问数组下标的方式进行]

<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
</body>
<script>
    var arr = document.getElementsByTagName('button')
    arr[1].style.backgroundColor = 'red'
</script>
返回结果图示

  1. 通过类名获取元素
    document.getElementsByClassName("类名")
        [同返回数组]

  2. 通过name属性的值获取元素
    document.getElementsByName("name属性的值")
        [同返回数组]

5. 通过css选择器获取第一个元素
documen.querySelector(css选择器)
    [只返回匹配的第一个元素]

6. 通过css选择器获取所有匹配元素
documen.querySelectorAll(css选择器)
    [同返回数组]

7. 通过 关系 获取相应元素

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
<script>
    var a = document.querySelector('ul')

    // 获取所有子元素
    // 父.chilren
    console.log(a.children); // 以数组的形式 返回父元素的所有子元素 不包含内容

    // 获取第一个子元素
    // 父.firstElementChild
    console.log(a.firstElementChild); // <li>1</li> 返回父元素的第一个子元素及其内容
    console.log(typeof a.firstElementChild); // Object 本质返回对象

    // 获取最后一个子元素
    // 父.lastElementChild
    console.log(a.lastElementChild); // <li>5</li> 返回父元素的最后一个子元素及其内容
    console.log(typeof a.lastElementChild); // Object 本质返回对象

    // 获取上一个兄弟元素
    // 兄弟.previousElementSibling
    console.log(a.lastElementChild.previousElementSibling); // <li>4</li> 返回指定同级元素的上一个兄弟元素及其内容
    console.log(typeof a.lastElementChild.previousElementSibling); // Object 本质返回对象

    // 获取下一个兄弟元素
    // 兄弟.nextElementSibling
    console.log(a.firstElementChild.nextElementSibling); // <li>2</li> 返回指定同级元素的下一个兄弟元素及其内容
    console.log(typeof a.firstElementChild.nextElementSibling); // Object 本质返回对象

    // 获取父元素
    // 子.parentElement
    console.log(a.parentElement); // 返回父元素body及其内容
    console.log(typeof a.parentElement); // Object 本质返回对象
</script>

内容操作

// 获取、设置元素中的文本内容

<style>
    div {
        height: 100px;
        width: 100px;
        background-color: purple;
    }

    p {
        background-color: yellow;
    }
</style>

<body>
    <div>
        <p>文本内容</p>
    </div>
</body>

<script>
    // 获取元素的文本内容
    // 标签.innerText
    console.log(document.querySelector('p').innerText); // 文本内容

    // 设置元素的文本内容
    // 标签.innerText = 'str'
    // 该方法会覆盖标签内原有的文本内容
    document.querySelector('p').innerText = '覆盖原有文本'
</script>
设置文本内容-运行结果图示
// 获取、设置元素的子标签及其所有内容
<style>
    div {
        height: 100px;
        width: 100px;
        background-color: purple;
    }

    p {
        background-color: yellow;
    }
</style>

<body>
    <div>
        <p>文本内容</p>
    </div>
</body>

<script>
    // 获取元素的子标签及其所有内容
    console.log(document.querySelector('div').innerHTML); // <p>文本内容</p>

    // 设置元素的子标签及其所有内容
    document.querySelector('div').innerHTML = '<b>原p标签及其内容被覆盖</b>'
</script>

如何避免使用inner添加内容而不被覆盖：
inner += 内容
设置元素的子标签及其所有内容-运行结果图示

属性操作

// 设置、添加属性
// 标签.setAttribute('属性名','属性值')

<body>
    <table>
        <tr>
            <td>Demo</td>
        </tr>
    </table>
</body>

<script>
    document.querySelector('table').setAttribute('border', 10)
</script>

// 注意分清 属性 与 样式 的区别
运行结果图示
// 获取属性值
// 标签.getAttribute('属性名')

<body>
    <table border=10>
        <tr>
            <td>Demo</td>
        </tr>
    </table>
</body>

<script>
    console.log(document.querySelector('table').getAttribute('border')) // 10
</script>

// 删除属性
// 标签.removeAttribute('属性名')

<body>
    <table border=10>
        <tr>
            <td>Demo</td>
        </tr>
    </table>
</body>

<script>
    document.querySelector('table').removeAttribute('border'))
</script>
运行结果图示

类名操作

// 获取类名
// 标签.className

<body>
    <span class="demo"></span>
</body>

<script>
    console.log(document.querySelector('span').className) // demo
</script>

// 设置类名
// 标签.className = '类名'

<body>
    <span class="demo"></span>
</body>

<script>
    document.querySelector('span').className = 'demo2'
</script>
运行结果图示

样式操作

获取样式
getComputedStyle(标签).样式

// 设置、添加样式 
// 标签.style.属性 = '属性值'

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: blue;
    }
</style>

<body>
    <div></div>
</body>

<script>
    document.querySelector('div').style.width = '200px'
</script>

// 该方法添加的样式为 行内样式 且不会覆盖原有的 其他样式
设置样式-运行结果图示

节点操作

DOM由html中的节点构成
标签、文本内容、注释 均是节点

案例：
<ul>222<span>abc</span><!-- 333 --></ul>
... ...
var ul=document.querySelector('ul')
// 获取所有子节点
console.log(ul.childNodes);
// 获取所有子标签
console.log(ul.children);

// 返回节点类型
// 节点.nodeType
console.log(ul.childNodes[0].nodeType); // 3 --- 文本节点 特定返回值
console.log(ul.childNodes[1].nodeType); // 1 --- 标签节点 特定返回值
console.log(ul.childNodes[2].nodeType); // 8 --- 注释节点 特定返回值

// 返回节点名称
// 节点.nodeName
console.log(ul.childNodes[0].nodeName); // #text --- 文本节点名称 特定返回 #text
console.log(ul.childNodes[1].nodeName); // SPAN --- 标签节点名称 特定返回 大写标签名
console.log(ul.childNodes[2].nodeName); // 8 --- 注释节点 特定返回 #comment

// 返回节点的值
// 节点.nodeValue
console.log(ul.childNodes[0].nodeValue); // 222 --- 返回文本节点的内容
console.log(ul.childNodes[1].nodeValue); // null --- 元素节点没有值 注意与value区分
console.log(ul.childNodes[2].nodeValue); // 333 --- 返回注释节点的内容
childNode与children的输出-图示
案例：
<body>
    <p></p>
</body>

// 创建标签
// document.creatElement('标签名')
var demo = document.createElement('div')
var demo2 = document.createElement('span')
// 创建≠在html中创建 单纯创建 未添加入html中时 无意义
// 将新标签赋值给变量demo 方便接下来的操作

// 在 父元素 的 末尾 添加一个子节点
// 父元素.appendChild(子节点)
document.body.appendChild(demo)
在父元素的末尾添加子节点-运行结果图示
// 在 指定子节点 的 前面 添加一个子节点
// 父元素.insertBrfore(新结点,原有子节点)
document.body.insertBefore(demo2, document.querySelector('p'))
在子节点前添加节点-运行结果图示
// 替换同级节点
// 父元素.replaceChild(新节点,被替换的旧节点)
document.body.replaceChild(demo3, demo2)
替换同级节点-运行结果图示
// 删除节点
// 父元素.removeChild(子节点)
document.body.removeChild(demo3 demo)
// 使用空格隔开可同时删除多个节点
删除节点-运行结果图示
<p>abc</p>
...
// 复制节点
// 节点.cloneNode(boolean)
var a = document.querySelector('p').cloneNode(true) //深复制 复制标签及其内容
console.log(a); // <p>abc</p>

var b = document.querySelector('p').cloneNode(false) //浅复制 只复制标签
console.log(b); // <p></p>

获取标签定位位置 及 参考系

<body>
    <p style="position: absolute;left: 20px;top: 50px;">abc</p>
</body>
<script>
    // 获取标签的定位位置
    // 相对参考系位置 参考系为页面即相对页面定位位置

    // 获取左定位
    // 标签.offsetLeft
    console.log(document.querySelector('p').offsetLeft); // 20

    // 获取顶部定位
    // 标签.offsetRight
    console.log(document.querySelector('p').offsetTop); // 50

    // 获取定位参考的父元素
    // 标签.offsetParent
    console.log(document.querySelector('p').offsetParent); // <body>...</body>
</script>

获取标签宽高

<style>
    p {
        width: 100px;
        height: 100px;

        border: 50px solid black;

        margin: 10px;
        padding: 1px;
    }
</style>

<body>
    <p>abc</p>
</body>

<script>
    // 获取标签的宽高

    // 获取宽度
    // 标签.offsetWidth
    console.log(document.querySelector('p').offsetWidth); // 202
    // 该宽度包含了边框宽 但不包含外边距

    // 标签.clientWidth
    console.log(document.querySelector('p').clientWidth); // 102
    // 该宽度只包含内容和内填充宽

    //获取高度
    // 标签.offsetHeight
    console.log(document.querySelector('p').offsetHeight); // 202
    // 该宽度包含了边框高 但不包含外边距

    // 标签.clientHeight
    console.log(document.querySelector('p').clientHeight); // 102
    // 该宽度只包含内容和内填充高
</script>

// offset系列 当对象为display：none时 无法获取到属性
// 解决方案：先深复制 隐藏时提取复制对象的属性

获取浏览器滚动的距离

Y轴向下滚动距离

  1. document.documentElement.scrollTop
        [当前文档有 文档声明 doctype 时才能 使用]
  2. document.body.scrollTop
        [当前文档 没有 文档声明 doctype 时使用]

兼容写法
documen.documentElement.scrollTop || document.body.scrollTop

X轴向右滚动距离

  1. document.documentElement.scrollLeft
  2. document.body.scrollLeft
        [语法同上]

短路运算

// ||运算符

案例：
var a
a = 1 || 2
console.log(a);    // 1 左为true 将左赋值给a
a = 1 || 0
console.log(a);    // 1 同上

a = 0 || 2
console.log(a);    // 2 左为0 即false 无论右值为什么 执行右 将右赋值给a
a = false || 0
console.log(a);    // 0 同上

// &&运算符

案例：
var a
a = 1 && 2
console.log(a);    // 2 左为true 执行右 将右赋值给a
a = 1 && 0
console.log(a);    // 0 同上

a = 0 && 2
console.log(a);    // 0 左为false &&运算符提前结束 将左赋值给a 不在执行右
a = false && 0
console.log(a);    // false 同上
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容