Document的属性和方法

最新推荐文章于 2024-06-01 00:00:00 发布

mch0311

最新推荐文章于 2024-06-01 00:00:00 发布

阅读量2.5k

点赞数 2

分类专栏： js 文章标签： Document

本文链接：https://blog.csdn.net/mch0311/article/details/82428987

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

documentElement html元素
body body元素
doctype
title 标题
URL 统一资源定位符，获取路径
domain 域名
referrer 前一个页面的URL
images 所有img标签
forms 所有form标签
links 所有有href属性的a标签

getElementById('id')
    有返回一个元素节点，没有null
getElementsByTagName('div');
    获取所有指定名字的标签元素，返回类数组对象
getElementsByName('name');
    获取name值为参数的元素节点，返回类数组对象
getElementsByClassName('class');
    获取class值为参数的元素节点，返回类数组对象
createElement('标签名')
    创建一个元素节点
    一定要记得追加节点
createAttribute('id') Attr实例
    var node = document.createAttribute('id');
    node.value = "one";

Element的属性和方法
id 获取id属性值
className 获取class属性值
src
alt
lang
dir
title
style
onclick 获取对应的属性值
getAttribute(‘属性名’)
返回属性值
是对自定义属性来使用

    style  onclick 通过.调用返回的都是对象
    通过getAttribute()返回的是字符串
setAttribute('属性名','属性值')
    设置属性，添加或者修改

    元素节点.属性名 = "属性值";
removeAttribute('属性名')
    删除属性
attributes  属性
    返回该元素的所有属性节点，是一个类数组对象，每一个元素都是一个Attr的实例
    var div = document.getElementById('one');
    var attrs = div.attributes;
    attrs.getNamedItem('属性名');  //返回一个Attr实例
    attrs.getNamedItem('属性名').value;  //获取属性值
    attrs.removeNamedItem('属性名'）; // 删除
    attrs.setNamedItem(Attr实例);  //添加属性
    attrs.item(1) //获取类数组中的元素
children 获取所有的元素子节点
firstElementChild 第一个元素孩子节点
lastElementChild  最后一个元素孩子节点
nextElementSibling 下一个兄弟元素节点
previousElementSibling 上一个兄弟元素节点
childElementCount  元素孩子个数
innerHTML  返回元素内容
innerContent
innerText  
innerHTML,innerContent和innerText三者区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>element</title>
    <script>
        window.onload = function(){
            // 选中div 输出那三个属性
            var div = document.getElementById('one');
            console.log(div.innerHTML);//元素内部内容
            console.log(div.innerText);//
            console.log('-------');
            console.log(div.textContent);
            // 设置内部文本，会将内部的内容全部覆盖
            // div.innerText = "world";
            // innerHTML可以向父节点中添加Element节点
            // innerText 只可以添加文字
            div.innerHTML = "<p>你好</p>";
        }
    </script>
</head>
<body>
    <div id="one">
        <span>
            hello
        </span>
    </div>
</body>
</html>

其结果为
这里写图片描述

mch0311

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Document的属性和方法

documentElement html元素 body body元素 doctype title 标题 URL 统一资源定位符，获取路径 domain 域名 referrer 前一个页面的URL images 所有img标签 forms ...
复制链接

扫一扫